Iniziare

1. Installa il pacchetto

   npm

   npm i @capgo/capacitor-screen-recorder

   pnpm

   pnpm add @capgo/capacitor-screen-recorder

   yarn

   yarn add @capgo/capacitor-screen-recorder

   bun

   bun add @capgo/capacitor-screen-recorder

2. Sincronizzazione con progetti nativi

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Configura le autorizzazioni

   iOS

   Aggiungi descrizioni di utilizzo al tuo Info.plist:

   <key>NSMicrophoneUsageDescription</key>
   <string>To record audio with screen recording</string>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>To save screen recordings</string>

   Android

   Aggiungi autorizzazioni al tuo AndroidManifest.xml:

   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

Utilizzo

Importa il plugin e usa i suoi metodi per registrare lo schermo:

import { ScreenRecorder } from '@capgo/capacitor-screen-recorder';

// Start recording
const startRecording = async () => {
  try {
    await ScreenRecorder.start();
    console.log('Recording started');
  } catch (error) {
    console.error('Failed to start recording:', error);
  }
};

// Stop recording
const stopRecording = async () => {
  try {
    const result = await ScreenRecorder.stop();
    console.log('Recording saved to:', result.videoUrl);

    // You can now use the video URL
    // For example, share it or play it back
  } catch (error) {
    console.error('Failed to stop recording:', error);
  }
};

// Check if recording is supported
const checkSupport = async () => {
  const { value } = await ScreenRecorder.isSupported();
  console.log('Screen recording supported:', value);
};

// Check if currently recording
const checkRecordingStatus = async () => {
  const { value } = await ScreenRecorder.isRecording();
  console.log('Currently recording:', value);
};

API Riferimento

inizio()

Avvia la registrazione dello schermo.

await ScreenRecorder.start();

fermati()

Interrompe la registrazione e restituisce il percorso del file video.

interface RecordingResult {
  videoUrl: string;
}

const result = await ScreenRecorder.stop();

è supportato()

Controlla se la registrazione dello schermo è supportata sul dispositivo.

const { value } = await ScreenRecorder.isSupported();
// Returns: { value: boolean }

sta registrando()

Controlla se la registrazione dello schermo è attualmente attiva.

const { value } = await ScreenRecorder.isRecording();
// Returns: { value: boolean }

Utilizzo avanzato

Registrazione con opzioni

// iOS-specific options
const startWithOptions = async () => {
  await ScreenRecorder.start({
    // iOS only options
    recordAudio: true,
    microphoneAudio: true,
    showIOSNotification: true,
    notificationText: "Recording in progress..."
  });
};

Completa il flusso di registrazione

import { ScreenRecorder } from '@capgo/capacitor-screen-recorder';
import { Share } from '@capacitor/share';

export class RecordingService {
  private isRecording = false;

  async toggleRecording() {
    if (this.isRecording) {
      await this.stopRecording();
    } else {
      await this.startRecording();
    }
  }

  private async startRecording() {
    try {
      // Check if supported
      const { value: isSupported } = await ScreenRecorder.isSupported();
      if (!isSupported) {
        throw new Error('Screen recording not supported');
      }

      // Start recording
      await ScreenRecorder.start();
      this.isRecording = true;

      console.log('Recording started');
    } catch (error) {
      console.error('Failed to start recording:', error);
      throw error;
    }
  }

  private async stopRecording() {
    try {
      const result = await ScreenRecorder.stop();
      this.isRecording = false;

      console.log('Recording saved:', result.videoUrl);

      // Option to share the recording
      await this.shareRecording(result.videoUrl);
    } catch (error) {
      console.error('Failed to stop recording:', error);
      throw error;
    }
  }

  private async shareRecording(videoUrl: string) {
    try {
      await Share.share({
        title: 'Screen Recording',
        text: 'Check out my screen recording!',
        url: videoUrl,
        dialogTitle: 'Share Recording'
      });
    } catch (error) {
      console.error('Failed to share recording:', error);
    }
  }
}

Migliori pratiche

1. Verificare il supporto prima dell’uso

   const { value } = await ScreenRecorder.isSupported();
   if (!value) {
     // Hide recording feature or show alternative
   }

2. Gestire correttamente le autorizzazioni Il giorno iOS, il sistema richiederà automaticamente l’autorizzazione. Su Android, assicurati di richiedere le autorizzazioni necessarie.

3. Fornisci feedback agli utenti Mostra indicatori chiari quando la registrazione è attiva:

   let recordingInterval: any;
   
   const startRecording = async () => {
     await ScreenRecorder.start();
   
     // Show recording indicator
     recordingInterval = setInterval(() => {
       // Update UI to show recording duration
     }, 1000);
   };
   
   const stopRecording = async () => {
     clearInterval(recordingInterval);
     await ScreenRecorder.stop();
   };

4. Gestire le interruzioni

   import { App } from '@capacitor/app';
   
   App.addListener('appStateChange', async ({ isActive }) => {
     if (!isActive) {
       // Consider stopping recording when app goes to background
       const { value } = await ScreenRecorder.isRecording();
       if (value) {
         await ScreenRecorder.stop();
       }
     }
   });

Note sulla piattaforma

iOS

• Richiede iOS 11.0+
• Utilizza il framework ReplayKit
• Il sistema mostra l’indicatore di registrazione nella barra di stato
• L’utente deve confermare l’inizio della registrazione

Android

• Richiede Android 5.0 (API 21)+
• Utilizza MediaProjection API
• Mostra la notifica durante la registrazione
• Alcuni dispositivi potrebbero avere limitazioni specifiche del produttore

Rete

• Non supportato sulla piattaforma web
• Restituirà isSupported: false

Risoluzione dei problemi

1. La registrazione non si avvia

   • Assicurarsi che tutte le autorizzazioni siano concesse
   • Controlla se un’altra app sta già registrando
   • Verificare che il dispositivo supporti la registrazione dello schermo

2. Nessun audio durante la registrazione

   • Controlla i permessi del microfono
   • Assicurati che l’opzione recordAudio sia abilitata
   • Alcuni dispositivi potrebbero non supportare la registrazione audio del sistema

3. File video non trovato

   • Controlla i permessi dei file
   • Garantire spazio di archiviazione sufficiente
   • Verifica che l’URL del video restituito sia valido