开始

最近更新时间:2024-07-04 16:46:21

我的收藏
本文档指导您快速、安全地接入 Web 美颜特效,并使用相关功能。在接入使用过程中,您有任何疑问可进群进行 技术咨询

前期准备

准备接入 SDK 使用之前,需要确保您已购买 Web License 并创建项目,详情参考 Web端 License 新增与续期

获取参数信息

获取 License Key 和 Token
进入音视频终端 SDK 控制台 > License 管理 > Web License管理,查看您已创建的 Web License 并复制其 License Key 和 Token。



Web Domain:创建项目时填写的域名信息,只可以在该域名下使用此 License。
小程序 APPID:创建项目时填写的小程序信息,只可以在该小程序上使用此 License。
注意:
请确保使用与开发 Domain 和小程序匹配的 License Key 和 Token,否则鉴权会失败,无法正常初始化SDK。
获取 APPID
您可以登录腾讯云控制台,进入账号信息 > 基本信息 查看 APPID。




准备签名信息

除了需要上述 License Key 授权 SDK 外,还需要使用 Token 对 SDK 中调用的接口进行签名。

签名方法鉴权流程




Token:用于 SDK 接口签名,是您身份的唯一标识。
appid:即腾讯云控制台 账号信息 > 基本信息 展示的 APPID。
timestamp:当前时间戳,精确到秒(10位数字)。 
signature:签名(签名有时效性,目前5分钟过期)。

部署签名服务

由于 signature 有时效性,且需要防止 Token 泄露,您需要部署一个生成签名的服务。
注意:
如果 Token 泄露您的身份会被盗用,您的资源会泄露。
生成签名的方法放在前端会导致 Token 泄露,为了避免利益受损,建议您不要将生成签名的方法放在前端。
// 以express后台为例
// 签名方法: sha256(timestamp+token+appid+timestamp)

const { createHash } = require('crypto');
const config = {
appid: '您的腾讯云APPID',
token: '您的Token',
}
const sha256 = function(str) {
return createHash('sha256')
.update(str)
.digest('hex');
}

const genSignature = function() {
const timestamp = Math.round(new Date().getTime() / 1000);
const signature = sha256(timestamp + config.token + config.appid + timestamp).toUpperCase(); // 使用上面获取到的token和appid合成加密串返回
return { signature, timestamp };
}

app.get("/get-ar-sign", (req, res) => {
const sign = genSignature();
res.setHeader('Access-Control-Allow-Origin','*');
res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
res.send(sign);
})

前端调用签名服务

获取签名的服务部署完成后,在您的 Web 页面或小程序中,添加一个获取签名的方法供 SDK 接入调用。
Web
小程序
async function getSignature() {
const res = await fetch('您的域名/get-ar-sign')
const authdata = await res.json()
console.log('authdata',authdata)
return authdata
}
async function getSignature() {
return new Promise((resolve,reject)=>{
wx.request({
url: '您的域名/get-ar-sign',
method: 'GET',
success(res) {
console.log('getSignature ok', res)
resolve(res.data);
},
fail(e){
console.log('getSignature error', e)
}
})
})
}

SDK 接入

上述准备工作完成后,便可根据如下流程接入并使用SDK。

流程说明

SDK 实现了简洁低侵入性的接口提供接入,您只需要初始化实例,将渲染节点添加到自己的页面即可快速实现 Web 美颜特效功能。



安装 SDK

本 SDK 使用 npm 包提供 Web 端与微信小程序的 SDK。
Web端 SDK
npm install tencentcloud-webar
此外,也可以通过引入JS的方式使用,可以根据自身项目灵活选择。
<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>
微信小程序端 SDK
npm install tencentcloud-webar-wx

初始化 SDK

本 SDK 在微信小程序和 Web 端的初始化方式略有差异。
小程序接入请参见 小程序端接入
Web 端我们提供了内置 Camera 与自定义流两种初始化方式。
内置相机与播放器:使用了内置的摄像头与播放器封装,调用简单迅速,交互功能丰富。
自定义流接入:适用于有自己维护媒体流的需求或者要求更高的灵活性与可控性的场景。

使用 SDK

设置美颜和特效
SDK 的所有素材均兼容微信小程序端与 Web 端,调用方式一致,详情可参见 设置美颜和特效
人像分割(0.2.0版本新增)
开启人像分割可以支持设置背景功能,仅在 Web 端支持,详情请参见 使用人像分割
3D特效(0.3.0版本新增)
同时支持微信小程序端与 Web 端,调用方式同设置特效一致,详情请参见 设置美颜和特效
Animoji 表情与虚拟形象(0.3.0版本新增)
依赖 WebGL2 运行环境,目前仅支持 Web 端,详情请参见 使用表情和虚拟形象
小程序推流美颜(1.0.16版本新增)
配合 live-pusher 标签进行推流美颜,详情参加 结合云直播的小程序推流

参数与方法说明

请参见 API 文档

代码示例

请参见 快速上手