Panduan Memulai
Salin prompt setup yang berisi langkah install dan panduan markdown lengkap untuk plugin ini.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-incoming-call-kit`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/incoming-call-kit/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
Instalasi
Bagian berjudul “Instalasi”Anda bisa menggunakan AI-Assisted Setup kami untuk menginstal plugin ini. Tambahkan skill Capgo ke tool AI Anda dengan command berikut:
bunx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsLalu gunakan prompt berikut:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-incoming-call-kit` plugin in my project.Jika Anda lebih memilih Manual Setup, instal plugin dengan menjalankan perintah berikut dan ikuti petunjuk khusus platform di bawah ini:
-
Instal package
Jendela terminal bun add @capgo/capacitor-incoming-call-kit -
Sinkronkan proyek native
Jendela terminal bunx cap sync -
Pilih sumber ringtone Tentukan apakah event incoming-call berasal dari backend Anda, SDK seperti Twilio atau Stream, atau jalur native push seperti FCM atau PushKit.
Mulai cepat
Bagian berjudul “Mulai cepat”import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';
const result = await IncomingCallKit.showIncomingCall({ callId: 'call-id-123', callerName: 'caller',});console.log(result);Contoh: endCall
Bagian berjudul “Contoh: endCall”import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';
const result = await IncomingCallKit.endCall({ callId: 'call-id-123' });console.log(result);Contoh: endAllCalls
Bagian berjudul “Contoh: endAllCalls”import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';
const result = await IncomingCallKit.endAllCalls();console.log(result);Kesalahan umum
Bagian berjudul “Kesalahan umum”- Izin: panggil
checkPermissions()kemudianrequestPermissions()saat dibutuhkan. - Listeners: hapus handle saat screen unmount.
- Sumber kebenaran tunggal: percayai
src/definitions.tsdi repo GitHub.
Cara kerja integrasi ini
Bagian berjudul “Cara kerja integrasi”Plugin ini hanya menangani tampilan panggilan masuk secara native. Aplikasi Anda tetap mengelola transport, autentikasi, dan sesi media yang sebenarnya.
Pola produksi yang umum adalah:
- Backend atau SDK panggilan Anda memancarkan event ring.
- Aplikasi Anda memanggil
showIncomingCall(). - Plugin menampilkan UI incoming-call native.
callAcceptedmemberitahu aplikasi Anda untuk bergabung ke room atau sesi VoIP yang sebenarnya.callDeclined,callEnded, ataucallTimedOutmemberitahu aplikasi Anda untuk membersihkan remote state.
Integrasi minimal
Bagian berjudul “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
Bagian berjudul “Opsi penting”callId: identifier stabil yang digunakan kembali denganendCall()timeoutMs: timeout unanswered best-effortextra: JSON arbitrer yang dikembalikan di payload listenerandroid.channelIddanandroid.channelName: tuning channel notifikasi Androidandroid.showFullScreen: meminta activity incoming-call full-screen Androidios.handleType: pilihgeneric,phoneNumber, atauemailAddressuntuk CallKit
Mengelola panggilan aktif
Bagian berjudul “Mengelola panggilan aktif”const { calls } = await IncomingCallKit.getActiveCalls();
await IncomingCallKit.endCall({ callId: 'call-42', reason: 'remote-ended',});
await IncomingCallKit.endAllCalls({ reason: 'session-reset',});Model event
Bagian berjudul “Event model”incomingCallDisplayed: UI native berhasil ditampilkancallAccepted: user menerima dari UI nativecallDeclined: user menolak sebelum bergabungcallEnded: aplikasi atau platform mengakhiri panggilan yang dilacakcallTimedOut: panggilan tidak terjawab hinggatimeoutMs
Setiap event membawa data call payload yang dinormalisasi dan extra object.
Catatan platform
Bagian berjudul “Catatan platform”- Baca Panduan iOS sebelum menghubungkan CallKit ke alur PushKit atau APNs.
- Baca Panduan Android sebelum mengandalkan full-screen intents di Android 14 ke atas.
- Web tidak didukung.
Lanjutkan dari Getting Started
Bagian berjudul “Lanjutkan dari Getting Started”Jika Anda menggunakan Panduan Memulai untuk merencanakan operasi dashboard dan API, hubungkan dengan Menggunakan @capgo/capacitor-incoming-call-kit untuk kapabilitas native saat menggunakan @capgo/capacitor-incoming-call-kit, Ringkasan API untuk detail implementasi di API Overview, Pendahuluan untuk detail implementasi di Introduction, Kunci API untuk detail implementasi di API Keys, dan Perangkat untuk detail implementasi di Devices.