跳转至正文

Twilio Video Capacitor 插件

从 Capacitor 加入 Twilio Video 房间,支持原生音频、摄像头和房间生命周期事件

安装

bun add @capgo/capacitor-twilio-video bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-twilio-video
  • pnpm add @capgo/capacitor-twilio-video
  • yarn add @capgo/capacitor-twilio-video

指南

如何在 Capacitor 中使用 Twilio Video

使用 @capgo/capacitor-twilio-video

Capacitor API,通过原生应用内通话界面加入 Twilio Video 会议。

安装

bun add @capgo/capacitor-twilio-video
bunx cap sync

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

导入

import { CapacitorTwilioVideo } from '@capgo/capacitor-twilio-video';

API 概览

方法 描述
login 存储并验证由后端签发的 Twilio Video 访问令牌。
logout 清除缓存的访问令牌并退出当前房间。
isLoggedIn 检查设备当前是否缓存了有效的 Twilio 令牌。
joinRoom 加入 Twilio 房间并显示插件的原生应用内通话浮层。
leaveRoom 如果已连接,则退出当前房间。
setMicrophoneEnabled 启用/禁用本地麦克风发布。
setCameraEnabled 启用/禁用本地摄像头发布。
getCallStatus 返回当前房间名称、媒体状态和参与者人数。
checkMicrophonePermission 检查麦克风权限状态。
requestMicrophonePermission 请求麦克风权限。
checkCameraPermission 检查摄像头权限状态。
requestCameraPermission 请求摄像头权限。

示例

login()

存储并验证由后端签发的 Twilio Video 访问令牌。

import { CapacitorTwilioVideo } from '@capgo/capacitor-twilio-video';

const result = await CapacitorTwilioVideo.login({ accessToken: 'access-token-123' });
console.log(result);

logout()

清除缓存的访问令牌并退出当前房间。

import { CapacitorTwilioVideo } from '@capgo/capacitor-twilio-video';

const result = await CapacitorTwilioVideo.logout();
console.log(result);

isLoggedIn()

检查设备当前是否缓存了有效的 Twilio 令牌。

import { CapacitorTwilioVideo } from '@capgo/capacitor-twilio-video';

const result = await CapacitorTwilioVideo.isLoggedIn();
// The result holds sensitive values: use it without logging it.

joinRoom()

加入 Twilio 房间并显示插件的原生应用内通话浮层。

import { CapacitorTwilioVideo } from '@capgo/capacitor-twilio-video';

const result = await CapacitorTwilioVideo.joinRoom({ roomName: 'room' });
console.log(result);

leaveRoom()

如果已连接,则退出当前房间。

import { CapacitorTwilioVideo } from '@capgo/capacitor-twilio-video';

const result = await CapacitorTwilioVideo.leaveRoom();
console.log(result);

setMicrophoneEnabled()

启用/禁用本地麦克风发布。

import { CapacitorTwilioVideo } from '@capgo/capacitor-twilio-video';

const result = await CapacitorTwilioVideo.setMicrophoneEnabled({ enabled: true });
console.log(result);

上表列出了 12 个核心方法。监听器、版本辅助方法以及每个方法的完整接口约定,详见 GitHub 仓库.

监听事件

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

完整参考文档

继续阅读:使用 @capgo/capacitor-twilio-video

如果你正在使用 使用 @capgo/capacitor-twilio-video 来规划原生媒体和界面行为,并将其与 @capgo/capacitor-twilio-video 有关 @capgo/capacitor-twilio-video 的实现细节, 快速入门 有关“入门指南”中的实现细节, 使用 @capgo/capacitor-live-activities 用于使用 @capgo/capacitor-live-activities 时的原生能力, @capgo/capacitor-live-activities 关于 @capgo/capacitor-live-activities 中的实现细节,以及 使用 @capgo/capacitor-video-player 有关“使用 @capgo/capacitor-video-player.”中的原生能力

常见问题

Twilio Video 插件常见问题

如何在 Capacitor 应用中安装 Twilio Video 插件?

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

@capgo/capacitor-twilio-video 是否支持 React、Vue 和 Angular?

支持。Twilio Video 是一个 Capacitor package,因此它支持任何在 Capacitor 中运行的 Web framework,包括 Ionic、React、Vue、Angular、Svelte 以及原生 JavaScript。

@capgo/capacitor-twilio-video 支持哪个版本的 Capacitor?

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

@capgo/capacitor-twilio-video 是免费开源的吗?

是的。code 的源码已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-twilio-video/,并且你可以直接从 npm 免费安装。欢迎提交 Bug report 和 pull request。

我能否在无需经过 App Store 审核的情况下,更新使用 Twilio Video 的 code?

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

无需等待应用审核即可推送 Twilio Video 更新

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

开始使用 Capgo