Comenzando

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. Sincronizar con proyectos nativos

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Configurar permisos

   iOS

   Agrega descripciones de uso a tu Info.plist:

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

   Android

   Agrega permisos a tu 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

Importa el plugin y usa 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);
};

Referencia del API

start()

Inicia la grabación de pantalla.

await ScreenRecorder.start();

stop()

Detiene la grabación y devuelve la ruta del archivo de video.

interface RecordingResult {
  videoUrl: string;
}

const result = await ScreenRecorder.stop();

isSupported()

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

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

isRecording()

Verifica 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. Verificar compatibilidad antes de usar

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

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

3. Proporcionar retroalimentación al usuario 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 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+
• Usa el framework 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)+
• Usa la API MediaProjection
• Muestra una 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 se inicia

   • Asegúrate de que todos los permisos estén otorgados
   • Verifica si otra aplicación ya está grabando
   • Verifica que el dispositivo admita la grabación de pantalla

2. Sin audio en la grabación

   • Verifica los permisos del micrófono
   • Asegúrate de que la opción recordAudio esté habilitada
   • Algunos dispositivos pueden no admitir la grabación de audio del sistema

3. Archivo de video no encontrado

   • Verifica los permisos de archivos
   • Asegúrate de tener suficiente espacio de almacenamiento
   • Verifica que la URL del video devuelta sea válida