uni-app (uts 插件)

最近更新时间:2025-07-14 19:43:42

我的收藏
本文将介绍如何快速完成 TUICallKit 组件的接入,您将在 10 分钟内完成以下几个关键步骤,并最终得到一个包含完备 UI 界面的视频通话功能。
CallKit 原生插件服务终止及迁移指引​​:
自​​ 2025 年 5 月 1 日起​​,CallKit 原生插件已经终止迭代。为保障业务持续稳定运行并提升功能体验,现针对不同用户群体提供以下方案:
新用户接入: 推荐直接集成 CallKit UTS 插件,享受跨平台兼容、开发效率提升等进阶功能。
存量用户使用:不影响已接入客户使用,后续新特性使用建议使用 UTS 插件。
​​CallKit UTS 插件核心优势:​​
支持自定义 UI、深度界面定制。
支持 uni-app 及 uni-app x 项目。
提供插件版本锁定功能,避免因更新导致兼容性问题。


开发环境要求

说明:
HBuilderX 4.64 和 4.65 版本对 uts 插件打包存在兼容性问题,建议使用最新版本。
HBuilderX 4.45+。
iOS 设备要求:iOS 系统 ≥ 13.0 ,支持音视频通话的真机设备。
Android 设备要求:Android 系统 ≥ 5.0(SDK API Level 21 +),支持音视频的真机设备,允许 USB 调试

步骤1:开通服务

请参见 开通服务,获取 SDKAppID、SecretKey,它们将在 TUICallKit.login 时作为必填参数使用。

步骤2:下载并导入 TencentCloud-Call 插件

1. 打开 【官方】腾讯云音视频通话插件 TencentCloud-Call ,单击下载插件并导入HBuilderX,将插件导入 HBuilderX 工程中。

2. 选择需要集成的工程并单击确定




步骤3:注册 TUICallKit

1. 将下面的代码引入到 main.js 文件,目的是为了将 TUICallKit、TUIStore 注册到全局,保证 App 共用一份实例。
import { TUICallKit } from '@/uni_modules/TencentCloud-Call/callkit/callServices/services/index';
import { TUIStore } from '@/uni_modules/TencentCloud-Call/callkit/callServices/TUIStore/index';

uni.$TUICallKit = TUICallKit;
uni.$TUIStore = TUIStore; // callkit 内部状态管理
2. 在 pages.json 中注册通话页面。
{
"path": "uni_modules/TencentCloud-Call/callkit/callPage",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
}
}
3. 拷贝 debug 目录,本地生成 userSig 时使用。
MacOS
Windows
cp -r uni_modules/TencentCloud-Call/debug ./
xcopy uni_modules/TencentCloud-Call/debug .\\debug /i /e
4. 效果如下所示。


步骤4:登录 TUICallKit

调用 uni.$TUICallKit.login 进行登录。
import { genTestUserSig } from '../../debug/GenerateTestUserSig.js';
const { userSig, SDKAppID } = genTestUserSig('denny');

uni.$TUICallKit.login({
SDKAppID: 123456,
userID: 'denny',
userSig: 'xxx',
success: () => {
console.log(demo login success, data);
},
fail: (errCode, errMsg) => {
console.log(demo login fail,errCode: ${errCode}, errMsg: ${errMsg});
},
})
参数
类型
说明
userID
String
用户的唯一标识符,由您定义,只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。
SDKAppID
Number
Tencent RTC 控制台 创建的音视频应用的唯一标识。
SDKSecretKey
String
Tencent RTC 控制台 创建的音视频应用的 SecretKey。
userSig
String
一种安全保护签名,用于对用户进行登录鉴权认证,确认用户是否真实,阻止恶意攻击者盗用您的云服务使用权。
userSig 说明:
开发环境:如果您正在本地跑通 Demo、开发调试,可以采用 debug 文件中的 genTestUserSig(参考步骤3.2)函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量。
生产环境:如果您的项目要发布上线,请采用 服务端生成 UserSig 的方式。

步骤5:拨打通话

调用 uni.$TUICallKit.calls 拨打通话。
uni.$TUICallKit.calls({
userIDList: ['jenny', 'kris'],
mediaType: 1,
})

步骤6:制作自定义基座

制作自定义调试基座,请选择传统打包方式进行打包。





步骤7:拨打您的第一通电话

1. 自定义调试基座成功后,使用自定义基座运行项目。

2. 拨打 1v1 视频通话具体效果如图所示。
主叫方发起音频通话
被叫方收到音频通话请求







更多特性

悬浮窗