有奖征文:轻量对象存储LighthouseCOS用户实践> HOT
本文将介绍如何快速完成 TUICallKit 组件的接入,跟随本文档,您将在半小时内得到一个包含完备 UI 界面的视频通话小程序。基本功能如下图所示:




小程序 Demo 体验

如果您想要直接体验音视频通话小程序,单击 Demo 体验,扫描小程序二维码。
如果您想要直接跑通一个新工程,请直接阅读 微信小程序 Demo 快速跑通

开发环境要求

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

小程序开发准备

步骤一:开通企业类小程序

小程序推拉流标签不支持个人小程序,只支持企业类小程序。需要在 注册 时填写主体类型为企业,如下图所示:




步骤二:在小程序控制台开启实时音视频接口

小程序推拉流标签使用权限暂时只开放给有限类目,具体支持类目参考该地址
符合类目要求的小程序,需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限。




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

微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中设置 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
https://ap-nanjing.cls.tencentcs.com
socket 合法域名
wss://wss.im.qcloud.com
wss://wss.tim.qq.com
如下图所示,服务器域名配置:


TUICallKit 源码集成

步骤一:开通 TRTC 服务

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



2. 单击刚刚创建的应用,进入基本配置页面,并在页面的右下角找到含 UI 低代码场景方案标题,单击免费体验即可开通 TUICallKit 的 7 天免费试用服务



注意:
如果需要正式应用上线,可以单击 购买正式版 即可进入购买页面。
IM 音视频通话能力针对不同的业务需求提供了差异化的付费版本供您选择,您可以在 IM 购买页 了解包含功能并选购您适合的版本。
3. 在同一页面找到 SDKAppID密钥(SecretKey)并记录下来,它们会在后续的步骤中被用到。




步骤二:创建小程序项目

1. 在微信开发者工具上创建一个小程序项目,选择不使用模板


2. 新建终端。


3. 执行npm init -y命令生成package.json文件。
npm init -y



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

1. 下载 TUICallKit 组件。
npm i @tencentcloud/call-uikit-wechat@2.x
MacOS 端
Windows 端
mkdir -p ./TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./TUICallKit
xcopy node_modules\\@tencentcloud\\call-uikit-wechat .\\TUICallKit /i /e
2. 执行完以上命令后,您的目录下生成 TUICallKit 文件夹,其中包含有 TUICallKit 组件。目录如下:

3. 构建 npm,打开微信开发者工具单击工具 > 构建 npm,新增 miniprogram_npm 目录。目录如下:



步骤四:填写 SDKAPPID 以及 SECRETKEY

修改 TUICallKit/debug/GenerateTestUserSig-es.js文件 的 SDKAPPID 以及 SECRETKEY。



步骤五:调用 TUICallKit 组件

1. 修改app.json文件,添加如下代码,新增全局监听页面。
{
"pages": [
"pages/index/index",
"TUICallKit/pages/globalCall/globalCall"
],
"window": {
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
},
"style": "v2"
}
2. 修改index文件夹下的文件。
index.wxml
index.js
index.wxss
<view class="container">
<view class="box">
<view class="input-box">
<input type="text" maxlength="20" placeholder="{{isLogin?'请输入呼叫者userID':'请输入登录者userID' }}" value="{{userID}}" bindinput='bindInputUserID' placeholder-style="color:#BBBBBB;" />
</view>
<view class='login'>
<button class='loginBtn' bindtap="{{isLogin?'call':'login'}}">{{isLogin?'呼叫':'登录'}}</button>
</view>
</view>
</view>
// 导入 TUICallKitServer 模块,使您的应用具有全局呼叫的能力
import { TUICallKitServer } from "../../TUICallKit/TUICallService/index";
// 导入 CallManager 模块,使您的应用具有全局监听来电的能力
import { CallManager } from "../../TUICallKit/TUICallService/serve/callManager";
import * as GenerateTestUserSig from "../../TUICallKit/debug/GenerateTestUserSig-es.js";
wx.CallManager = new CallManager();
Page({
data: {
userID: "",
isLogin: false,
},

bindInputUserID(e) {
this.setData({
userID: e.detail.value,
});
},
async login() {
const userID = this.data.userID;
if (!userID) return;
const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({
userID: userID,
});
await wx.CallManager.init({
sdkAppID: SDKAppID,
userID: userID,
userSig: userSig,
globalCallPagePath: "TUICallKit/pages/globalCall/globalCall",
});
wx.showToast({
title: "登录成功",
icon: "error",
});
this.setData({
isLogin: true,
userID: "",
});
},
async call() {
await TUICallKitServer.call({
userID: this.data.userID,
type: 2,
});
},
});
.container {
width: 100vw;
height: 100vh;
}

.box{
flex: 1;
width: 100vw;
margin-top: -40px;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

input{
display: flex;
font-size: 20px;
width: 60vw;
}

.login {
display: flex;
width: 100vw;
text-align: center;
bottom: 5vh;
margin: 70rpx;
}
.login button{
width: 80%;
background-color: #006eff;
border-radius: 50px;
color: white;
}

步骤六:编译运行

1. 请在本地设置里面勾选上“不校验合法域名、web-view (业务域名)、 TLS 版本以及 HTTPS 证书”。


警告:
如果不勾选该条目,则会在控制台出现如下错误。



2. 单击清缓存 > 全部清除,避免开发者工具的缓存造成渲染异常。


3. 编译小程序。


4. 该项目快速集成后的预期效果图。



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

请单击预览,扫描二维码,在真机环境使用小程序。


登录后,请输入呼叫用户 ID,拨打您的第一通电话。具体效果如下图所示:



注意:
第一次使用小程序通话,需要获取摄像头和麦克风权限。

TUICallKit 更多特性

1. 设置昵称、头像

如果您需要自定义昵称或头像,可以使用如下接口进行更新:
try {
await TUICallKitServer.setSelfInfo({ nickName: "jack", avatar: "http://xxx" });
} catch (error: any) {
alert(`[TUICallKit] Failed to call the setSelfInfo API. Reason: ${error}`);
}

2. 自定义铃声

如果您需要自定义来电铃音,可以通过如下接口进行设置:
传入本地铃声文件应为绝对路径。
如需恢复默认铃声,filePath 传空即可。
try {
await TUICallKitServer.setCallingBell(filePath?: string)
} catch (error: any) {
alert(`[TUICallKit] Failed to call the setCallingBell API. Reason: ${error}`);
}

3. 群组通话

如果您需要实现群组(即多人)音视频通话,可以通过如下接口进行设置:
TUICallKitServer.groupCall({
userIDList: ["jane", "mike", "tommy"],
type: 1, // 1-语音通话 2-视频通话
groupID: "12345678"
});

API 文档

微信小程序 TUICallKIt API 文档请参考:TUICallKit API

常见问题

出现推流黑屏,样式错乱怎么回事?

警告:
微信小程序 Skyline 渲染引擎与 live-pusher 存在兼容性问题,如果您使用微信开发者工具 1.06.2307260+ 版本以上的新创建的项目,请在 app.json 中删除 Skyline 的相关配置。
"renderer": "skyline",
"rendererOptions": {
"skyline": {
"defaultDisplayBlock": true,
"disableABTest": true,
"sdkVersionBegin": "3.0.0",
"sdkVersionEnd": "15.255.255"
}
},
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"

什么是 SDKAppID、SecretKey?

SDKAppID:IM 的应用 ID,用于业务隔离,即不同的 SDKAppID 的通话彼此不能互通。
Secretkey:IM 的应用密钥,需要和 SDKAppID 配对使用,用于签出合法使用 IM 服务的鉴权用票据 UserSig。

什么是 UserSig,如何生成 UserSig?

UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

错误提示“The package you purchased does not support this ability”,如何处理?

如遇以上错误提示,是由于您当前应用的音视频通话能力包过期或未开通,领取或者开通音视频通话能力,进而继续使用 TUICallKit 组件。具体可参考步骤三
注意:
单击免费体验以后,部分之前使用过 实时音视频 TRTC 服务的用户会提示:
[-100013]:TRTC service is suspended. Please check if the package balance is 0 or the Tencent Cloud accountis in arrears
当实时音视频 TRTC 的免费额度(10000分钟)已经过期或者耗尽,就会导致开通此项服务失败,这里您可以单击 TRTC 控制台,找到对应 SDKAppID 的应用管理页,开通后付费功能后,再次启用应用即可正常体验音视频通话能力。具体参考下图:




微信开发者工具有路径报错,如何处理?

如果微信开发者工具有路径保存,请清除缓存,避免开发者工具的缓存造成渲染异常。具体参考下图:




技术咨询

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