准备工作
1. 在 微信公众平台 注册并登录小程序。
3. 符合接入要求，并申请试用视立方 WEBAR License，详见 腾讯云视立方控制台。
接入配置
1. 使用组件前需在小程序工程的
app.json中声明要使用的插件：{"plugins": {"webarPlugin": {"version": "1.0.1","provider": "wx04445cff065100ed"}}}
2. 在小程序目录安装 npm 包: tencentcloud-webar-wx
npm install tencentcloud-webar-wx
3. 打开微信开发者工具，工具 > 执行构建 npm。
使用 webar-live-pusher 组件接入美颜
设置美颜、滤镜、美妆、贴纸
webar-live-pusher 组件使用微信组件 live-pusher 进行封装，适用于直播推流场景下的美颜特效处理，美颜特效相关参数请参见 组件美颜特效属性说明，此组件目前仅支持使用云直播接入，暂不支持 trtc。
1. 在 page 的
.json文件中定义需要引入的webar-live-pusher组件。{"usingComponents": {"webar-live-pusher": "tencentcloud-webar-wx/webar-live-pusher"}}
2. 在 page 的
.wxml文件中使用组件。<!--美颜特效模式，支持除虚拟背景外所有美颜特效--><webar-live-pusherenableVideoCustomRenderautopushurl="{{pushUrl}}"licenseKey="{{licenseKey}}"appId="{{appId}}"authFunc="{{authFunc}}"plugin3d="{{plugin3d}}"background="{{backgroundUrl}}"bind:created="onArCreated"style="width: 100vw; height: 100vh"/>
组件 webar-live-pusher 的使用方法和微信原生标签 live-pusher 的方法一致，更多属性可参考微信小程序标签 live-pusher 的文档说明，美颜特效相关参数请参见 组件属性说明。
3. 在 page 的.js 文件中使用 sdkContext 设置美颜特效。
async onArCreated(event) {const webarContext = event.detail// 设置美颜webarContext.setBeautify({whiten: 0.5,dermabrasion: 0.6});// 设置滤镜webarContext.setFilter(id, 1);// 设置美妆、特效、贴纸webarContext.setEffect([{ id, intensity:1 }]);},
设置虚拟背景
1. 在 page 的
.json文件中定义需要引入的webar-live-pusher组件。{"usingComponents": {"webar-live-pusher": "webar-live-pusher/webar-live-pusher"}}
2. 在 page 的
.wxml文件中使用组件。<!--虚拟背景模式，仅支持虚拟背景--><webar-live-pushercustom-effectautopushurl="{{pushUrl}}"licenseKey="{{licenseKey}}"appId="{{appId}}"authFunc="{{authFunc}}"plugin3d="{{plugin3d}}"background="{{backgroundUrl}}"bind:created="onArCreated"style="width: 100vw; height: 100vh"/>
注意1. webar-live-pusher 分为 美颜特效 和 虚拟背景，开启 enableVideoCustomRender 即为 美颜特效 模式，开启 custom-effect 即为虚拟背景，两者不可同时使用。2. webar-live-pusher 美颜特效模式仅支持 云直播接入，trtc 暂不支持。
组件美颜特效属性说明
属性 | 类型 | 默认值 | 必填 | 说明 |
licenseKey | string | "" | 是 | 腾讯云视立方 licenseKey |
appId | string | "" | 是 | 腾讯云 appid |
authFunc | async function | null | 是 | |
plugin3d | function | null | 否 | 3d 特效插件，开启 3d 贴纸时需传入 |
beautify | Object | null | 否 | 初始美颜参数，取值范围：0 - 1，可用： whiten、dermabrasion、lift、shave、eye、chin |
background | string | '' | 否 | 虚拟背景图片 url，域名需加入小程序白名单 |
bindcreated | event | null | 否 | 腾讯特效 SDK 初始化完成事件 |
bindready | event | null | 否 | 腾讯特效 SDK 加载完成事件 |
binderror | event | null | 否 | 腾讯特效 SDK 错误事件 |
webarContext 实例方法
鉴权方法 authFunc 生成方式
const config = {appid: '您的腾讯云APPID',token: '您的Token',}const authFunc = async function() {const timestamp = Math.round(new Date().getTime() / 1000);const signature = sha256(timestamp + config.token + config.appid + timestamp).toUpperCase();return { signature, timestamp };
