Beauty AR
  • 概览
    • 产品概述
    • 开通服务
      • 免费测试
      • 正式版 License
    • 价格中心
  • 立即开始
    • 跑通 Demo
    • 集成
      • 开始集成
      • 内置摄像头
      • 自定义流
      • 加载优化
      • 设置特效
      • 使用人像分割
      • 设置表情和虚拟形象
  • 最佳实践
    • 结合快直播及 WebRTC 的推流
    • 结合快直播及 WebRTC 的推流 (预初始化方案)
    • 结合 TRTC(4.x 版本) 推流
    • 结合 TRTC(5.x 版本)推流
    • 人脸特效集成指南
    • 虚拟试穿戴集成指南
  • 控制台指南
    • 素材制作
      • 素材制作指南
      • 美妆
      • 人脸贴纸
      • 3D 特效
    • 素材制作管理
  • 接口文档
  • 发布说明
  • 常见问题
Beauty AR

开始集成

本文档指导您快速、安全地接入 Beauty AR Web,并使用相关功能。在接入使用过程中,您有任何疑问可 联系我们

前期准备

准备接入 SDK 使用之前,需要确保您已购买 Web License 并创建项目,详情参见申请 正式版License

获取参数信息

1. License管理 中获取App ID License KeyLicense Token

域名:创建项目时填写的域名信息,只可以在该域名下使用此 License。
注意:
请确保使用与开发域名匹配的 License Key 和 License Token,否则鉴权会失败,无法正常初始化 SDK。

准备签名信息

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

签名方法鉴权流程




Token:用于 SDK 接口签名,是您身份的唯一标识。
App ID:APP ID在Beauty AR控制台中展示。
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
}

SDK 接入

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

流程说明

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




安装 SDK

本 SDK 使用 npm 包提供 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

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

使用 SDK

设置美颜和特效
详情可参见 设置美颜和特效
人像分割
详情请参见 使用人像分割
3D 特效
详情请参见 设置美颜和特效
Animoji 表情与虚拟形象
详情请参见 使用表情和虚拟形象

参数与方法说明

请参见 API 文档

代码示例

请参见 快速上手

在技术社区提问