本文档指导您使用微信小程序插件方案接入腾讯云视立方美颜特效 SDK ,以下简称视立方 WEBAR。
本节仅适用于原生微信小程序项目接入,uniapp 项目请参见 uniapp(小程序)接入
app.json
中声明要使用的插件,例如:{
"plugins": {
"webarPlugin": {
"version": "1.0.1",
"provider": "wx04445cff065100ed"
}
}
}
npm install tencentcloud-webar-wx
webar-image 基于 webgl 相关能力,提供图片和相册美颜特效处理能力,支持导出和预览。
.json
文件中定义需要引入的webar-image
组件。{
"usingComponents": {
"webar-image": "tencentcloud-webar-wx/webar-image"
}
}
.wxml
文件中使用组件。<webar-image
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"
/>
.js
文件中使用 webarContext 设置美颜特效。webar-image 会通过 created 事件返回 WebarContext
onArCreated(event) {
const webarContext = event.detail
// 设置美颜
webarContext.setBeautify({
whiten: 0.5,
dermabrasion: 0.6
});
// 设置滤镜
webarContext.setFilter(id, 1);
// 设置美妆、特效、贴纸
webarContext.setEffect([{ id, intensity:1 }]);
},
webar-camera 组件使用微信组件 camera 进行封装,适用于拍摄录像场景下的美颜特效处理。
.json
文件中定义需要引入的webar-camera
组件。{
"usingComponents": {
"webar-camera": "tencentcloud-webar-wx/webar-camera"
}
}
.wxml
文件中使用组件。<webar-camera
licenseKey="{{licenseKey}}"
appId="{{appId}}"
authFunc="{{authFunc}}"
plugin3d="{{plugin3d}}"
bind:created="onArCreated"
style="width: 100vw; height: 100vh"
/>
组件 webar-camera 的使用方法和微信原生标签 camera 的方法一致,可参考微信小程序标签 camera 的文档说明,美颜特效相关参数请参考组件属性说明。
.js
文件中使用 webarContext 设置美颜特效。webar-camera 会通过 created 事件返回 WebarContext
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) // 保存图片,参数为是否存储到相册
},
webar-live-pusher 组件使用微信组件 live-pusher 进行封装,适用于直播推流场景下的美颜特效处理。
该模式目前仅支持使用云直播接入,暂不支持 trtc
.json
文件中定义需要引入的webar-live-pusher
组件。{
"usingComponents": {
"webar-live-pusher": "tencentcloud-webar-wx/webar-live-pusher"
}
}
.wxml
文件中使用组件。<!--美颜特效模式,支持除虚拟背景外所有美颜特效-->
<webar-live-pusher
enableVideoCustomRender
licenseKey="{{licenseKey}}"
appId="{{appId}}"
authFunc="{{authFunc}}"
plugin3d="{{plugin3d}}"
bind:created="onArCreated"
style="width: 100vw; height: 100vh"
/>
组件 webar-live-pusher 的使用方法和微信原生标签 live-pusher 的方法一致,更多属性可参考微信小程序标签 live-pusher 的文档说明,美颜特效相关参数请参考组件属性说明。
webar-live-pusher 会通过 created 事件返回 WebarContext
async onArCreated(event) {
const webarContext = event.detail
// 设置美颜
webarContext.setBeautify({
whiten: 0.5,
dermabrasion: 0.6
});
// 设置滤镜
webarContext.setFilter(id, 1);
// 设置美妆、特效、贴纸
webarContext.setEffect([{ id, intensity:1 }]);
},
.json
文件中定义需要引入的webar-live-pusher
组件。{
"usingComponents": {
"webar-live-pusher": "webar-live-pusher/webar-live-pusher"
}
}
.wxml
文件中使用组件。<webar-live-pusher custom-effect licenseKey="{{licenseKey}}" appId="{{appId}}" authFunc="{{authFunc}}" plugin3d="{{plugin3d}}" background="{{backgroundUrl}}" bind:created="onArCreated" style="width: 100vw; height: 100vh" />
注意
- webar-live-pusher 分为 美颜特效 和 虚拟背景,开启 enableVideoCustomRender 即为 美颜特效 模式,开启 custom-effect 即为 虚拟背景,两者不可同时使用。
manifest.json
中声明要使用的插件:{
"mp-weixin": {
"plugins": {
"webarPlugin": {
"version": "1.0.1",
"provider": "wx04445cff065100ed"
}
}
}
}
npm install tencentcloud-webar-wx
WebArImage 基于 webgl 相关能力,提供图片和相册美颜特效处理能力,支持导出和预览。
.vue
文件中使用组件。WebArImage 会通过 created 事件返回 WebarContext
<template>
<view>
<WebArImage
:licenseKey="licenseKey"
:appId="appId"
:authFunc="authFunc"
:plugin3d="plugin3d"
url="https://webar-static.tencent-cloud.com/assets/image2.jpg"
@created="onArCreated"
my-style="width: 100vw; height: 100vh"
/>
</view>
</template>
<script>
import WebArImage from "tencentcloud-webar-wx/WebArImage/WebArImage.vue";
export default {
components: {
WebArImage,
},
methods: {
// 此事件会返回 webarContext 实例,通过该实例调用 webar sdk的美颜方法。方法介绍参考文末。
onArCreated(sdk) {
webarContext = sdk.detail || sdk; // uniapp 下事件有可能有detail也有可能没有
// 设置美颜
webarContext.setBeautify({
whiten: 0.5,
dermabrasion: 0.6,
});
// 设置滤镜
webarContext.setFilter(id, 1);
// 设置美妆、特效、贴纸
webarContext.setEffect([{ id, intensity: 1 }]);
webarContext.download(true); // 保存图片,参数为是否存储到相册
},
},
};
</script>
WebArCamera 组件使用微信组件 camera 进行封装,适用于拍摄录像场景下的美颜特效处理,美颜特效相关参数请参考插件相关组件美颜特效属性说明。
.vue
文件中使用组件。WebArCamera 会通过 created 事件返回 WebarContext
<template>
<view>
<WebArCamera
:licenseKey="licenseKey"
:appId="appId"
:authFunc="authFunc"
:plugin3d="plugin3d"
@created="onArCreated"
my-style="width: 100vw; height: 100vh"
/>
</view>
</template>
<script>
import WebArCamera from "tencentcloud-webar-wx/WebArCamera/WebArCamera.vue";
export default {
components: {
WebArCamera,
},
methods: {
// 此事件会返回 webarContext 实例,通过该实例调用 webar sdk的美颜方法。方法介绍参考文末。
onArCreated(sdk) {
webarContext = sdk.detail || sdk; // uniapp 下事件有可能有detail也有可能没有
// 设置美颜
webarContext.setBeautify({
whiten: 0.5,
dermabrasion: 0.6,
});
// 设置滤镜
webarContext.setFilter(id, 1);
// 设置美妆、特效、贴纸
webarContext.setEffect([{ id, intensity: 1 }]);
},
},
};
</script>
WebArPusher 组件使用微信组件 live-pusher 进行封装,适用于直播推流场景下的美颜特效处理,美颜特效相关参数请参考插件相关组件美颜特效属性说明,此组件目前仅支持使用云直播接入,暂不支持 trtc。
.vue
文件中使用组件。WebArPusher 会通过 created 事件返回 WebarContext
<template>
<view>
<WebArPusher
enableVideoCustomRender
:licenseKey="licenseKey"
:appId="appId"
:authFunc="authFunc"
:plugin3d="plugin3d"
@created="onArCreated"
my-style="width: 100vw; height: 100vh"
/>
</view>
</template>
<script>
import WebArPusher from "tencentcloud-webar-wx/WebArPusher/WebArPusher.vue";
export default {
components: {
WebArPusher,
},
methods: {
// 此事件会返回 webarContext 实例,通过该实例调用 webar sdk的美颜方法。方法介绍参考文末。
onArCreated(sdk) {
webarContext = sdk.detail || sdk; // uniapp 下事件有可能有detail也有可能没有
// 设置美颜
webarContext.setBeautify({
whiten: 0.5,
dermabrasion: 0.6,
});
// 设置滤镜
webarContext.setFilter(id, 1);
// 设置美妆、特效、贴纸
webarContext.setEffect([{ id, intensity: 1 }]);
},
},
};
</script>
.vue
文件中使用组件。<template>
<view>
<WebArPusher
custom-effect
:licenseKey="licenseKey"
:appId="appId"
:authFunc="authFunc"
:plugin3d="plugin3d"
:background="backgroundUrl"
@created="onArCreated"
my-style="width: 100vw; height: 100vh"
/>
</view>
</template>
注意
- 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 加载完成事件 |
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 官网文档
属性 | 类型 | 返回值 | 必填 | 说明 |
---|---|---|---|---|
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\<Filter> | 否 | 获取滤镜列表 |
getEffectList | function() | Promise\<Effect> | 否 | 获取特效列表(美妆、贴纸) |
download | function(isSave) | string | 否 | 下载美颜图片 仅 image 组件有效,不传参数时仅返回图片缓存地址,传 true 则下载到相册 |
更多方法请参考腾讯特效-API 文档