本文将介绍如何用最短的时间完成 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 的第一步就是要开通小程序的类目和标签使用权限，否则无法使用，这包括如下步骤：
小程序推拉流标签不支持个人小程序，只支持企业类小程序。需要在 注册 时填写主体类型为企业，如下图所示：
小程序推拉流标签使用权限暂时只开放给有限 类目。
符合类目要求的小程序，需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限，如下图所示：
步骤二：在小程序控制台配置域名
request 合法域名：
https://official.opensso.tencent-cloud.comhttps://yun.tim.qq.comhttps://cloud.tencent.comhttps://webim.tim.qq.comhttps://query.tencent-cloud.comhttps://web.sdk.qcloud.com
socket 合法域名：
wss://wss.im.qcloud.comwss://wss.tim.qq.com
步骤三：开通服务
1. 登录到 即时通信 IM 控制台，单击创建新应用，在弹出的对话框中输入您的应用名称，并单击确定。
2. 单击刚刚创建出的应用，进入基本配置页面，并在页面的右下角找到开通腾讯实时音视频服务功能区，单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。如果需要正式应用上线，可以单击 前往加购 即可进入购买页面。
注意
3. 在同一页面找到 SDKAppID 和密钥并记录下来。
SDKAppID：IM 的应用 ID，用于业务隔离，即不同的 SDKAppID 的通话彼此不能互通。
Secretkey：IM 的应用密钥，需要和 SDKAppID 配对使用，用于签出合法使用 IM 服务的鉴权用票据 UserSig。
音视频通话能力活动特惠：
即日起至2022年10月01日0点前，购买音视频通话能力包基础版可获赠解锁相同有效期的小程序端通话功能授权。在活动结束前购买的音视频通话能力包在有效期内不受活动结束影响仍可使用小程序通话功能，活动结束后的新购或续期需选择体验版、进阶版、尊享版来获取小程序通话功能授权，基础版亦可单独加购小程序功能授权进行解锁。
[-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 组件
选择您需要的集成方式
npm i @tencentcloud/call-uikit-wechat
macOS 端
mkdir -p ./TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./TUICallKit
windows 端
xcopy node_modules\\@tencentcloud\\call-uikit-wechat .\\TUICallKit /i /e
执行完以上命令 您的目录下生成 TUICallKit 文件夹，其中包含有 TUICallKit 组件
步骤五：创建并初始化 TUI 组件库
1. 添加组件到需要使用 TUICallKit 的页面
// 可参考 MiniProgram/pages/videoCall/videoCall.json 或 MiniProgram/pages/audioCall/audioCall.json{"usingComponents": {"TUICallKit": "/TUICallKit/TUICallKit"}}
{"usingComponents": {"TUICallKit": "/TUICallKit/TUICallKit/TUICallKit"}}
2. 在 WXML 模板 中添加一个 TUICallKit 组件，例如示例代码中的 MiniProgram/pages/videoCall/videoCall.wxml：
// 可参考 MiniProgram/pages/videoCall/videoCall.wxml 或 MiniProgram/pages/audioCall/audioCall.wxml<TUICallKitid="TUICallKit-component" //用于获取子组件对象方法config="{{config}}" //将config中的参数传递给callkit></TUICallKit>
config 中的参数：
参数 | 类型 | 说明 | 是否必传 |
sdkAppID | String | IM 的应用 ID | 是 |
userID | String | 当前用户的 ID | 是 |
userSig | String | 鉴权的票据 | 是 |
type | 通话的媒体类型： AUDIO：语音通话 VIDEO：视频通话 | 否 | |
tim | Any | TIM 实例 | 否 |
3. 用 JS 代码动态设置 config 参数
在 JS 逻辑交互例如
pages/index/index.js 中填写如下代码，用于设置 wxml 文件中的 {{config}} 变量。这部分工作可参考 MiniProgram/pages/videoCall/videoCall.js 或 MiniProgram/pages/audioCall/audioCall.js 中的示例代码，如下所示：import { MEDIA_TYPE } from '../../TUICallEngine/tuicall-engine-wx.js';Page({/*** 页面的初始数据*/data: {config: {sdkAppID: 123, // 替换为您自己账号下的 SDKAppIduserID: 'jane', // 填写当前用的 userIDuserSig: 'xxxxxxxxxxxx', // 通过 genTestUserSig(userID) 生成type: MEDIA_TYPE.AUDIO, //通话的类型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.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/tuicall-engine-wx.js';//call需要在init完成后才能调用this.TUICallKit.call({ userID: 'jane', type: MEDIA_TYPE.VIDEO });
参数 | 类型 | 含义 |
userID | String | 目标用户的 UserID："jane" |
type | 通话的媒体类型，AUDIO：语音通话，VIDEO：视频通话 |
群内视频通话
通过调用 TUICallKit 的 groupCall 函数并指定通话类型和被叫方的 UserID 列表，就可以发起群内的语音或者视频通话。
import { MEDIA_TYPE } from '../../TUICallEngine/tuicall-engine-wx.js';//groupCall需要在init完成后才能调用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");
全局监听
注意：
TUICallKit 版本须大于或等于 1.2.1。
仅需四步即可完成小程序全局监听：
1. 在 app.json 注册页面全局监听页面。
2. 在 app.js 中导入全局监听模块 ( callManager ) 。
3. 在 app.js onLaunch 生命周期中实例化 callManager。
4. 触发全局监听。
具体实现方法请参见：
主包方案 ：【TUICallKit】小程序全局监听（主包方案）
分包方案： 【TUICallKit】小程序全局监听（分包方案）
常见问题
错误提示“The package you purchased does not support this ability”？
说明：