메뉴로 바로가기
Capgo - Capacitor 앱의 실시간 업데이트 Capgo

시작하기

  1. 패키지를 설치하세요

    터미널 창
    bun add @capgo/capacitor-incoming-call-kit

  2. 자연어 프로젝트 동기화

    터미널 창
    bunx cap sync

  3. 링 소스를 선택하세요 incoming-call 이벤트가 백엔드, SDK (예: Twilio 또는 Stream) 또는 네이티브 푸시 경로 (예: FCM 또는 PushKit)에서 오는지 결정하세요.

통합이 어떻게 맞물리는지

통합이 어떻게 맞물리는지

이 플러그인은 네이티브 incoming-call 표시만 관리합니다. 앱은 여전히 전송, 인증, 실제 미디어 세션을 관리합니다.

일반적인 프로덕션 패턴은:

  1. 백엔드 또는 호출 SDK가 링 이벤트를 전송합니다.
  2. 앱이 showIncomingCall().
  3. 플러그인이 네이티브 incoming-call UI를 표시합니다.
  4. callAccepted 실제 회의나 VoIP 세션에 앱을 참여시킵니다.
  5. callDeclined, callEnded또는 callTimedOut 원격 상태를 정리합니다.

최소한의 통합

최소한의 통합
import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';


await IncomingCallKit.requestPermissions();
await IncomingCallKit.requestFullScreenIntentPermission();


await IncomingCallKit.addListener('callAccepted', async ({ call }) => {
  console.log('Accepted', call.callId, call.extra);
  // Start or join your real call session here.
});


await IncomingCallKit.addListener('callDeclined', ({ call }) => {
  console.log('Declined', call.callId);
  // Tell your backend or SDK that the user declined.
});


await IncomingCallKit.addListener('callTimedOut', ({ call }) => {
  console.log('Timed out', call.callId);
  // Clear ringing state in your backend or SDK.
});


await IncomingCallKit.showIncomingCall({
  callId: 'call-42',
  callerName: 'Ada Lovelace',
  handle: '+39 555 010 020',
  appName: 'Capgo Phone',
  hasVideo: true,
  timeoutMs: 45_000,
  extra: {
    roomId: 'room-42',
    callerUserId: 'user_ada',
  },
  android: {
    channelId: 'calls',
    channelName: 'Incoming Calls',
    showFullScreen: true,
  },
  ios: {
    handleType: 'phoneNumber',
  },
});

중요한 옵션

중요한 옵션
  • callId: 이후에 재사용되는 안정된 식별자 endCall()
  • timeoutMs: 최선을 다하는 unanswered timeout
  • extra: 리스너 패킷에 반영된 임의의 JSON
  • android.channelId 그리고 android.channelName: 안드로이드 알림 채널 조정
  • android.showFullScreen: 안드로이드 전면 incoming-call 활동을 요청
  • ios.handleType: 선택 generic, phoneNumber, or emailAddress CallKit을 위한

활성화된 통화를 관리

활성화된 통화 관리
const { calls } = await IncomingCallKit.getActiveCalls();


await IncomingCallKit.endCall({
  callId: 'call-42',
  reason: 'remote-ended',
});


await IncomingCallKit.endAllCalls({
  reason: 'session-reset',
});

이벤트 모델

이벤트 모델
  • incomingCallDisplayed: 네이티브 UI가 성공적으로 표시되었습니다.
  • callAccepted: 사용자가 네이티브 UI에서 수락했습니다.
  • callDeclined: 사용자가 참여하기 전에 거절했습니다.
  • callEnded: 앱 또는 플랫폼이 추적된 통화를 종료했습니다.
  • callTimedOut: 통화는 답변되지 않았습니다. timeoutMs

각 이벤트는 정규화된 call payload와 원본 extra 객체를 포함합니다.

플랫폼 참고 사항

‘플랫폼 참고 사항’ 제목