腾讯特效 SDK TUICallKit 接入小程序虚拟背景

一、准备工作

·请阅读小程序美颜特效 SDK 接入指南，熟悉 SDK 基本用法。

·请阅读 TRTC TUICallKit 快速接入(uniapp)，并在本地运行 uniapp-callkit 及完成调试预览相关操作。

·在微信公众平台添加小程序插件：视立方WEBAR。

·符合接入要求，并申请试用或购买视立方 WEBAR License，详见腾讯云视立方控制台。

二、步骤1：安装小程序美颜特效 SDK

1. 使用组件前需在 uniapp 工程的manifest.json中声明要使用的插件：

{ "mp-weixin": { "plugins": { "webarPlugin": { "version": "1.0.1", "provider": "wx04445cff065100ed" } } }}

2. 在 uniapp 项目根目录安装 npm 包：tencentcloud-webar-wx。

npm install tencentcloud-webar-wx

三、步骤2：uniapp-callkit 项目引入小程序美颜特效 SDK

1. 在 uniapp-callkit 项目 src/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. 修改 uniapp-callkit 项目 src/TUICallKit/src/Components/components/SingleCall/PusherPlayer/wechat/Pusher.vue 文件中 live-pusher 组件为 WebarPusher。

<template> <div :class="localClass"> <div @click="switchScreen" class="stream-box"> <WebarPusher class="stream" // 以下参数使用虚拟背景时必须传递，不开启则无需传递，不影响通话功能使用 :custom-effect="true" :licenseKey="licenseKey" :appId="appid" :authFunc="authFunc" // 其他props同live-pusher，此处省略 ></WebarPusher> </div> </div></template>
<script lang="ts" setup>import { LICENSE_KEY, APP_ID, authFunc as auth,} from "../../../../../../debug/webar-auth";import WebarPusher from "tencentcloud-webar-wx/WebArPusher/WebArPusher.vue";const licenseKey = ref(LICENSE_KEY);const appid = ref(APP_ID);const authFunc = ref(auth);//… 此处已省略原代码</script>

四、步骤3：设置虚拟背景

传递 background 参数以开启虚拟背景。

五、示例代码

你可直接拉取示例代码运行并预览虚拟背景效果。