tencent cloud

<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>

const { ArSdk } = window.AR

/** ----- Authentication configuration ----- */

/**
 * The APPID of your Tencent Cloud account.
 * 
 * You can view your APPID in the [Account Center](https://console.tencentcloud.com/developer).
 */
const APPID = ''; // Set it to your Tencent Cloud account APPID.

/**
 * Web LicenseKey
 * 
 * Log in to the RT-Cube console and click [Web Licenses](https://console.tencentcloud.com/vcube/web) on the left sidebar. A license key will be automatically generated after you create a license.
 */
const LICENSE_KEY = ''; // Set it to your license key.

/**
 * The token used to calculate the signature.
 * 
 * Note: This method is only suitable for debugging. In a production environment, you should store the token and calculate the signature on your server. The front end can get the signature by calling an API. For details, see
 * [Signature](https://www.tencentcloud.com/document/product/616/71370?from_cn_redirect=1#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95)
 */
const token = ''; // Set it to your token.

/** ----------------------- */

/**
 * Get the signature
 *
 * Note: This method is only suitable for debugging. In a production environment, you should calculate the signature on your server. The front end can get the signature by calling an API.
 ** Example:
 * async function () {
 *  return fetch('http://xxx.com/get-ar-sign').then(res => res.json());
 * };
 */
const getSignature = function () {
    const timestamp = Math.round(new Date().getTime() / 1000);
    const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();
    return { signature, timestamp };
};

// get trtc video track(original)
const arInputStream = new MediaStream([trtc.getVideoTrack()]);

// The basic settings for the Tencent Effect SDK
const config = {
    input: arInputStream,
    auth: {
        licenseKey: LICENSE_KEY,
        appId: APPID,
        authFunc: getSignature
    },
    // Configure the initial effects (optional)
    beautify: {
        whiten: 0.1, // The brightening effect. Value range: 0-1.
        dermabrasion: 0.5, // The smooth skin effect. Value range: 0-1.
        lift: 0.3, // The slim face effect. Value range: 0-1.
        shave: 0, // The V shape effect. Value range: 0-1.
        eye: 0, // The big eyes effect. Value range: 0-1.
        chin: 0, // The chin effect. Value range: 0-1.
    },
    language: 'en',
    ……
}

// Pass `config` to the Tencent Effect SDK
const ar = new ArSdk(config);

// You can display the effect and filter list in the `created` callback.
ar.on('created', () => {
    // Get the built-in makeup effects and stickers
    ar.getEffectList({
        Type: 'Preset'
    }).then((res) => {
        const list = res.map(item => ({
            name: item.Name,
            id: item.EffectId,
            cover: item.CoverUrl,
            url: item.Url,
            label: item.Label,
            type: item.PresetType,
        }));
        const makeupList = list.filter(item=>item.label.indexOf('Makeup')>=0)
        const stickerList = list.filter(item=>item.label.indexOf('Sticker')>=0)
        // Show the makeup and sticker lists

    }).catch((e) => {
        console.log(e);
    });
    // Get the built-in filters
    ar.getCommonFilter().then((res) => {
        const filterList = res.map(item => ({
            name: item.Name,
            id: item.EffectId,
            cover: item.CoverUrl,
            url: item.Url,
            label: item.Label,
            type: item.PresetType,
        }));
        // Show the filter list

    }).catch((e) => {
        console.log(e);
    });
});

ar.on('ready', (e) => {

    // After receiving the `ready` callback, you can call `setBeautify`, `setEffect`, or `setFilter` to configure effects.
    // ar.setBeautify()
    // ar.setEffect()
    // ar.setFilter()
    
    // update trtc video track (with AR effect)
    const mediaStream = await ar.getOutput();
    await trtc.updateLocalVideo({
      option: { videoTrack: mediaStream.getVideoTracks()[0] },
    });
});

ar.on('error', (e) => {
    console.log(e);
});

const mediaStream = await ar.getOutput();
// update trtc video track (with AR effect)
await trtc.updateLocalVideo({
  option: { videoTrack: mediaStream.getVideoTracks()[0] },
});