含 UI 集成方案

有奖征文|投稿上云技术实践,赢取价值5000元大奖> HOT
本文将介绍如何用最短的时间完成 TUICallKit 组件的接入,跟随本文档,您将在一个小时的时间内完成如下几个关键步骤,并最终得到一个包含完备 UI 界面的视频通话功能。

环境准备

微信 App iOS 最低版本要求:7.0.9
微信 App Android 最低版本要求:7.0.8
小程序基础库最低版本要求:2.10.0
由于小程序测试号不具备 <live-pusher> 和 <live-player> 的使用权限,请使用企业小程序账号申请相关权限进行开发
由于微信开发者工具不支持原生组件(即 <live-pusher> 和 <live-player> 标签),需要在真机上进行运行体验
不支持 uniapp 等开发框架,请使用原生小程序开发环境

步骤一:开通小程序权限

由于 TUICallKit 所使用的小程序标签有更苛刻的权限要求,因此集成 TUICallKit 的第一步就是要开通小程序的类目和标签使用权限,否则无法使用,这包括如下步骤:
小程序推拉流标签不支持个人小程序,只支持企业类小程序。需要在 注册 时填写主体类型为企业,如下图所示:
img


小程序推拉流标签使用权限暂时只开放给有限 类目
符合类目要求的小程序,需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限,如下图所示:
img



步骤二:在小程序控制台配置域名

微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中设置 request 合法域名socket 合法域名,如下图所示:
request 合法域名
https://official.opensso.tencent-cloud.com
https://yun.tim.qq.com
https://cloud.tencent.com
https://webim.tim.qq.com
https://query.tencent-cloud.com
https://web.sdk.qcloud.com
socket 合法域名
wss://wss.im.qcloud.com
wss://wss.tim.qq.com




步骤三:开通服务

TUICallKit 是基于腾讯云 即时通信 IM实时音视频 TRTC 两项付费 PaaS 服务构建出的音视频通信组件。您可以按照如下步骤开通相关的服务并体验 7 天的免费试用服务:
1. 登录到 即时通信 IM 控制台,单击创建新应用,在弹出的对话框中输入您的应用名称,并单击确定



2. 单击刚刚创建出的应用,进入基本配置页面,并在页面的右下角找到开通腾讯实时音视频服务功能区,单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。如果需要正式应用上线,可以单击 前往加购 即可进入购买页面。


注意
IM 音视频通话能力针对不同的业务需求提供了差异化的付费版本供您选择,您可以在 IM 购买页 了解包含功能并选购您适合的版本。
3. 在同一页面找到 SDKAppID密钥并记录下来。
SDKAppID:IM 的应用 ID,用于业务隔离,即不同的 SDKAppID 的通话彼此不能互通。
Secretkey:IM 的应用密钥,需要和 SDKAppID 配对使用,用于签出合法使用 IM 服务的鉴权用票据 UserSig。



音视频通话能力活动特惠:
即日起至2022年10月01日0点前,购买音视频通话能力包基础版可获赠解锁相同有效期的小程序端通话功能授权。在活动结束前购买的音视频通话能力包在有效期内不受活动结束影响仍可使用小程序通话功能,活动结束后的新购或续期需选择体验版、进阶版、尊享版来获取小程序通话功能授权,基础版亦可单独加购小程序功能授权进行解锁。
友情提示: 单击免费体验以后,部分之前使用过 实时音视频 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 的应用管理页,示例如图,开通后付费功能后,再次启用应用即可正常体验音视频通话能力。



步骤四:下载并导入 TUICallKit 组件

单击进入 Github,选择克隆/下载代码,然后拷贝 MiniProgram 下的 lib 目录,lib 目录以及 TUICallKit 和 TUICallEngine 目录到您的工程中。



步骤五:创建并初始化 TUI 组件库

1. 添加组件到需要使用 TUICallKit 的页面,例如示例代码中的 MiniProgram/pages/videoCall/videoCall.json
// 可参考 MiniProgram/pages/videoCall/videoCall.json 或 MiniProgram/pages/audioCall/audioCall.json
{
"usingComponents": {
"TUICallKit": "/TUICallKit/TUICallKit"
}
}
2. 在 WXML 模板 中添加一个 TUICallKit 组件,例如示例代码中的 MiniProgram/pages/videoCall/videoCall.wxml
// 可参考 MiniProgram/pages/videoCall/videoCall.wxml 或 MiniProgram/pages/audioCall/audioCall.wxml
<TUICallKit
id="TUICallKit-component"
config="{{config}}"
></TUICallKit>
3. 用 JS 代码动态设置 config 参数 在 JS 逻辑交互例如 pages/index/index.js 中填写如下代码,用于设置 wxml 文件中的 {{config}} 变量。这部分工作可参考 MiniProgram/pages/videoCall/videoCall.jsMiniProgram/pages/audioCall/audioCall.js 中的示例代码,如下所示:
Page({
/**
* 页面的初始数据
*/
data: {
config: {
sdkAppID: 123, // 替换为您自己账号下的 SDKAppId
userID: 'jane', // 填写当前用的 userID
userSig: 'xxxxxxxxxxxx', // 通过 genTestUserSig(userID) 生成
tim: null, // tim 参数适用于业务中已存在 TIM 实例,为保证 TIM 实例唯一性
}
}
})
这里详细介绍一下 config 中的几个参数:
sdkAppID:在步骤三中您已经获取到,这里不再赘述。
userId:当前用户的 ID,字符串类型,只允许包含英文字母(a-z 和 A-Z)、数字(0-9)、连词符(-)和下划线(_)。
userSig:使用步骤三中获取的 SecretKey 对 sdkAppID、userId 等信息进行加密,就可以得到 UserSig,它是一个鉴权用的票据,用于腾讯云识别当前用户是否能够使用 TRTC 的服务,更多信息请参见 如何计算及使用 UserSig
4. 在生命周期函数中初始化 TUICallKit
onLoad() {
this.setData(
{
config: { ...this.data.config, ...config },
},
() => {
this.TUICallKit = this.selectComponent('#TUICallKit-component');
this.TUICallKit.init();
},
);
},
5. 生命周期函数中监听页面卸载
onUnload() {
this.TUICallKit.destroyed();
},

步骤六:发起视频通话请求

1对1视频通话

在 JS 逻辑交互例如 pages/index/index.js 中填写如下代码,就可以实现一对一视频通话。
import { MEDIA_TYPE } from '../../TUICallEngine/TUICallEngine';
this.TUICallKit.call({ userID: 'jane', type: MEDIA_TYPE.VIDEO });
参数
类型
含义
userId
String
目标用户的 UserID:"jane"
type
通话的媒体类型,AUDIO:语音通话,VIDEO:视频通话

群内视频通话

通过调用 TUICallKit 的 groupCall 函数并指定通话类型和被叫方的 UserID 列表,就可以发起群内的语音或者视频通话。
import { MEDIA_TYPE } from '../../TUICallEngine/TUICallEngine';
this.TUICallKit.groupCall({userIDList:["jane", "mike", "tommy"], type: MEDIA_TYPE.VIDEO, groupID: "12345678"});
参数如下表所示:
参数
类型
含义
userIDList
Array
目标用户的 userId 列表,示例:["jane", "mike", "tommy"]
type
通话的媒体类型,AUDIO:语音通话,VIDEO:视频通话
groupID
String
此次群组通话的群 ID,示例:"12345678"

步骤七:更多特性

设置昵称&头像

如果您需要自定义昵称或头像,可以使用如下接口进行更新:
this.TUICallKit.setSelfInfo("昵称", "头像 URL");

常见问题

错误提示“The package you purchased does not support this ability”?

如遇以上错误提示,是由于您当前应用的音视频通话能力包过期或未开通,请参见 步骤三:开通服务,领取或者开通音视频通话能力,进而继续使用 TUICallKit 组件。
说明:
更多帮助信息,详情请参见 TUI 场景化解决方案常见问题。欢迎加入 QQ 群:592465424,进行技术交流和反馈。

目录