即时通信 IM 微信小程序-视频通话（含 UI）-文档中心-腾讯云

TUIKit 组件从 1.0.9 版本开始支持单人/多人音视频通话功能，并且实现了小程序、Web 和 Native 平台的互通。
说明
2022年8月以后，TUIKit 组件升级了音视频通话功能，采用了全新的 TUICallKit，新版本音视频通话功能需要加购专属的 IM 音视频通话能力包后解锁，具体购买方法请参见 步骤3：开通音视频服务，如已开通，则可忽略该步骤。
音视频通话界面如下图所示：
语音通话
视频通话
﻿
﻿
﻿
﻿
﻿
﻿
步骤1：开通小程序权限
由于 TUICallKit 所使用的小程序标签有更苛刻的权限要求，因此集成 TUICallKit 的第一步就是要开通小程序的类目和标签使用权限，否则无法使用，这包括如下步骤：
小程序推拉流标签不支持个人小程序，只支持企业类小程序。需要在 注册 时填写主体类型为企业，如下图所示：
﻿
小程序推拉流标签使用权限暂时只开放给有限 类目。
符合类目要求的小程序，需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限，如下图所示：
﻿
步骤2：在小程序控制台配置域名
在 微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中设置 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
﻿
﻿
﻿
步骤3：开通音视频通话能力 
在使用腾讯云提供的音视频服务前，您需要前往控制台，为应用开通音视频服务。具体步骤请参见 开通服务。﻿
步骤4：下载 TUICallKit 组件
通过 npm 方式下载 TUICallKit 组件，为了方便您后续的拓展，建议您将 TUICallKit 组件复制到自己项目的 TUIKit/components/TUICallKit 目录下：
注意
 请确保在集成 TUICallKit 前您已集成 chat-uikit-wechat，版本需≥ 2.0.0。
下载 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
成功后目录结构如图所示：
﻿
﻿
﻿
步骤5：构建 npm
打开微信开发者工具单击工具 > 构建 npm，新增 miniprogram_npm 目录。目录如下：  
﻿
步骤6：配置 app.json 文件 
添加如下代码到app.json文件，新增全局监听页面。
"TUICallKit/pages/globalCall/globalCall"
﻿
﻿
﻿
警告：
微信开发者工具新的渲染引擎 skyline 和 live-pusher 存在兼容性问题，需要将以下代码从 app.json 中去除。
  "renderer": "skyline",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
步骤7: 调用 TUICallKit 组件
﻿
﻿
﻿
1. 在集成 TUIKit 的页面中导入 CallManager 模块，如 pages/index/index.js 文件下。
// 导入 CallManager 模块，使您的应用具有全局监听来电的能力
import { CallManager } from '../../TUICallKit/TUICallService/serve/callManager';
// 实例化
wx.callManager = new CallManager();
2. 在 wx.$TUIKit.login 的成功回调里初始化 TUICallKit。
注意
以下代码中未填入 sdkAppID 和 userSig。
wx.callManager.init({
       sdkAppID: 0,   // 请填入 sdkAppID
       userID: "",    // 请填入 userID
       userSig: "",   // 请填入 userSig
       globalCallPagePath: "TUICallKit/pages/globalCall/globalCall",
       tim: wx.$TUIKit
 });
步骤8：进行您的第一次通话
﻿
您可以通过小程序订阅消息，实现小程序平台的“离线推送”能力，请参见文档 小程序离线推送。
常见问题
如果您的接入和使用中遇到问题，请参见 常见问题。
技术咨询
了解更多详情您可 腾讯云通信官方社群 进行咨询和反馈。
微信小程序

本页目录：

步骤1：开通小程序权限

步骤2：在小程序控制台配置域名

步骤3：开通音视频通话能力

步骤4：下载 TUICallKit 组件

﻿﻿﻿

步骤5：构建 npm

步骤6：配置 app.json 文件

步骤7: 调用 TUICallKit 组件

步骤8：进行您的第一次通话

常见问题

技术咨询
