小程序插件接入腾讯云视立方美颜特效

本文档指导您使用微信小程序插件方案接入腾讯云视立方美颜特效 SDK ,以下简称视立方 WEBAR。

准备工作

1. 在 微信公众平台 注册并登录小程序。
2. 在 微信公众平台 添加小程序插件：视立方 WEBAR
3. 符合接入要求，申请插件并申请试用视立方 WEBAR，详见 腾讯云视立方控制台。

使用原生微信小程序接入

本节仅适用于原生微信小程序项目接入，uniapp 项目请参见 uniapp（小程序）接入

$3

1. 使用插件前需在小程序工程的app.json中声明要使用的插件，例如：

``json
{
"plugins": {
"webarPlugin": {
"version": "1.0.1",
"provider": "wx04445cff065100ed"
}
}
}
`

2. 在小程序目录安装 npm 包: tencentcloud-webar-wx

`bash
npm install tencentcloud-webar-wx
`

3. 打开微信开发者工具，工具=> 执行构建 npm

$3

webar-image 基于 webgl 相关能力，提供图片和相册美颜特效处理能力，支持导出和预览。

1. 在 page 的.json文件中定义需要引入的webar-image组件。

`json
{
"usingComponents": {
"webar-image": "tencentcloud-webar-wx/webar-image"
}
}
`

2. 在 page 的.wxml文件中使用组件。

`html
licenseKey="{{licenseKey}}"
appId="{{appId}}"
authFunc="{{authFunc}}"
plugin3d="{{plugin3d}}"
url="https://webar-static.tencent-cloud.com/assets/image2.jpg"
bind:created="onArCreated"
style="width: 100vw; height: 100vh"
/>
`

3. 在 page 的.js文件中使用 webarContext 设置美颜特效。

webar-image 会通过 created 事件返回 WebarContext

`js
onArCreated(event) {
const webarContext = event.detail
// 设置美颜
webarContext.setBeautify({
whiten: 0.5,
dermabrasion: 0.6
});
// 设置滤镜
webarContext.setFilter(id, 1);
// 设置美妆、特效、贴纸
webarContext.setEffect([{ id, intensity:1 }]);
},
`

$3

webar-camera 组件使用微信组件 camera 进行封装，适用于拍摄录像场景下的美颜特效处理。

1. 在 page 的.json文件中定义需要引入的webar-camera组件。

`json
{
"usingComponents": {
"webar-camera": "tencentcloud-webar-wx/webar-camera"
}
}
`

2. 在 page 的.wxml文件中使用组件。

`html
licenseKey="{{licenseKey}}"
appId="{{appId}}"
authFunc="{{authFunc}}"
plugin3d="{{plugin3d}}"
bind:created="onArCreated"
style="width: 100vw; height: 100vh"
/>
`

组件 webar-camera 的使用方法和微信原生标签 camera 的方法一致，可参考微信小程序标签 camera 的文档说明，美颜特效相关参数请参考组件属性说明。

3. 在 page 的.js文件中使用 webarContext 设置美颜特效。

webar-camera 会通过 created 事件返回 WebarContext

`js
onArCreated(event) {
const webarContext = event.detail
// 设置美颜
webarContext.setBeautify({
whiten: 0.5,
dermabrasion: 0.6
});
// 设置滤镜
webarContext.setFilter(id, 1);
// 设置美妆、特效、贴纸
webarContext.setEffect([{ id, intensity:1 }]);
webarContext.download(true) // 保存图片，参数为是否存储到相册
},
`

$3

webar-live-pusher 组件使用微信组件 live-pusher 进行封装，适用于直播推流场景下的美颜特效处理。

#### 设置美颜、滤镜、美妆、贴纸

该模式目前仅支持使用云直播接入，暂不支持 trtc

1. 在 page 的.json文件中定义需要引入的webar-live-pusher组件。

`json
{
"usingComponents": {
"webar-live-pusher": "tencentcloud-webar-wx/webar-live-pusher"
}
}
`

2. 在 page 的.wxml文件中使用组件。

`html

enableVideoCustomRender
licenseKey="{{licenseKey}}"
appId="{{appId}}"
authFunc="{{authFunc}}"
plugin3d="{{plugin3d}}"
bind:created="onArCreated"
style="width: 100vw; height: 100vh"
/>
`

组件 webar-live-pusher 的使用方法和微信原生标签 live-pusher 的方法一致，更多属性可参考微信小程序标签 live-pusher 的文档说明，美颜特效相关参数请参考组件属性说明。

3. 在 page 的.js 文件中使用 sdkContext 设置美颜特效。

webar-live-pusher 会通过 created 事件返回 WebarContext

`js
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组件。

`json
{
"usingComponents": {
"webar-live-pusher": "webar-live-pusher/webar-live-pusher"
}
}
`

2. 在 page 的.wxml文件中使用组件。

custom-effect
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 即为 虚拟背景，两者不可同时使用。

使用 uniapp 接入

$3

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

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

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

`bash
npm install tencentcloud-webar-wx
`

$3

WebArImage 基于 webgl 相关能力，提供图片和相册美颜特效处理能力，支持导出和预览。

1. 在引入组件的页面 的.vue文件中使用组件。

WebArImage 会通过 created 事件返回 WebarContext

`html



`

$3

WebArCamera 组件使用微信组件 camera 进行封装，适用于拍摄录像场景下的美颜特效处理，美颜特效相关参数请参考插件相关组件美颜特效属性说明。

1. 在引入组件的页面 的.vue文件中使用组件。

WebArCamera 会通过 created 事件返回 WebarContext

`html



`

$3

#### 设置美颜、滤镜、美妆、贴纸

WebArPusher 组件使用微信组件 live-pusher 进行封装，适用于直播推流场景下的美颜特效处理，美颜特效相关参数请参考插件相关组件美颜特效属性说明，此组件目前仅支持使用云直播接入，暂不支持 trtc。

1. 在引入组件的页面 的.vue文件中使用组件。

WebArPusher 会通过 created 事件返回 WebarContext

`html



`

#### 设置虚拟背景

1. 在引入组件的页面 的.vue文件中使用组件。

`html

`

> 注意
>
> 1. WebArPusher 分为 美颜特效 和 虚拟背景，开启 enableVideoCustomRender 即为 美颜特效 模式，开启 custom-effect 即为 虚拟背景，两者不可同时使用。

组件美颜特效属性说明

| 属性 | 类型 | 默认值 | 必填 | 说明 |
| :---------- | :------------- | :----- | :--- | :------------------------------------------------------------------------------------- |
| licenseKey | string | "" | 是 | 腾讯云视立方 licenseKey |
| appId | string | "" | 是 | 腾讯云 appid |
| authFunc | async function | null | 是 | 需返回 signature, timestamp，详见WEBAR 鉴权方法，传递时请不要包含在对象中 |
| 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 加载完成事件 |

WEBAR 鉴权方法 authFunc 生成方式

`js
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 };
``

此方法仅测试时使用，为防止 token 泄露，发布时请使用服务端加密，详见腾讯云-腾讯特效 SDK 官网文档

插件 webarContext 实例方法说明

| 属性 | 类型 | 返回值 | 必填 | 说明 |
| :-------------- | :---------------------------------------------------------------------------------------------------------- | :---------------- | :--- | :--------------------------------------------------------------------------------- |
| pusherContext | LivePusherContext | "" | 否 | 插件中 live-pusher 实例，仅 webar-live-pusher 组件拥有 |
| setBeautify | function(beautyParam):void | "" | 否 | 设置美颜 |
| setFilter | function(filterId, intensity):void | null | 否 | 设置滤镜 |
| setEffect | function([{ id, intensity }]):void | null | 否 | 设置特效（美妆、贴纸） |
| setBackground | function({ type: 'image',src: arrayBuffer }):void | null | 否 | 设置虚拟背景，仅 pusher 组件在开启 custom-effect 时生效 |
| getCommonFilter | function() | Promise\ | 否 | 获取滤镜列表 |
| getEffectList | function() | Promise\ | 否 | 获取特效列表（美妆、贴纸） |
| download | function(isSave) | string | 否 | 下载美颜图片 仅 image 组件有效，不传参数时仅返回图片缓存地址，传 true 则下载到相册 |

更多方法请参考腾讯特效-API 文档