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 };
};

let w = 1280;
let h = 720;

// The basic settings for the Tencent Effect SDK
const config = {
    camera: { //This indicates that the SDK will capture streams from the camera.
        width: 1280,
        height:720
    },
    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
        renderMakeupList(makeupList);
        renderStickerList(stickerList);

    }).catch((e) => {
        console.log(e);
    });
    // Get the built-in filters
    ar.getCommonFilter().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,
        }));

        // Show the filter list
        renderFilterList(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.

    //  For example, you can use `range input` to set the smooth skin effect:
    $('#dermabrasion_range_input').change((e) => {
        ar.setBeautify({
            dermabrasion: e.target.value, // The smooth skin effect. Value range: 0-1.
        });
    });

    // In the `created` callback, apply the effects based on user interactions with the makeup effect and sticker lists. The `setEffect` API supports three types of request parameters. For details, see the SDK integration guide.
    $('#makeup_list li').click(() => {
        ar.setEffect([{id: effect.id, intensity: 1}]);
    });
    $('#sticker_list li').click(() => {
        ar.setEffect([{id: effect.id, intensity: 1}]);
    });

    // In the `created` callback, apply the filter based on user interactions with the filter list. The value `1` for the second parameter of `setFilter` indicates the filter strength. For details, see the SDK integration guide.
    ar.setFilter(filterList[0].id, 1);
    $('#filter_list li').click(() => {
        ar.setFilter(filter.id, 1);
    });
});

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

// Get the output stream of the Tencent Effect SDK
const arStream = await this.ar.getOutput();

const audioSource = arStream.getAudioTracks()[0];
const videoSource = arStream.getVideoTracks()[0];

// create a local stream with audio/video from custom source
this.localStream_ = TRTC.createStream({
    audioSource,
    videoSource
});


const cameraApi = this.ar.camera;
// Get the device list
const devices = await cameraApi.getDevices()
console.log(devices)
// Switch to a different camera
// await cameraApi.switchDevice('video', 'your-video-device-id')
// Disable the video track
// cameraApi.muteVideo()
// Enable the video track
// cameraApi.unmuteVideo()
// Disable the audio track
// cameraApi.muteAudio()
// Enable the audio track
// cameraApi.unmuteAudio()
// Stop the camera
// cameraApi.stop()
// Restart the camera
// await cameraApi.restart()


// Use the built-in player of the SDK. `my-dom-id` is the ID of the player’s container.
const player = await sdk.initLocalPlayer('my-dom-id')
// Play the video
await player.play()
// Pause the video
player.pause()