Erste Schritte mit Screen Recorder

1. Paket installieren

   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. Mit nativen Projekten synchronisieren

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Berechtigungen konfigurieren

   iOS

   Fügen Sie Verwendungsbeschreibungen zu Ihrer Info.plist hinzu:

   <key>NSMicrophoneUsageDescription</key>
   <string>Um Audioaufnahmen mit Bildschirmaufnahmen zu erfassen</string>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>Um Bildschirmaufnahmen zu speichern</string>

   Android

   Fügen Sie Berechtigungen zu Ihrer AndroidManifest.xml hinzu:

   <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" />

Verwendung

Importieren Sie das Plugin und verwenden Sie seine Methoden zur Bildschirmaufnahme:

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

// Aufnahme starten
const startRecording = async () => {
  try {
    await ScreenRecorder.start();
    console.log('Aufnahme gestartet');
  } catch (error) {
    console.error('Aufnahmestart fehlgeschlagen:', error);
  }
};

// Aufnahme beenden
const stopRecording = async () => {
  try {
    const result = await ScreenRecorder.stop();
    console.log('Aufnahme gespeichert auf:', result.videoUrl);

    // Sie können jetzt die Video-URL verwenden
    // Zum Beispiel freigeben oder abspielen
  } catch (error) {
    console.error('Aufnahmebeeendigung fehlgeschlagen:', error);
  }
};

// Überprüfen Sie, ob Bildschirmaufnahme unterstützt wird
const checkSupport = async () => {
  const { value } = await ScreenRecorder.isSupported();
  console.log('Bildschirmaufnahme unterstützt:', value);
};

// Überprüfen Sie, ob gerade Aufnahme läuft
const checkRecordingStatus = async () => {
  const { value } = await ScreenRecorder.isRecording();
  console.log('Derzeit aufnehmen:', value);
};

API-Referenz

start()

Starten Sie die Bildschirmaufnahme.

await ScreenRecorder.start();

stop()

Beenden Sie die Aufnahme und geben Sie den Videodateipfad zurück.

interface RecordingResult {
  videoUrl: string;
}

const result = await ScreenRecorder.stop();

isSupported()

Überprüfen Sie, ob die Bildschirmaufnahme auf dem Gerät unterstützt wird.

const { value } = await ScreenRecorder.isSupported();
// Rückgabe: { value: boolean }

isRecording()

Überprüfen Sie, ob die Bildschirmaufnahme gerade aktiv ist.

const { value } = await ScreenRecorder.isRecording();
// Rückgabe: { value: boolean }

Erweiterte Verwendung

Aufnahme mit Optionen

// iOS-spezifische Optionen
const startWithOptions = async () => {
  await ScreenRecorder.start({
    // iOS nur Optionen
    recordAudio: true,
    microphoneAudio: true,
    showIOSNotification: true,
    notificationText: "Aufnahme wird durchgeführt..."
  });
};

Vollständiger Aufnahmefluss

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 {
      // Überprüfen Sie, ob unterstützt
      const { value: isSupported } = await ScreenRecorder.isSupported();
      if (!isSupported) {
        throw new Error('Bildschirmaufnahme wird nicht unterstützt');
      }

      // Aufnahme starten
      await ScreenRecorder.start();
      this.isRecording = true;

      console.log('Aufnahme gestartet');
    } catch (error) {
      console.error('Aufnahmestart fehlgeschlagen:', error);
      throw error;
    }
  }

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

      console.log('Aufnahme gespeichert:', result.videoUrl);

      // Option zum Teilen der Aufnahme
      await this.shareRecording(result.videoUrl);
    } catch (error) {
      console.error('Aufnahmebeeendigung fehlgeschlagen:', error);
      throw error;
    }
  }

  private async shareRecording(videoUrl: string) {
    try {
      await Share.share({
        title: 'Bildschirmaufnahme',
        text: 'Schauen Sie sich meine Bildschirmaufnahme an!',
        url: videoUrl,
        dialogTitle: 'Aufnahme teilen'
      });
    } catch (error) {
      console.error('Aufnahmefreigabe fehlgeschlagen:', error);
    }
  }
}

Best Practices

1. Unterstützung überprüfen

   const { value } = await ScreenRecorder.isSupported();
   if (!value) {
     // Aufnahmefunktion ausblenden oder Alternative anzeigen
   }

2. Berechtigungen ordnungsgemäß handhaben Das System fordert unter iOS automatisch auf Berechtigungen an. Unter Android sollten Sie erforderliche Berechtigungen anfordern.

3. Benutzerrückmeldung geben Zeigen Sie klare Indikatoren, wenn die Aufnahme aktiv ist:

   let recordingInterval: any;
   
   const startRecording = async () => {
     await ScreenRecorder.start();
   
     // Aufnahmeindikat anzeigen
     recordingInterval = setInterval(() => {
       // UI aktualisieren, um Aufnahmedauer anzuzeigen
     }, 1000);
   };
   
   const stopRecording = async () => {
     clearInterval(recordingInterval);
     await ScreenRecorder.stop();
   };

4. Unterbrechen behandeln

   import { App } from '@capacitor/app';
   
   App.addListener('appStateChange', async ({ isActive }) => {
     if (!isActive) {
       // Erwägen Sie, die Aufnahme zu stoppen, wenn die App in den Hintergrund geht
       const { value } = await ScreenRecorder.isRecording();
       if (value) {
         await ScreenRecorder.stop();
       }
     }
   });

Plattformnotizen

iOS

• Erfordert iOS 11.0+
• Verwendet ReplayKit Framework
• System zeigt Aufnahmeindikat in der Statusleiste
• Der Benutzer muss Aufnahmebeginn bestätigen

Android

• Erfordert Android 5.0 (API 21)+
• Verwendet MediaProjection API
• Zeigt Benachrichtigung während der Aufnahme
• Einige Geräte haben möglicherweise herstellerspezifische Einschränkungen

Web

• Nicht auf Web-Plattform unterstützt
• Gibt isSupported: false zurück

Fehlerbehebung

1. Aufnahmestart schlägt fehl

   • Stellen Sie sicher, dass alle Berechtigungen erteilt wurden
   • Überprüfen Sie, ob eine andere App bereits aufnimmt
   • Überprüfen Sie, ob das Gerät Bildschirmaufnahmen unterstützt

2. Kein Ton in der Aufnahme

   • Überprüfen Sie Mikrofonberechtigungen
   • Stellen Sie sicher, dass die recordAudio-Option aktiviert ist
   • Einige Geräte unterstützen möglicherweise keine Systemtonautzeichnung

3. Videodatei nicht gefunden

   • Überprüfen Sie Dateiberechtigungen
   • Stellen Sie sicher, dass ausreichend Speicherplatz vorhanden ist
   • Überprüfen Sie, dass die zurückgegebene Video-URL gültig ist