RealtimeKit 시작하기

이 가이드는 Capacitor RealtimeKit 플러그인을 통합하여 애플리케이션에 Cloudflare Calls로 구동되는 화상 회의를 추가하는 방법을 안내합니다.

설치

npm을 사용하여 플러그인을 설치하세요:

npm install @capgo/capacitor-realtimekit
npx cap sync

종속성

이 플러그인은 Cloudflare RealtimeKit SDK를 사용합니다:

• iOS: RealtimeKitCoreiOS (Swift Package Manager를 통해 자동 설치)
• Android: com.cloudflare.realtimekit:ui-android 버전 0.2.2

Android RealtimeKit 버전 사용자 정의

앱의 build.gradle에서:

buildscript {
    ext {
        realtimekitUiVersion = '0.2.2'  // or your desired version
    }
}

iOS 구성

앱의 Info.plist에 다음을 추가하세요:

<key>NSCameraUsageDescription</key>
<string>We need camera access for video calls</string>

<key>NSMicrophoneUsageDescription</key>
<string>We need microphone access for audio calls</string>

<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
  <string>voip</string>
</array>

Android 구성

AndroidManifest.xml에 다음 권한을 추가하세요:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

기본 사용법

플러그인 가져오기

import { CapacitorRealtimekit } from '@capgo/capacitor-realtimekit';

플러그인 초기화

async function initializeRealtimeKit() {
  try {
    await CapacitorRealtimekit.initialize();
    console.log('RealtimeKit initialized');
  } catch (error) {
    console.error('Failed to initialize RealtimeKit:', error);
  }
}

미팅 시작

async function startMeeting(meetingUrl: string) {
  try {
    await CapacitorRealtimekit.startMeeting({
      url: meetingUrl
    });
    console.log('Meeting started');
  } catch (error) {
    console.error('Failed to start meeting:', error);
  }
}

완전한 예제

포괄적인 화상 회의 서비스는 다음과 같습니다:

import { CapacitorRealtimekit } from '@capgo/capacitor-realtimekit';

export class VideoConferenceService {
  private isInitialized = false;
  private currentMeetingUrl: string | null = null;

  async initialize(): Promise<boolean> {
    if (this.isInitialized) {
      return true;
    }

    try {
      await CapacitorRealtimekit.initialize();
      this.isInitialized = true;
      return true;
    } catch (error) {
      console.error('Failed to initialize RealtimeKit:', error);
      return false;
    }
  }

  async startMeeting(meetingUrl: string): Promise<void> {
    if (!this.isInitialized) {
      await this.initialize();
    }

    try {
      await CapacitorRealtimekit.startMeeting({
        url: meetingUrl
      });
      this.currentMeetingUrl = meetingUrl;
    } catch (error) {
      console.error('Failed to start meeting:', error);
      throw error;
    }
  }

  async joinMeeting(meetingUrl: string, displayName?: string): Promise<void> {
    await this.startMeeting(meetingUrl);
  }

  isInMeeting(): boolean {
    return this.currentMeetingUrl !== null;
  }
}

// Usage
const videoService = new VideoConferenceService();
await videoService.initialize();
await videoService.startMeeting('https://your-meeting-url.com/meeting/123');

Cloudflare Calls 설정

이 플러그인을 사용하려면 Cloudflare Calls를 설정해야 합니다:

1. Cloudflare 계정 생성

계정이 없다면 Cloudflare에서 가입하세요.

2. Calls API 활성화

1. Cloudflare 대시보드로 이동
2. Calls 섹션으로 이동
3. Calls API 활성화
4. API 자격 증명 받기

3. 미팅 URL 생성

미팅 URL을 생성하려면 백엔드 서비스가 필요합니다. Cloudflare Workers 사용 예제:

export default {
  async fetch(request: Request): Promise<Response> {
    const { pathname } = new URL(request.url);

    if (pathname === '/create-meeting') {
      const meetingId = generateMeetingId();
      const meetingUrl = `https://your-app.calls.cloudflare.com/${meetingId}`;

      return new Response(JSON.stringify({
        meetingId,
        meetingUrl
      }), {
        headers: { 'Content-Type': 'application/json' }
      });
    }

    return new Response('Not found', { status: 404 });
  }
};

모범 사례

1. 조기 초기화: 앱이 시작될 때 RealtimeKit 초기화
2. 오류 처리: 항상 try-catch 블록으로 호출 감싸기
3. 권한 요청: 시작하기 전에 카메라/마이크 권한 확보
4. 네트워크 테스트: 참여하기 전에 인터넷 연결 확인
5. 백그라운드 오디오: iOS용 백그라운드 모드 구성