腾讯云实时音视频uni-app（客户端）_音视频解决方案_同尘科技

本文将介绍如何快速完成 TUICallKit 组件的接入，您将在10分钟内完成以下几个关键步骤，并最终得到一个包含完备 UI 界面的视频通话功能。

TUICallKit Demo 体验

TUICallKit 插件地址：TUICallKit 插件链接。如果您想要直接跑通一个新工程，请直接阅读 uni-app Demo 快速跑通。

开发环境要求

开发工具说明：建议使用最新的 HBuilderX 编辑器 。插件调试说明：原生插件暂不支持模拟器调试。iOS 设备要求：iOS 系统 ≥ 9.0 ，支持音视频通话的真机设备。Android 设备要求：Android 系统 ≥ 5.0（SDK API Level 21），支持音视频的真机设备，允许 USB 调试。

步骤一：开通 TRTC 服务

TUICallKit 是基于腾讯云 即时通信 IM 和 实时音视频 TRTC 两项付费 PaaS 服务构建出的音视频通信组件。您可以按照如下步骤开通相关的服务并体验 7 天的免费试用服务。1. 登录到 即时通信 IM 控制台，单击创建新应用，在弹出的对话框中输入您的应用名称，并单击确定。
2. 单击刚刚创建的应用，进入基本配置页面，并在页面的右下角找到含 UI 低代码场景方案标题，单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。
3. 在同一页面找到 SDKAppID 和密钥(SecretKey)并记录下来，会在登录 TUICallKit 组件 时用到。

步骤二：创建 uni-app 项目

打开 Hbuilderx 开发工具，点击新建 uni-app 项目：项目名称 (TUICallKit-Demo)。

步骤三：下载并导入 TUICallKit 插件

1. 访问 TencentCloud-TUICallKit 插件，在插件详情页中购买插件，购买插件时选择对应的 AppID，绑定正确的包名。
2. 在 TUICallKit-Demo 项目中导入插件。

步骤四：使用 TUICallKit 插件

1. 在 TUICallKit-Demo/pages/index/index.vue 中引入下面代码，该段代码功能：登录 TUICallKit 组件、拨打 1v1 视频通话。

					 您的 userID: {{ userID }} 		 登录 		 拨打通话 		const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit'); //【1】引入 TUICallKit 插件	uni.$TUICallKit = TUICallKit;	import { genTestUserSig } from '../../debug/GenerateTestUserSig.js'	export default {		data() {			return {				inputID: '',				isLogin: false,				userID: '',			}		},		methods: {			handleLogin() {				this.userID = this.inputID;				const { userSig, sdkAppID: SDKAppID } = genTestUserSig(this.userID); // 控制台生成 userSig				const loginParams = { SDKAppID, userID: this.userID, userSig };   // 使用 SDKAppID、userSig                //【2】登录 TUICallKit 组件				uni.$TUICallKit.login( loginParams, res => {						if (res.code === 0) {							this.isLogin = true;							this.inputID = '';							console.log('[TUICallKit] login success.');						} else {                             console.error('[TUICallKit] login failed, failed message = ', res.msg, params);						}					}				);				},			handleCall() {				try {					const callParams = {						userID: this.inputID,						callMediaType: 2,   // 1 -- 语音通话，2 -- 视频通话						callParams: { roomID: 234, strRoomID: '2323423', timeout:30 },					};                    //【3】拨打 1v1 视频通话通话					uni.$TUICallKit.call( callParams, res => {							console.log('[TUICallKit] call params: ', JSON.stringify(res));						}					);					this.inputID = '';				} catch (error) {					console.log('[TUICallKit] call error: ', error);				}			}		}	}.container {	margin: 30px;}.container input {	height: 50px;	border: 1px solid;}.container button {	margin-top: 30px;}

2. 填写 SDKAppID、SecretKey、userSig 参数。客户端生成 userSig控制台生成 userSig由于 UserSig 有时效性，如果您需要长期使用 TUICallKit，推荐您采用该方法。1. 单击下载 debug 文件夹，将 debug 目录复制到您的项目，如下图所示：
2. 填写 TUICallKit-Demo/debug/GenerateTestUserSig.js 文件的 SDKAppID 、 SecretKey （参考 步骤一：开通 TRTC 服务）
如果您想要快速体验 TUICallKit，您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。如果您采用的是控制台生成，那么需要在 TUICallKit-Demo/pages/index/index.vue文件中，赋值这里的 SDKAppID、userSig。

步骤五：拨打您的第一通电话

1. 制作自定义调试基座，请选择传统打包方式进行打包。
2. 自定义调试基座成功后，使用自定义基座运行项目。
3. 拨打 1v1 视频通话具体效果如图所示。

更多特性

1. 群组视频通话

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

const options = {    groupID: 'xxx',   // 建议在群组里发起群通话，此时 groupID 就是群组 ID    userIDList: ['mike', 'tom'],    callMediaType: 2, // 语音通话(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}`);    }});

2. 设置昵称&头像

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

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}`);    }});

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

3. 悬浮窗功能

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

TUICallKit.enableFloatWindow(true);

4. 通话状态监听

如果您的业务需要监听通话的状态，可以通过监听 globalEvent 的事件实现。

const TUICallKitEvent = uni.requireNativePlugin('globalEvent');
function handleError(res) {    console.log('onError', JSON.stringify(res);}TUICallKitEvent.addEventListener('onError', handleError);TUICallKitEvent.removeEventListener('onError', handleError);

5. 自定义铃音

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

const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit');
// 【1】通过 uni.saveFile 保存音频文件到本地，具体参考 saveFile 接口: https://zh.uniapp.dcloud.io/api/file/file.html#savefileconst tempFilePath = './static/rain.mp3'; // 本地存放的音频文件let musicFilePath = '';uni.saveFile({  tempFilePath: tempFilePath,  success: (res) => {    console.warn('保存文件成功 = ', JSON.stringify(res)); // 获取的是相对路径    musicFilePath =  res.savedFilePath;        // 【2】相对路径转绝对路径，否则访问不到    musicFilePath = plus.io.convertLocalFileSystemURL(musicFilePath); // 转绝对路径        // 【3】设置铃声    TUICallKit.setCallingBell(musicFilePath, (res) => {      if (res.code === 0) {        console.log('setCallingBell success');      } else {        console.log(`setCallingBell failed, error message = ${res.msg}`);      }    });  },  fail: (err) => {    console.error('保存文件失败');  },});

常见问题

提示“[-100013]:TRTC service is suspended…”

单击免费体验以后，部分之前使用过 实时音视频 TRTC 服务的用户会提示：

[-100013]:TRTC service is  suspended. Please check if the package balance is 0 or the Tencent Cloud accountis in arrears

因为新的 IM 音视频通话能力是整合了腾讯云实时音视频 TRTC 和 即时通信 IM 两个基础的 PaaS 服务，所以当 实时音视频 TRTC 的免费额度（10000分钟）已经过期或者耗尽，就会导致开通此项服务失败，这里您可以单击 TRTC 控制台，找到对应 SDKAppID 的应用管理页，示例如图，开通付费功能后，再次启用应用即可正常体验音视频通话能力。


SDKAppID、sercretKey 参数说明

SDKAppID：在 步骤一：开通 TRTC 服务 中的最后一步中您已经获取到，这里不再赘述。userID：当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。userSig：使用 步骤一：开通 TRTC 服务 中获取的 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。Github 中的示例代码使用了 genTestUserSig 函数在本地计算 userSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在 App 的代码当中，这并不利于您后续升级和保护您的 SecretKey，所以我们强烈建议您将 userSig 的计算逻辑放在服务端进行，并由 App 在每次使用 TUICallKit 组件时向您的服务器请求实时计算出的 userSig。

自定义调试基座注意事项

什么是自定义基座：参考 uni-app 官网自定义基座说明。自定义基座不是正式版，真正发布时，需要再打正式包。使用自定义基座是无法正常升级替换 APK 的。请尽量不要使用本地插件，插件包超过自定义基座的限制，可能导致调试收费。使用自定义基座打包 uni 原生插件 （请使用真机运行自定义基座）使用 uni 原生插件必须先提交云端打包才能生效，购买插件后在应用的 manifest.json 页面的 App原生插件配置 项下单击选择云端插件，选择腾讯云原生音视频插件。直接云端打包后无法打 log，无法排查问题，需要自定义基座调试原生插件。

如何创建群组通话的 groupID

群组的创建详见： IM 群组管理 ，或者您也可以直接使用 IM TUIKit，一站式集成聊天、通话等场景。

相关案例-在线客服场景

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

TUICallKit API 文档

快速跑通 Demo (uni-app)快速集成 TUIKit 到项目TUICallKit API 文档TUICallEngine API 文档

技术咨询

了解更多详情您可加入 腾讯云通信官方社群 进行咨询和反馈。

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

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

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

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