跳转至正文

来电界面 (Incoming Call Kit) Capacitor 插件

通过 iOS CallKit 和 Android 全屏通知展示原生来电 UI

安装

bun add @capgo/capacitor-incoming-call-kit bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-incoming-call-kit
  • pnpm add @capgo/capacitor-incoming-call-kit
  • yarn add @capgo/capacitor-incoming-call-kit

指南

如何在 Capacitor 中使用 Incoming Call Kit

使用 @capgo/capacitor-incoming-call-kit

Capacitor API,用于展示原生来电界面。

安装

bun add @capgo/capacitor-incoming-call-kit
bunx cap sync

bunx cap sync 将插件的原生 code 复制到你的原生项目中。每次升级插件后都要重新运行。

导入

import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';

API 概览

方法 描述
showIncomingCall 显示原生来电 UI。
endCall 结束特定的追踪通话。
endAllCalls 结束所有追踪通话。
getActiveCalls 返回当前正在追踪的通话。
checkPermissions 返回通知和全屏意图 (full-screen intents) 的当前权限状态。
requestPermissions 在平台支持时请求通知权限。
requestFullScreenIntentPermission 在可用时打开 Android 14+ 的全屏意图设置页面。

示例

showIncomingCall()

显示原生来电 UI。

import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';

const result = await IncomingCallKit.showIncomingCall({
  callId: 'call-id-123',
  callerName: 'caller',
});
console.log(result);

endCall()

结束特定的追踪通话。

import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';

const result = await IncomingCallKit.endCall({ callId: 'call-id-123' });
console.log(result);

endAllCalls()

结束所有追踪通话。

import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';

const result = await IncomingCallKit.endAllCalls();
console.log(result);

getActiveCalls()

返回当前正在追踪的通话。

import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';

const result = await IncomingCallKit.getActiveCalls();
console.log(result);

checkPermissions()

返回通知和全屏意图(full-screen intents)的当前权限状态。

import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';

const result = await IncomingCallKit.checkPermissions();
console.log(result);

requestPermissions()

在平台支持时请求通知权限。

import { IncomingCallKit } from '@capgo/capacitor-incoming-call-kit';

const result = await IncomingCallKit.requestPermissions();
console.log(result);

上表列出了 7 个核心方法。监听器、版本辅助函数以及每个方法的完整契约,请参阅 GitHub 仓库.

监听事件

addListener 会返回一个句柄。调用 handle.remove() 在屏幕卸载时,或者调用 IncomingCallKit.removeAllListeners() 以清除所有监听器。

完整参考文档

继续阅读:使用 @capgo/capacitor-incoming-call-kit

如果你正在使用 使用 @capgo/capacitor-incoming-call-kit 要规划 dashboard 和 API 操作,请将其连接到 @capgo/capacitor-incoming-call-kit 有关 @capgo/capacitor-incoming-call-kit 的实现细节, 快速入门 有关“入门指南”中的实现细节, API 概览 关于 API Overview 中的实现细节, 简介 关于简介中的实现细节,以及 API 密钥 关于 API Keys 中的实现细节。

常见问题

Incoming Call Kit 插件常见问题

如何在 Capacitor 应用中安装 Incoming Call Kit 插件?

运行 "bun add @capgo/capacitor-incoming-call-kit"(或 "npm install @capgo/capacitor-incoming-call-kit"),然后运行 "bunx cap sync",使 iOS 和 Android 项目同步 native code。最后在你的应用 code 中从 "@capgo/capacitor-incoming-call-kit" 导入即可。

@capgo/capacitor-incoming-call-kit 是否支持 React、Vue 和 Angular?

支持。Incoming Call Kit 是一个 Capacitor 包,因此它支持任何在 Capacitor 中运行的 Web 框架,包括 Ionic、React、Vue、Angular、Svelte 以及原生 JavaScript。

@capgo/capacitor-incoming-call-kit 支持哪个版本的 Capacitor?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-incoming-call-kit 是免费开源的吗?

是的。code 的源码已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-incoming-call-kit/,安装包可从 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

我可以在不经过 App Store 审核的情况下,更新使用 Incoming Call Kit 的 code 吗?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待应用审核,即可上线 Incoming Call Kit 的变更

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo