はじめに

1. パッケージのインストール

   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. ネイティブプロジェクトとの同期

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. 権限の設定

   iOS

   Info.plistに使用説明を追加します:

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

   Android

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

使用方法

プラグインをインポートして、画面を録画するメソッドを使用します:

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リファレンス

start()

画面録画を開始します。

await ScreenRecorder.start();

stop()

録画を停止して、ビデオファイルのパスを返します。

interface RecordingResult {
  videoUrl: string;
}

const result = await ScreenRecorder.stop();

isSupported()

デバイスで画面録画がサポートされているかを確認します。

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

isRecording()

現在画面録画が実行中かどうかを確認します。

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

高度な使用方法

オプション付き録画

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

完全な録画フロー

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

ベストプラクティス

1. 使用前にサポートを確認

   const { value } = await ScreenRecorder.isSupported();
   if (!value) {
     // 録画機能を非表示にするか代替手段を表示
   }

2. 権限を適切に処理 iOSでは、システムが自動的に権限を要求します。Androidでは、必要な権限を要求することを確認してください。

3. ユーザーフィードバックを提供 録画が実行中のときに明確なインジケータを表示します:

   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. 中断を処理

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

プラットフォームに関する注意事項

iOS

• iOS 11.0以降が必要
• ReplayKitフレームワークを使用
• システムがステータスバーに録画インジケータを表示
• ユーザーは録画開始を確認する必要があります

Android

• Android 5.0 (API 21)以降が必要
• MediaProjection APIを使用
• 録画中に通知を表示
• 一部のデバイスではメーカー固有の制限がある場合があります

Web

• Webプラットフォームではサポートされていません
• isSupported: falseを返します

トラブルシューティング

1. 録画の開始に失敗する

   • すべての権限が付与されていることを確認してください
   • 別のアプリがすでに録画中かどうかを確認してください
   • デバイスが画面録画をサポートしているか確認してください

2. 録画に音声がない

   • マイクの権限を確認してください
   • recordAudioオプションが有効になっていることを確認してください
   • 一部のデバイスはシステム音声の録画をサポートしていない場合があります

3. ビデオファイルが見つからない

   • ファイルの権限を確認してください
   • 十分なストレージ容量があることを確認してください
   • 返されたビデオURLが有効であることを確認してください