tencent cloud

All product documents
Tencent Effect SDK
DocumentationTencent Effect SDKBeauty AR WebSDK IntegrationOverview
Overview
Download PDF
Last updated: 2024-06-12 17:37:26
Overview
Last updated: 2024-06-12 17:37:26
Download PDF
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

Sample Code

Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon