腾讯云音视频通话SDKuni-app（客户端）_音视频解决方案_同尘科技

本文将介绍如何用最短的时间完成 TUICallKit 组件的接入，跟随本文档，您将在一个小时的时间内完成如下几个关键步骤，并最终得到一个包含完备 UI 界面的视频通话功能。

环境准备

建议使用最新的 HBuilderX 编辑器 。iOS 9.0 或以上版本且支持音视频的 iOS 设备，暂不支持模拟器。Android 版本不低于 4.1 且支持音视频的 Android 设备，暂不支持模拟器。如果为真机，请开启允许调试选项。最低兼容 Android 4.1（SDK API Level 16），建议使用 Android 5.0 （SDK API Level 21）及以上版本。iOS/Android 设备已经连接到 Internet。

步骤一：开通音视频通话服务

在使用 TUICallKit 发起通话前，您需要开通 TUICallKit 专属的音视频通话服务，详细步骤如下：1. 登录 腾讯云视立方控制台，单击 创建项目 按钮后，您可以根据自己的业务情况，选择合适的接入场景和集成方式，这里我们推荐“含 UI 快速集成”，即TUICallKit。2. 在选定接入场景和集成方式以后，您就需要开通一下 音视频通话 SDK 使用的两项 腾讯云基础的 PaaS 能力，即 即时通信 IM 和 实时音视频 TRTC，开通后，单击 创建项目并下一步 按钮。3. 在项目创建完成以后，您需要为该项目匹配一个 IM 应用，因为音视频通话 SDK 依赖了IM SDK 提供的基础能力，这里创建或者管理已有的 IM 应用均可，在关联成功后，就可以领取 7天的免费体验版，用于后续的开发调试工作，当然如果您之前已经体验过，也可以直接在该页面单击 购买正式版本。4. 单击 前往集成 按钮，选择 项目配置，查看详细的配置页面，找到 SDKAppID 和密钥并记录下来，它们会在后续的步骤四：登录 TUI 组件中被用到，至此音视频通话 SDK服务开通完成。

步骤二：导入插件

1. 购买 uni-app 原生插件n登录 uni 原生插件市场，并访问 TencentCloud-TUICallKit 插件，在插件详情页中购买（免费插件也可以在插件市场0元购）。购买后才能够云端打包使用插件。购买插件时请选择正确的 appid，以及绑定正确包名。n2. 使用自定义基座打包 uni 原生插件 （请使用真机运行自定义基座）n使用 uni 原生插件必须先提交云端打包才能生效，购买插件后在应用的 manifest.json 页面的 App原生插件配置 项下单击选择云端插件，选择腾讯云原生音视频插件。nn直接云端打包后无法打 log，无法排查问题，需要自定义基座调试原生插件。注意自定义基座不是正式版，真正发布时，需要再打正式包。使用自定义基座是无法正常升级替换 APK 的。请尽量不要使用本地插件，插件包超过自定义基座的限制，可能导致调试收费。

步骤三：在 vue 页面中引入原生插件

使用 uni.requireNativePlugin 的 API 在 vue 页面中引入原生插件，参数为插件的 ID。

const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit');

步骤四：登录 TUI 组件

在您的项目中添加如下代码，完成 TUICallKit 组件的登录。这个步骤异常关键，因为只有在登录成功后才能正常使用 TUICallKit 的各项功能，故请您耐心检查相关参数是否配置正确。

const options = {    SDKAppID: 1400000001,   // 请替换为步骤一取到的 SDKAppID    userID: 'denny',        // 请替换为您的 UserID    userSig: 'xxxxxxxxxxx', // 您可以在控制台中计算一个 UserSig 并填在这个位置};TUICallKit.login(options, (res) => {    if (res.code === 0) {        console.log('login success');    } else {        console.log(`login failed, error message = ${res.msg}`);    }});

参数说明n这里详细介绍一下 login 函数中所需要用到的几个关键参数：SDKAppID：在 步骤一 中的最后一步中您已经获取到，这里不再赘述。userID：当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。userSig：使用 步骤一 中获取的 SecretKey 对 SDKAppID、userID 等信息进行加密，就可以得到 userSig，它是一个鉴权用的票据，用于腾讯云识别当前用户是否能够使用 TRTC 的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的 userSig。更多信息请参见 如何计算及使用 userSig。注意这个步骤也是目前我们收到的开发者反馈最多的步骤，常见问题如下：SDKAppID 设置错误，国内站的 SDKAppID 一般是以140开头的10位整数。userSig 被错配成了加密密钥（Secretkey），userSig 是用 SecretKey 把 SDKAppID、userID 以及过期时间等信息加密得来的，而不是直接把 Secretkey 配置成 userSig。userID 被设置成“1”、“123”、“111”等简单字符串，由于 TRTC 不支持同一个 UserID 多端登录，所以在多人协作开发时，形如 “1”、“123”、“111” 这样的 userID 很容易被您的同事占用，导致登录失败，因此我们建议您在调试的时候设置一些辨识度高的 userID。userId 被设置成“1”、“123”、“111”等简单字符串，由于 TRTC 不支持同一个 UserID 多端登录，所以在多人协作开发时，形如 “1”、“123”、“111” 这样的 userId 很容易被您的同事占用，导致登录失败，因此我们建议您在调试的时候设置一些辨识度高的 userId。Github 中的示例代码使用了 genTestUserSig 函数在本地计算 userSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在 App 的代码当中，这并不利于您后续升级和保护您的 SecretKey，所以我们强烈建议您将 userSig 的计算逻辑放在服务端进行，并由 App 在每次使用 TUICallKit 组件时向您的服务器请求实时计算出的 userSig。

步骤五：拨打通话

1对1视频通话

通过调用 TUICallKit 的 call 函数并指定通话类型和被叫方的 userID，就可以发起语音或者视频通话。

const options = {    userID: 'mike',    callMediaType: 1, // 语音通话(callMediaType = 1)、视频通话(callMediaType = 2)};TUICallKit.call(options, (res) => {    if (res.code === 0) {        console.log('call success');    } else {        console.log(`call failed, error message = ${res.msg}`);    }});

群内视频通话

通过调用 TUICallKit 的 groupCall 函数并指定通话类型和被叫方的 userID，就可以发起群内的视频或语音通话。

const options = {    groupID: 'myGroup',    userIDList: ['mike', 'tom'],    callMediaType: 1, // 语音通话(callMediaType = 1)、视频通话(callMediaType = 2)};TUICallKit.groupCall(options, (res) => {    if (res.code === 0) {        console.log('groupCall success');    } else {        console.log(`groupCall failed, error message = ${res.msg}`);    }});

步骤六：接听通话

收到来电请求后，TUICallKit 组件会自动唤起来电提醒的接听界面。

步骤七：更多特性

一、设置昵称&头像

如果您需要自定义昵称或头像，可以使用如下接口进行更新。

const options = {    nickName: 'jack',    avatar: 'https:/****/user_avatar.png'}TUICallKit.setSelfInfo(options, (res) => {    if (res.code === 0) {        console.log('setSelfInfo success');    } else {        console.log(`setSelfInfo failed, error message = ${res.msg}`);    }});

注意因为用户隐私限制，非好友之间的通话，被叫的昵称和头像更新可能会有延迟，一次通话成功后就会顺利更新。

二、悬浮窗功能

如果您的业务需要开启悬浮窗功能，您可以在 TUICallKit 组件初始化时调用以下接口开启该功能。

TUICallKit.enableFloatWindow(true);

三、通话状态监听

如果您的业务需要 监听通话的状态，例如：异常、通话开始、结束等，可以监听以下事件：

const TUICallingEvent = uni.requireNativePlugin('globalEvent');TUICallingEvent.addEventListener('onError', (res) => {    console.log('onError', JSON.stringify(res));});TUICallingEvent.addEventListener('onCallReceived', (res) => {    console.log('onCallReceived', JSON.stringify(res));});TUICallingEvent.addEventListener('onCallCancelled', (res) => {    console.log('onCallCancelled', res);});TUICallingEvent.addEventListener('onCallBegin', (res) => {    console.log('onCallBegin', JSON.stringify(res));});TUICallingEvent.addEventListener('onCallEnd', (res) => {    console.log('onCallEnd', JSON.stringify(res));});

四、自定义铃音

如果您需要自定义来电铃音，可以通过如下接口进行设置。

const filePath = './customBell.mp4';TUICallKit.setCallingBell(filePath, (res) => {    if (res.code === 0) {        console.log('setCallingBell success');    } else {        console.log(`setCallingBell failed, error message = ${res.msg}`);    }});

实现案例

我们提供了在线客服场景的相关源码，建议您 下载 并集成体验。该场景提供了示例客服群 + 示例好友的基础模板，实现功能包括：支持发送文本消息、图片消息、语音消息、视频消息等常见消息。支持双人语音、视频通话功能支持创建群聊会话、群成员管理等。

交流与反馈

– 如果您在使用过程中，有什么建议或者意见，可以在这里反馈：TUICallKit 产品反馈问卷，感谢您的反馈。- 如果您是开发者，也欢迎您加入我们的 TUICallKit 技术交流 QQ 群：605115878，进行技术交流和产品沟通。

相关文档

快速入门（uni-app）一分钟跑通 Demo (uni-app)快速集成 uni-app TUIKitTencentCloud-TUICallKit 插件

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案