Memulai

1. Instal paket

   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. Sinkronisasi dengan proyek asli

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Konfigurasi izin

   iOS

   Tambahkan deskripsi penggunaan ke Info.plist Anda:

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

   Android

   Tambahkan izin ke AndroidManifest.xml Anda:

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

Penggunaan

Impor plugin dan gunakan metodenya untuk merekam layar:

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 Referensi

mulai()

Memulai perekaman layar.

await ScreenRecorder.start();

berhenti()

Berhenti merekam dan mengembalikan jalur file video.

interface RecordingResult {
  videoUrl: string;
}

const result = await ScreenRecorder.stop();

Didukung()

Memeriksa apakah perekaman layar didukung pada perangkat.

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

sedangRekaman()

Memeriksa apakah perekaman layar sedang aktif.

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

Penggunaan Lanjutan

Merekam dengan Opsi

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

Alur Perekaman Lengkap

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

Praktik Terbaik

1. Periksa dukungan sebelum digunakan

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

2. Tangani izin dengan benar Pada iOS, sistem akan secara otomatis meminta izin. Di Android, pastikan Anda meminta izin yang diperlukan.

3. Berikan masukan kepada pengguna Tampilkan indikator yang jelas saat perekaman aktif:

   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. Menangani gangguan

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

Catatan Platform

iOS

• Membutuhkan iOS 11.0+
• Menggunakan kerangka ReplayKit
• Sistem menunjukkan indikator perekaman di bilah status
• Pengguna harus mengonfirmasi dimulainya perekaman

Android

• Membutuhkan Android 5.0 (API 21)+
• Menggunakan MediaProjection API
• Menampilkan notifikasi selama perekaman
• Beberapa perangkat mungkin memiliki batasan khusus pabrikan

Web

• Tidak didukung pada platform web
• Akan mengembalikan isSupported: false

Pemecahan masalah

1. Perekaman gagal dimulai

   • Pastikan semua izin diberikan
   • Periksa apakah aplikasi lain sudah merekam
   • Pastikan perangkat mendukung perekaman layar

2. Tidak ada audio dalam rekaman

   • Periksa izin mikrofon
   • Pastikan opsi recordAudio diaktifkan
   • Beberapa perangkat mungkin tidak mendukung perekaman audio sistem

3. File video tidak ditemukan

   • Periksa izin file
   • Pastikan ruang penyimpanan cukup
   • Pastikan URL video yang dikembalikan valid