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

/** ----- 鉴权配置 ----- */

/**
 * 腾讯云账号 APPID
 * 
 * 进入[腾讯云账号中心](https://console.tencentcloud.com/developer) 即可查看 APPID
 */
const APPID = ''; // 此处请填写您自己的参数

/**
 * Web LicenseKey
 * 
 * 登录音视频终端 SDK 控制台的[Web License 管理](https://console.tencentcloud.com/vcube/web)，创建项目即可获得 LicenseKey
 */
const LICENSE_KEY = ''; // 此处请填写您自己的参数

/**
 * 计算签名用的密钥 Token
 * 
 * 注意：此处仅用于 DEMO 调试，正式环境中请将 Token 保管在服务端，签名方法迁移到服务端实现，通过接口提供，前端调用拉取签名，参考
 * [签名方法](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 = ''; // 此处请填写您自己的参数

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

/**
 * 定义获取签名方法
 *
 * 注意：此处方案仅适用于 DEMO 调试，正式环境中签名方法推荐在服务端实现，通过接口提供，前端调用拉取签名
 * 如：
 * 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 };
};

// 获取 trtc 未处理过的的视频流
const arInputStream = new MediaStream([trtc.getVideoTrack()]);

// ar sdk 基础配置参数
const config = {
    input: arInputStream,
    auth: {
        licenseKey: LICENSE_KEY,
        appId: APPID,
        authFunc: getSignature
    },
    // 初始美颜效果（可选参数）
    beautify: {
        whiten: 0.1, // 美白 0-1
        dermabrasion: 0.5, // 磨皮 0-1
        lift: 0.3, // 瘦脸 0-1
        shave: 0, // 削脸 0-1
        eye: 0, // 大眼 0-1
        chin: 0, // 下巴 0-1
    }
}

// config 传入 ar sdk
const ar = new ArSdk(config);

// created回调里可以获取内置特效与滤镜列表进行界面展示
ar.on('created', () => {
    // 获取内置美妆、贴纸
    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('美妆')>=0)
        const stickerList = list.filter(item=>item.label.indexOf('贴纸')>=0)

    }).catch((e) => {
        console.log(e);
    });
    // 获取内置滤镜
    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,
        }));
    }).catch((e) => {
        console.log(e);
    });
});

ar.on('ready', (e) => {
    // 在 ready 回调里及该事件之后，可使用下述接口来设置相应的美颜特效
    // ar.setBeautify() 设置美颜
    // ar.setEffect() 设置美妆、贴纸
    // ar.setFilter() 设置滤镜
    
    // 更新 trtc 的视频流
    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();
// 更新 trtc 的视频流
await trtc.updateLocalVideo({
  option: { videoTrack: mediaStream.getVideoTracks()[0] },
});