tencentcloud-webar-wx
v1.0.10-1
Published
tencent effect webar component for wx
Downloads
116
Maintainers
Readme
小程序插件接入腾讯云视立方美颜特效
本文档指导您使用微信小程序插件方案接入腾讯云视立方美颜特效 SDK ,以下简称视立方 WEBAR。
准备工作
使用原生微信小程序接入
本节仅适用于原生微信小程序项目接入,uniapp 项目请参见 uniapp(小程序)接入
接入配置
- 使用插件前需在小程序工程的
app.json
中声明要使用的插件,例如:
{
"plugins": {
"webarPlugin": {
"version": "1.0.1",
"provider": "wx04445cff065100ed"
}
}
}
- 在小程序目录安装 npm 包: tencentcloud-webar-wx
npm install tencentcloud-webar-wx
- 打开微信开发者工具,工具=> 执行构建 npm
使用 webar-image 组件接入图片美颜特效
webar-image 基于 webgl 相关能力,提供图片和相册美颜特效处理能力,支持导出和预览。
- 在 page 的
.json
文件中定义需要引入的webar-image
组件。
{
"usingComponents": {
"webar-image": "tencentcloud-webar-wx/webar-image"
}
}
- 在 page 的
.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"
/>
- 在 page 的
.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 组件接入拍照录像美颜
webar-camera 组件使用微信组件 camera 进行封装,适用于拍摄录像场景下的美颜特效处理。
- 在 page 的
.json
文件中定义需要引入的webar-camera
组件。
{
"usingComponents": {
"webar-camera": "tencentcloud-webar-wx/webar-camera"
}
}
- 在 page 的
.wxml
文件中使用组件。
<webar-camera
licenseKey="{{licenseKey}}"
appId="{{appId}}"
authFunc="{{authFunc}}"
plugin3d="{{plugin3d}}"
bind:created="onArCreated"
style="width: 100vw; height: 100vh"
/>
组件 webar-camera 的使用方法和微信原生标签 camera 的方法一致,可参考微信小程序标签 camera 的文档说明,美颜特效相关参数请参考组件属性说明。
- 在 page 的
.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 组件接入直播推流美颜特效
webar-live-pusher 组件使用微信组件 live-pusher 进行封装,适用于直播推流场景下的美颜特效处理。
设置美颜、滤镜、美妆、贴纸
该模式目前仅支持使用云直播接入,暂不支持 trtc
- 在 page 的
.json
文件中定义需要引入的webar-live-pusher
组件。
{
"usingComponents": {
"webar-live-pusher": "tencentcloud-webar-wx/webar-live-pusher"
}
}
- 在 page 的
.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 的文档说明,美颜特效相关参数请参考组件属性说明。
- 在 page 的.js 文件中使用 sdkContext 设置美颜特效。
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 }]);
},
设置虚拟背景
- 在 page 的
.json
文件中定义需要引入的webar-live-pusher
组件。
{
"usingComponents": {
"webar-live-pusher": "webar-live-pusher/webar-live-pusher"
}
}
- 在 page 的
.wxml
文件中使用组件。
注意
- webar-live-pusher 分为 美颜特效 和 虚拟背景,开启 enableVideoCustomRender 即为 美颜特效 模式,开启 custom-effect 即为 虚拟背景,两者不可同时使用。
使用 uniapp 接入
接入前配置
- 使用组件前需在 uniapp 工程的
manifest.json
中声明要使用的插件:
{
"mp-weixin": {
"plugins": {
"webarPlugin": {
"version": "1.0.1",
"provider": "wx04445cff065100ed"
}
}
}
}
- 在 uniapp 项目根目录安装 npm 包: tencentcloud-webar-wx
npm install tencentcloud-webar-wx
使用 WebArImage 组件接入图片美颜特效
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 组件接入拍照录像美颜
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 组件接入直播推流美颜特效
设置美颜、滤镜、美妆、贴纸
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 加载完成事件 |
WEBAR 鉴权方法 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 };
此方法仅测试时使用,为防止 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<Filter> | 否 | 获取滤镜列表 | | getEffectList | function() | Promise<Effect> | 否 | 获取特效列表(美妆、贴纸) | | download | function(isSave) | string | 否 | 下载美颜图片 仅 image 组件有效,不传参数时仅返回图片缓存地址,传 true 则下载到相册 |
更多方法请参考腾讯特效-API 文档