Overview

This document describes how to quickly and securely connect to Beauty AR Web and use its features.
Preparations
Before connecting to the SDK, make sure you have purchased a web license and created a project as instructed in Adding and Renewing a License (Web).
Getting parameter information
Getting the license key and token
In the RT-Cube console, select License management > Web Licenses, view the web license you created, and copy its license key and token.
﻿
﻿
﻿
Web Domain: The domain information entered during project creation. The license can be used only under this domain.
Mini Program AppID: The mini program information entered during project creation. The license can be used only in this mini program.
Note:
Be sure to use the license key and token that match the developed domain and mini program; otherwise authentication will fail, and the SDK cannot be properly initialized.
Getting the APPID
Log in to the Tencent Cloud console and go to Account Info > Basic Info to view the APPID.
﻿
﻿
﻿
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 Account Info > Basic Info in the Tencent Cloud 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 or your mini program 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 for web and Weixin mini programs 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
The ways in which the SDK is initialized in a Weixin mini program and on web are slightly different.
The SDK can be integrated into a mini program as instructed in Integration into Mini Program.
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
All materials of the SDK are compatible with both Weixin mini programs and web and are called in the same way. For more information, see Configuring Filters and Effects.
Keying (new in v0.2.0)
The keying feature allows you to segment and change the background in the image. For details, see Configuring Keying.
3D effects (new in v0.3.0)
This feature is supported for both Weixin mini programs and web and can be called in the same way as configuring special effects. For more information, see Configuring Filters and Effects.
Animojis and virtual avatars (new in v0.3.0)
This capability relies on a WebGL2 environment. Currently, it is supported only on web. For more information, see Using Animojis and Virtual Avatars.
Parameters and APIs
See Parameters and APIs.
Sample Code
See Quick Start.