Docs Overview/
Beauty AR/
Web/
Get Started/
Integration/
Overview/

Overview

This document describes how to quickly and securely connect to Beauty AR Web and use its features. If you have any questions, please contact us

Preparations

Before connecting to the SDK, make sure you have purchased a web license and created a project as instructed in Activate the Service.

Getting parameter information

1. Getting the App Id, license key and token from License Management



Web Domain: The domain information entered during project creation. The license can be used only under this domain.
Note:
Be sure to use the license key and token that match the developed domain, otherwise authentication will fail, and the SDK cannot be properly initialized.

Preparing signing information

In addition to the license key that is needed to authorize the SDK, you also need to use the token to sign the APIs called in the SDK.

Signature algorithm authentication process




Token: Your unique ID, which is used to sign SDK APIs.
App ID: The APPID displayed in the Beauty AR console.
Timestamp: The current time accurate to the second (10 digits). 
Signature: The signature used for signing, which expires after five minutes.

Deploying a signature service

Because the signature expires after a given time, and to prevent the token from being leaked, you need to deploy a signature generation service.
Note:
If the token is leaked, your identity will be stolen, which will lead to your resources also being leaked.
If the signature generation method is implemented on the frontend, the token may be leaked. Therefore, to safeguard your security, we recommend that you do not implement signature generation on the frontend.
// Taking the `express` backend as an example,
// Signature algorithm: sha256(timestamp+token+appid+timestamp)

const { createHash } = require('crypto');
const config = {
    appid: 'Your Tencent Cloud `APPID`',
    token: 'Your 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(); // Use the token and APP ID obtained above to generate an encrypted string and return it
    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);
})

Calling the signature service on the frontend

After deploying the signature service, add a signature acquisition method to your webpage for the SDK to connect to and call.
Web
Mini program
async function getSignature() {
    const res = await fetch('Your domain/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: 'Your domain/get-ar-sign',
        method: 'GET',
        success(res) {
          console.log('getSignature ok', res)
          resolve(res.data);
        },
        fail(e){
            console.log('getSignature error', e)
        }
      })
    })
}

SDK Integration

After completing the above preparations, follow the process below to connect to and use the SDK.

Process description

The Tencent Effect web SDK offers simple and minimally invasive APIs. To integrate it and use its features, you only need to initialize an instance and add the render node to your webpage.




Installing the SDK

The SDK is offered as an npm package.
npm install tencentcloud-webar
In addition, you can also use it for your project by importing JS.
<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>

Initializing the SDK

For web integration, we offer two initialization modes for the SDK.
Built-in camera and player: The device's built-in camera and player are used. API calls are easy and fast, with rich interactive features.
Custom streams: You can use this mode if you want to apply effects to your own streams or want greater flexibility and control.

Using the SDK

Configuring beauty filters and special effects
For more information, see Configuring Filters and Effects.
Segmentation
The keying feature allows you to segment and change the background in the image. For details, see Configuring Segmentation.
3D effects
For more information, see Configuring Filters and Effects.
Animojis and virtual avatars
This capability relies on a WebGL2 environment. For more information, see Configuring Animojis and Virtual Avatars.

Parameters and APIs

Sample Code