tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Effect SDK
    Documentation
    Download PDF

    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. 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

      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
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy