<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/1.0.26-4/webar-sdk.umd.js"></script>
<script src="https://webar-static.tencent-cloud.com/docs/examples/js-sha256/0.9.0/sha256.min.js"></script>

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

/**
 * Tencent Cloud account's APPID
 * 
 * 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
 * 
 * obtained from Before You Start
 */
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
 * https://trtc.io/document/50099?platform=web&product=beautyar#e4ce3483-41f7-4391-83ae-f4b61e221ea0
 */
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.
 * eg:
 * 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 };
};


// ar sdk config
const config = {
    module: {
        beautify: true,
    },
    auth: {
        licenseKey: LICENSE_KEY,
        appId: APPID,
        authFunc: getSignature
    },
    // Built-in Camera method is used to set the input;
    // for Custom Stream methods, please refer to. https://trtc.io/document/50102?platform=web&product=beautyar
    camera: {
        width: 1080,
        height: 720,
        mirror: true,
    },
}

// new ArSdk
const { ArSdk } = window.AR;
const ar = new ArSdk(config);
ar.on('error', (e) => {
    console.log(e);
});

let makeupList, stickerList, filterList, avatarList, animojiList
let customEffectList
ar.on('created', async () => {
    const presetEffectList = await ar.getEffectList({
        Type: 'Preset'
    })
    makeupList = presetEffectList.filter(item => item.Label.indexOf('Makeup') >= 0)
    stickerList = presetEffectList.filter(item => item.Label.indexOf('Sticker') >= 0)
    filterList = await ar.getCommonFilter() 
    animojiList = await ar.getAvatarList('AR')
    avatarList = await ar.getAvatarList('VR') 

    // In scenarios with custom materials, set the Type to 'Custom' to retrieve the custom materials. See
    // https://trtc.io/zh/document/53887?platform=web&product=beautyar
    customEffectList = await ar.getEffectList({
        Type: 'Custom'
    })
});

// set Makeup, Sticker, and all custom effects
function onEffectClick(id){
    ar.setEffect({
      id,
      filterIntensity: 0.5 // The intensity of built-in filters in Makeup effect.
    })
}
// set Filter
function onFilterClick(id){
    ar.setFilter(id)
}
// set Animoji or Avatar
function onAvatarClick(mode, id){
    ar.setAvatar({
      mode, // AR or VR
      effectId: id,
      backgroundUrl: mode === "VR" ? 'https://webar-static.tencent-cloud.com/avatar-3d/backgrounds/bg1.jpeg' : null // Only For VR
    })
}
// set Beautify parameters
function updateBeautifyConfig(config){
    ar.setBeautify(config) // parameters configs see: https://trtc.io/zh/document/50106?platform=web&product=beautyar
}

ar.on('ready', async (e) => {
    // get output stream from ar sdk
    const arOutputStream = await ar.getOutput();
    // view with video element
    const video = document.createElement("video");
    video.setAttribute("id", "webar-output-video");
    video.setAttribute("playsinline", "");
    video.setAttribute("autoplay", "");
    video.setAttribute("style", 'width:600px;height:auto;');
    video.srcObject = arOutputStream;
    document.body.appendChild(video);
});

ar.on('ready', async (e) => {
    // localplayerContainer is the ID of the specified DOM container.
    // eg. <div style="display: inline-block;width: 1280px;height: auto;" id="localplayerContainer"></div>
    const player = await arSdk.initLocalPlayer('localplayerContainer')
    await player.play()
});

    Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:57965     │
   │   - On Your Network:  http://10.91.28.94:57965   │
   │                                                  │
   │   This port was picked because 5000 is in use.   │
   │                                                  │
   │   Copied local address to clipboard! 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webar face filter demo</title>
</head>

<body>
    <div id="controls" style="margin-bottom: 20px;">
        <button type="button" onclick="onEffectClick('sticker')">set Sticker</button>
        <button type="button" onclick="onEffectClick('makeup')">set Makeup</button>
        <button type="button" onclick="onFilterClick()">set Filter</button>
        <button type="button" onclick="updateBeautifyConfig()">set Beautify</button>
        <button type="button" onclick="onAvatarClick('AR')">set Avatar</button>
        <button type="button" onclick="onAvatarClick('VR')">set Animoji</button>
    </div>
    <script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>
    <script src="https://webar-static.tencent-cloud.com/docs/examples/js-sha256/0.9.0/sha256.min.js"></script>
    <script>
        const APPID = '';
        const LICENSE_KEY = '';
        const token = '';
        const getSignature = function () {
            const timestamp = Math.round(new Date().getTime() / 1000);
            const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();
            return {
                signature,
                timestamp
            };
        };
        const config = {
            module: {
                beautify: true,
            },
            auth: {
                licenseKey: LICENSE_KEY,
                appId: APPID,
                authFunc: getSignature
            },
            camera: {
                width: 1080,
                height: 720,
                mirror: true,
            },
        }
        const { ArSdk } = window.AR;
        const ar = new ArSdk(config);
        ar.on('error', (e) => {
            console.log(e);
        });

        let makeupList, stickerList, filterList, avatarList, animojiList
        let customEffectList
        ar.on('created', async () => {
            const presetEffectList = await ar.getEffectList({
                Type: 'Preset'
            })
            makeupList = presetEffectList.filter(item => item.Label.indexOf('Makeup') >= 0)
            stickerList = presetEffectList.filter(item => item.Label.indexOf('Sticker') >= 0)
            filterList = await ar.getCommonFilter()
            animojiList = await ar.getAvatarList('AR')
            avatarList = await ar.getAvatarList('VR')

            // In scenarios with custom materials, set the Type to 'Custom' to retrieve the custom materials. See
            // https://trtc.io/zh/document/53887?platform=web&product=beautyar
            customEffectList = await ar.getEffectList({
                Type: 'Custom'
            })
        });

        function onEffectClick(type) {
            ar.setEffect({
                id: type === 'sticker' ? stickerList[0].EffectId : makeupList[0].EffectId,
                filterIntensity: 0.5 // The intensity of built-in filters in Makeup effect.http://localhost:64226 
            })
        }
        // set Filter
        function onFilterClick() {
            ar.setFilter(filterList[0].EffectId)
        }
        // set Animoji or Avatar
        function onAvatarClick(mode, id) {
            ar.setAvatar({
                mode, // AR or VR
                effectId: mode === "AR" ? animojiList[0].EffectId : avatarList[0].EffectId,
                backgroundUrl: mode === "VR" ? 'https://webar-static.tencent-cloud.com/avatar-3d/backgrounds/bg1.jpeg' : null // Only For VR
            })
        }
        // set Beautify parameters
        function updateBeautifyConfig() {
            // parameters configs see: https://trtc.io/zh/document/50106?platform=web&product=beautyar
            ar.setBeautify({
                "whiten": Math.random(),
                "dermabrasion": Math.random(),
                "usm": Math.random(),
                "shave": Math.random(),
                "eye": Math.random(),
                "chin": Math.random()
            }) 
        }
        ar.on('ready', async (e) => {
            // get output stream from ar sdk
            const arOutputStream = await ar.getOutput();
            // view with video element
            const video = document.createElement("video");
            video.setAttribute("id", "webar-output-video");
            video.setAttribute("playsinline", "");
            video.setAttribute("autoplay", "");
            video.setAttribute("style", 'width:600px;height:auto;');
            video.srcObject = arOutputStream;
            document.body.appendChild(video);
        });
    </script>
</body>

</html>