Lompat ke konten
Capgo - Pembaruan Langsung untuk Aplikasi Capacitor Capgo

Mulai Berlatih

  1. Pasang paket

    Jendela terminal
    bun add @capgo/capacitor-incoming-call-kit

  2. Sinkronkan proyek native

    Jendela terminal
    bunx cap sync

  3. Pilih sumber ringan Anda Putuskan apakah event panggilan masuk berasal dari backend Anda, sebuah SDK seperti Twilio atau Stream, atau jalur push native seperti FCM atau PushKit.

Bagaimana integrasi ini berfungsi bersama

Bagian berjudul “Bagaimana integrasi ini berfungsi bersama”

Plugin ini hanya memiliki presentasi panggilan masuk native. Aplikasi Anda masih memiliki transportasi, autentikasi, dan sesi media yang sebenarnya.

Polanya produksi yang umum adalah:

  1. Backend Anda atau panggilan SDK mengeluarkan event ring.
  2. Aplikasi Anda memanggil showIncomingCall().
  3. Plugin menampilkan UI panggilan masuk native.
  4. callAccepted menginformasikan aplikasi Anda untuk bergabung dengan ruang nyata atau sesi VoIP.
  5. callDeclined, callEndedatau callTimedOut menginformasikan aplikasi Anda untuk membersihkan status remote.

Integrasi minimal

Judul bagian “Integrasi minimal”
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',
  },
});

Opsi penting

Judul bagian “Opsi penting”
  • callId: identifikasi stabil yang digunakan kembali nanti endCall()
  • timeoutMstimeout maksimal
  • extraJSON acak yang dikembalikan dalam pesan pembaca
  • android.channelId dan android.channelNamepengaturan saluran notifikasi Android
  • android.showFullScreenminta aktivitas panggilan masuk penuh layar Android
  • ios.handleTypepilih generic, phoneNumber, atau emailAddress untuk CallKit

Pengelolaan panggilan aktif

Bab berjudul “Pengelolaan panggilan aktif”
const { calls } = await IncomingCallKit.getActiveCalls();


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


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

Model peristiwa

Model Acara
  • incomingCallDisplayed: UI asli ditampilkan dengan sukses
  • callAccepted: pengguna menerima dari UI asli
  • callDeclined: pengguna menolak sebelum bergabung
  • callEnded: aplikasi Anda atau platform mengakhiri panggilan yang sedang diikuti
  • callTimedOut: panggilan tetap tidak dijawab hingga timeoutMs

Setiap acara membawa payload yang telah dinormalisasi dan objek asli Anda. call Catatan Platform extra Baca Catatan Platform

Model Acara

: UI asli ditampilkan dengan sukses