准备工作
请阅读小程序美颜特效 SDK 接入指南，熟悉 SDK 基本用法。
请阅读 TRTC TUICallKit 快速接入(uniapp)，并在本地运行 uniapp-callkit 及完成调试预览相关操作。
符合接入要求，并申请试用或购买视立方 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"><WebarPusherclass="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 参数以开启虚拟背景。
<WebArPushercustom-effectautopush:licenseKey="licenseKey":appId="appId":authFunc="authFunc"class="webar"/>