Empezando

1. Instalar el paquete

   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. Sincronización con proyectos nativos

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Configurar permisos

   iOS

   Agregue descripciones de uso a su Info.plist:

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

   Android

   Agregue permisos a su 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" />

Uso

Importe el complemento y use sus métodos para grabar la pantalla:

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 Referencia

inicio()

Inicia la grabación de pantalla.

await ScreenRecorder.start();

detener()

Detiene la grabación y devuelve la ruta del archivo de vídeo.

interface RecordingResult {
  videoUrl: string;
}

const result = await ScreenRecorder.stop();

es compatible()

Comprueba si la grabación de pantalla es compatible con el dispositivo.

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

está grabando()

Comprueba si la grabación de pantalla está actualmente activa.

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

Uso avanzado

Grabación con opciones

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

Flujo de grabación completo

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);
    }
  }
}

Mejores prácticas

1. Verifique el soporte antes de usar

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

2. Manejar los permisos correctamente El iOS, el sistema solicitará permiso automáticamente. El Android, asegúrese de solicitar los permisos necesarios.

3. Proporcionar comentarios de los usuarios Muestra indicadores claros cuando la grabación está activa:

   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. Manejar las interrupciones

   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();
       }
     }
   });

Notas de plataforma

iOS

• Requiere iOS 11.0+
• Utiliza el marco ReplayKit
• El sistema muestra el indicador de grabación en la barra de estado
• El usuario debe confirmar el inicio de la grabación.

Android

• Requiere Android 5.0 (API 21)+
• Utiliza MediaProjection API
• Muestra notificación durante la grabación.
• Algunos dispositivos pueden tener limitaciones específicas del fabricante.

Web

• No compatible con la plataforma web
• Devolverá isSupported: false

Solución de problemas

1. La grabación no comienza

   • Asegúrese de que se concedan todos los permisos.
   • Comprueba si otra aplicación ya está grabando
   • Verificar que el dispositivo admita la grabación de pantalla

2. No hay audio en la grabación

   • Verificar los permisos del micrófono
   • Asegúrese de que la opción recordAudio esté habilitada
   • Es posible que algunos dispositivos no admitan la grabación de audio del sistema

3. Archivo de vídeo no encontrado

   • Verificar permisos de archivos
   • Asegurar suficiente espacio de almacenamiento
   • Verifique que la URL del video devuelto sea válida