시작하기

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) {
     // Hide recording feature or show alternative
   }

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

• 웹 플랫폼에서 지원되지 않음
• isSupported: false 반환

문제 해결

1. 녹화 시작 실패

   • 모든 권한이 부여되었는지 확인
   • 다른 앱이 이미 녹화 중인지 확인
   • 기기가 화면 녹화를 지원하는지 확인

2. 녹화에 오디오 없음

   • 마이크 권한 확인
   • recordAudio 옵션이 활성화되어 있는지 확인
   • 일부 기기는 시스템 오디오 녹음을 지원하지 않을 수 있음

3. 비디오 파일을 찾을 수 없음

   • 파일 권한 확인
   • 저장 공간이 충분한지 확인
   • 반환된 비디오 URL이 유효한지 확인