人脸特效集成指南

准备工作
请阅读 Web 美颜特效 SDK  License申请，熟悉 License 申请及使用，准备好 License。
请阅读 Web 美颜特效 SDK 接入指南，熟悉 SDK 的基本用法。
开始使用
步骤1：Web 美颜特效 SDK 引入
创建一个 ar-demo.html 文件，引入下述依赖 js 文件。
<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 标签方式引入，您也可以参考 接入指南 中的方法，用 npm 包的方式引入。
webar-sdk.umd.js 为主包，是必须的。
sha256.min.js 是获取 Signature 签名时候用的包，此处仅作为 demo 项目演示用。
步骤2：初始化 Web 美颜特效 SDK
将上述 准备工作 中获取的 APPID、LICENSE_KEY 及 token，填写到下述示例代码中：
/** ----- 鉴权配置 ----- */
﻿
/**
 * 腾讯云账号 APPID
 * 
 * 进入[腾讯云账号中心](https://console.cloud.tencent.com/developer) 即可查看 APPID
 */
const APPID = ''; // 此处请填写您自己的参数
﻿
/**
 * Web LicenseKey
 * 
 * 上述准备工作中创建的 license
 */
const LICENSE_KEY = ''; // 此处请填写您自己的参数
﻿
/**
 * 计算签名用的密钥 Token
 * 
 * 注意：此处仅用于 DEMO 调试，正式环境中请将 Token 保管在服务端，签名方法迁移到服务端实现，通过接口提供，前端调用拉取签名，参考
 * 获取签名信息（https://trtc.io/zh/document/50099?platform=web&product=beautyar#e4ce3483-41f7-4391-83ae-f4b61e221ea0）
 */
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 };
};
﻿
// ar sdk 基础配置参数
const config = {
    module: {
        beautify: true,
    },
    auth: {
        licenseKey: LICENSE_KEY,
        appId: APPID,
        authFunc: getSignature
    },
    // 此处使用内置 Camera 方式设置输入；自定义流的方式请参考 https://trtc.io/zh/document/50102?platform=web&product=beautyar
    camera: {
        width: 1080,
        height: 720,
        mirror: true,
    },
}
﻿
// config 传入 ar sdk，初始化 ArSdk 实例
const { ArSdk } = window.AR;
const ar = new ArSdk(config);
ar.on('error', (e) => {
    console.log(e);
});
步骤3：获取内置、自定义特效列表
sdk created 回调里可以获取内置或自定义特效列表，内置特效通过不同的标签区分，可选值有 美妆，贴纸，滤镜，VR，AR，对应不同的特效类型。
我们也建议客户有自定义特效需求时，通过不同的标签管理素材，参考 自定义素材制作。
let makeupList, stickerList, filterList, avatarList, animojiList
let customEffectList
// created回调里可以获取内置素材列表
ar.on('created', async () => {
    // 获取内置美妆、贴纸素材
    const presetEffectList = await ar.getEffectList({
        Type: 'Preset'
    })
    makeupList = presetEffectList.filter(item => item.Label.indexOf('美妆') >= 0) // 内置美妆列表
    stickerList = presetEffectList.filter(item => item.Label.indexOf('贴纸') >= 0) // 内置贴纸列表
    // 获取内置滤镜列表
    filterList = await ar.getCommonFilter() 
    // 获取内置 Animoji 列表
    animojiList = await ar.getAvatarList('AR')
    // 获取内置 Avatar 列表 
    avatarList = await ar.getAvatarList('VR') 
﻿
    // 有自定义素材的场景，设置 Type 为 'Custom' 以获取自定义素材
    // 自定义素材制作参考：https://trtc.io/zh/document/53887?platform=web&product=beautyar
    customEffectList = await ar.getEffectList({
        Type: 'Custom'
    })
});
步骤4：设置特效
可以通过下述接口设置美颜、滤镜、特效等素材，接口参数参考 接口文档。
setEffect 设置美妆，贴纸，以及所有的自定义特效。
setFilter 设置滤镜
setAvatar 设置 Animoji 或者 Avatar
setBeautify 设置美颜参数
// 设置美妆，贴纸，以及所有的自定义特效
function onEffectClick(id){
    ar.setEffect({
      id,
      filterIntensity: 0.5 // 美妆素材中内置的滤镜强度
    })
}
// 设置滤镜
function onFilterClick(id){
    ar.setFilter(id)
}
// 设置 Animoji 或者 Avatar
function onAvatarClick(mode, id){
    ar.setAvatar({
      mode, // AR 或 VR
      effectId: id,
      backgroundUrl: mode === "VR" ? 'https://webar-static.tencent-cloud.com/avatar-3d/backgrounds/bg1.jpeg' : null // 仅 VR 模式生效
    })
}
// 设置美颜参数
function updateBeautifyConfig(config){
    ar.setBeautify(config) // 美颜参数可配置项参考 API 文档 https://trtc.io/zh/document/50106?platform=web&product=beautyar
}
步骤5：预览效果
sdk ready 中获取处理后的 mediaStream 流， 通过 Video 标签预览效果。
说明：
不同的生命周期获取的输出流，预览效果不同，详情参考 加载优化 文档中的说明，此处仅以 ready 回调为例。
ar.on('ready', async (e) => {
    // 获取ar sdk 输出的流
    const arOutputStream = await ar.getOutput();
    // 在 video 标签中预览效果
    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);
});
也支持通过 initLocalPlayer 的方式预览，该接口提供一个便捷的，预览 SDK 输出效果的方式，将 SDK 输出的媒体流以 video 的方式，在指定的 dom 容器中播放。
ar.on('ready', async (e) => {
    // localplayerContainer 为指定的 dom 容器 id，
    // 例如 html 中 <div style="display: inline-block;width: 1280px;height: auto;" id="localplayerContainer"></div>
    const player = await arSdk.initLocalPlayer('localplayerContainer')
    await player.play()
});
步骤6：运行 Demo
启动一个本地 server 服务，访问指定的端口。
此处以 serve 模块 启用为例，在 demo 所在目录执行 serve .
看到以下输出表示本地 server 服务启动成功。
    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! 
浏览器访问上述端口，预览效果。
注意：
Demo 依赖浏览器摄像头及麦克风权限，请确保访问的页面已授权。
完整的代码片段如下，运行前请补全代码中的 APPID、 LICENSE_KEY、及 token 相关信息：
<!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 demo</title>
</head>
﻿
<body>
    <div id="controls" style="margin-bottom: 20px;">
        <button type="button" onclick="onEffectClick('sticker')">设置贴纸</button>
        <button type="button" onclick="onEffectClick('makeup')">设置美妆</button>
        <button type="button" onclick="onFilterClick()">设置滤镜</button>
        <button type="button" onclick="updateBeautifyConfig()">设置美颜</button>
        <button type="button" onclick="onAvatarClick('AR')">设置Avatar</button>
        <button type="button" onclick="onAvatarClick('VR')">设置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,
            },
        }
        // config 传入 ar sdk，初始化 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
        // created回调里可以获取内置素材列表
        ar.on('created', async () => {
            // 获取内置美妆、贴纸素材
            const presetEffectList = await ar.getEffectList({
                Type: 'Preset'
            })
            makeupList = presetEffectList.filter(item => item.Label.indexOf('美妆') >= 0) // 内置美妆列表
            stickerList = presetEffectList.filter(item => item.Label.indexOf('贴纸') >= 0) // 内置贴纸列表
﻿
            filterList = await ar.getCommonFilter() // 内置滤镜列表
﻿
            animojiList = await ar.getAvatarList('AR') // 内置 Animoji 列表
            avatarList = await ar.getAvatarList('VR') // 内置 Avatar 列表
﻿
            // 有自定义素材的场景，设置 Type 为 'Custom' 以获取自定义素材
            // 自定义素材制作参考：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 // 美妆素材中内置的滤镜强度
            })
        }
        // 设置滤镜
        function onFilterClick() {
            ar.setFilter(filterList[0].EffectId)
        }
        // 设置 Animoji 或者 Avatar
        function onAvatarClick(mode, id) {
            ar.setAvatar({
                mode, // AR 或 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 // 仅 VR 模式生效
            })
        }
        // 设置美颜参数
        function updateBeautifyConfig() {
            // 美颜参数可配置项参考 API 文档 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) => {
            // 获取ar sdk 输出的流
            const arOutputStream = await ar.getOutput();
            // 在 video 标签中预览效果
            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>