一、集成效果
TUICallKit 组件接入虚拟背景功能后的显示效果如下：
注意：小程序暂时不支持模糊背景效果。
| 原始摄像头 | 图片背景效果 |
| | |
二、准备条件
TUICallKit 虚拟背景能力基于 腾讯特效 SDK，请首先申请试用或购买视立方 WEBAR License，详见 腾讯云视立方控制台。
三、开始使用
注意：警告：
注意：在集成虚拟背景能力之前，请阅读 TRTC TUICallKit 快速接入(原生小程序)，推荐使用分包方式集成 TUICallKit，并完成调试预览相关操作。
四、步骤一：添加插件
首先要在小程序管理后台的设置 > 第三方设置 > 插件管理中添加插件。开发者可登录小程序管理后台，搜索 视立方WEBAR 申请添加插件。
五、步骤二：引用插件
1. 使用组件前需在小程序工程的 app.json 中声明要使用的插件：
"plugins": { "webarPlugin": { "version": "latest", "provider": "wx04445cff065100ed" } }
2. 在小程序目录安装 npm 包: tencentcloud-webar-wx
npm install tencentcloud-webar-wx crypto-js
3. 构建 npm，打开微信开发者工具单击工具 > 构建 npm，新增 miniprogram_npm 目录。目录如下：
六、步骤三：引入美颜特效 SDK
1. 在 TUICallKit/debug 目录下新增 webar-auth.js，实例代码如下：
import crypto from "crypto-js";/** —– 鉴权配置 —– *//** * 腾讯云账号 APPID * * 进入[腾讯云账号中心](https://console.cloud.tencent.com/developer) 即可查看 APPID */const APP_ID = "";/** * Web LicenseKey * * 登录音视频终端 SDK 控制台的[Web License 管理](https://console.cloud.tencent.com/vcube/web)，创建项目即可获得 LicenseKey */const LICENSE_KEY = "";/** * 计算签名用的密钥 Token * * 注意：此处仅用于 DEMO 调试，正式环境中请将 Token 保管在服务端，签名方法迁移到服务端实现，通过接口提供，前端调用拉取签名，参考 * [签名方法](https://cloud.tencent.com/document/product/616/71370#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95) */const TOKEN = "";const sha256 = (str) => { return crypto.SHA256(str).toString();};// 此方法仅测试时使用，为防止 token 泄露，发布时请使用服务端加密，详见[腾讯云-腾讯特效 SDK 页面文档](https://cloud.tencent.com/document/product/616/71364)function authFunc() { const timestamp = Math.round(new Date().getTime() / 1000); const signature = sha256( timestamp + TOKEN + APP_ID + timestamp ).toUpperCase(); return { signature, timestamp };}export { LICENSE_KEY, APP_ID, authFunc };
2. 修改 TUICallKit/component/SingleCall/SingleCall.json 文件，引入 webar-live-pusher组件。
{ "usingComponents": { "webar-live-pusher": "tencentcloud-webar-wx/webar-live-pusher" }}
3. 修改 TUICallKit/component/SingleCall/SingleCall.wxml 文件，将 live-pusher 替换为 webar-live-pusher。
注意：组件 webar-live-pusher 的使用方法和微信原生标签 live-pusher 的方法一致，更多属性可参考微信小程序标签 live-pusher 的文档说明，美颜特效相关参数请参见 组件属性说明。
<webar-live-pusher custom-effect licenseKey="{{licenseKey}}" appId="{{appId}}" authFunc="{{authFunc}}" background="{{isVirtualBackground ? imagePath : ''}}" // 其他 props 同 live-pusher，此处省略/>
4. 修改 TUICallKit/component/SingleCall/SingleCall.js 文件
注意：说明：
注意：backgroundUrl 表示开启虚拟背景显示的图片背景，可通过修改图片路径来修改显示的背景图片，目前仅支持网络图片(不支持本地图片)
import { APP_ID, LICENSE_KEY, authFunc } from '../../../debug/webar-auth';Component({ data: { // 其他的 data 不变，此处忽略 appId: APP_ID, licenseKey: LICENSE_KEY, authFunc, imagePath: 'https://webar-static.tencent-cloud.com/assets/back-new/class.png' }, });
七、步骤四：开启模糊背景
通过调用以下接口，你可以在 UI 上显示虚拟背景的功能按钮。
TUICallKitAPI.enableVirtualBackground(true)