文档概览/
Beauty AR/
Web/
最佳实践/
虚拟试穿戴集成指南/

虚拟试穿戴集成指南

准备工作

请阅读 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 及 oken，填写到下述示例代码中：
/** ----- 鉴权配置 ----- */

/**
 * 腾讯云账号 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,
        handLandmark: true // 戒指试戴需要开启 handLandmark 模块
    },
    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 回调里可以获取内置或自定义特效列表，内置特效通过不同的标签区分，常见的标签类型有：
Makeup：整套妆容
Blush：腮红
Eyes：眼妆
Eyebrows：眉毛
Lips：唇妆
Iris：美瞳
glasses：眼镜
rings：戒指
Headwear：头戴素材（帽子，头戴耳机等）
我们也建议客户有自定义特效需求时，通过不同的标签管理素材，参考 自定义素材制作。
let makeupList, glassesList, contactLensesList,  headwearList, ringList
let customEffectList
// created回调里可以获取内置素材列表
ar.on('created', async () => {
    // 获取内置女性类美妆
    makeupList = await ar.getEffectList({
        Type: 'Preset',
        Label: ['Makeup', 'Woman']
    })
    // 获取内置眼镜美妆
    glassesList = await ar.getEffectList({
        Type: 'Preset',
        Label: ['glasses']
    })
    // 获取内置美瞳美妆
    contactLensesList = await ar.getEffectList({
        Type: 'Preset',
        Label: ['Iris']
    })
    // 获取内置头戴素材
    headwearList = await ar.getEffectList({
        Type: 'Preset',
        Label: ['Headwear']
    })
    // 获取内置戒指素材
    ringList = await ar.getEffectList({
        Type: 'Preset',
        Label: ['rings']
    })

    // 有自定义素材的场景，设置 Type 为 'Custom' 以获取自定义素材
    // 自定义素材制作参考：https://trtc.io/zh/document/53887?platform=web&product=beautyar
    customEffectList = await ar.getEffectList({
        Type: 'Custom'
    })
});

步骤4：设置特效

可以通过通过 setEffect 设置各类美妆、眼镜、戒指、头戴素材，以及所有的自定义特效，接口参数参考 接口文档。
// 设置美妆素材
function setMakeup() {
    ar.setEffect({
        id: makeupList[0].EffectId,
    })
}
// 设置眼镜素材
function setGlasses() {
    ar.setEffect({
        id: glassesList[0].EffectId,
    })
}
// 设置美瞳素材
function setContactLenses() {
    ar.setEffect({
        id: contactLensesList[0].EffectId,
        intensity: 0.6
    })
}
// 设置头戴素材
function setHeadwear() {
    ar.setEffect({
        id: headwearList[0].EffectId,
    })
}
// 设置戒指素材
function setRings() {
    ar.setEffect({
        id: ringList[0].EffectId,
    })
}
注意：
使用戒指类素材时，需要在 module 配置中，开启 handLandmark 模块，预览时将手掌完全展示在摄像头视野中。

步骤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 virtual try on demo</title>
</head>

<body>
    <div id="controls" style="margin-bottom: 20px;">
        <button type="button" onclick="setMakeup()">设置美妆</button>
        <button type="button" onclick="setGlasses()">设置眼镜</button>
        <button type="button" onclick="setContactLenses()">设置美瞳</button>
        <button type="button" onclick="setHeadwear()">设置头戴</button>
        <button type="button" onclick="setRings()">设置戒指</button>
    </div>
    <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>
    <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,
                handLandmark: true // 戒指试戴需要开启 handLandmark 模块
            },
            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);
            alert(e.message);
        });

        let makeupList, glassesList, contactLensesList,  headwearList, ringList
        let customEffectList
        // created回调里可以获取内置素材列表
        ar.on('created', async () => {
            // 获取内置女性美妆
            makeupList = await ar.getEffectList({
                Type: 'Preset',
                Label: ['Makeup', 'Woman']
            })
            // 获取内置眼镜美妆
            glassesList = await ar.getEffectList({
                Type: 'Preset',
                Label: ['glasses']
            })
            // 获取内置美瞳美妆
            contactLensesList = await ar.getEffectList({
                Type: 'Preset',
                Label: ['Iris']
            })
            // 获取内置头戴素材
            headwearList = await ar.getEffectList({
                Type: 'Preset',
                Label: ['Headwear']
            })
            // 获取内置戒指素材
            ringList = await ar.getEffectList({
                Type: 'Preset',
                Label: ['rings']
            })

            // 有自定义素材的场景，设置 Type 为 'Custom' 以获取自定义素材
            // 自定义素材制作参考：https://trtc.io/zh/document/53887?platform=web&product=beautyar
            customEffectList = await ar.getEffectList({
                Type: 'Custom'
            })
        });

        function setMakeup() {
            ar.setEffect({
                id: makeupList[0].EffectId,
            })
        }
        function setGlasses() {
            ar.setEffect({
                id: glassesList[0].EffectId,
            })
        }
        function setContactLenses() {
            ar.setEffect({
                id: contactLensesList[0].EffectId,
                intensity: 0.6
            })
        }
        function setHeadwear() {
            ar.setEffect({
                id: headwearList[0].EffectId,
            })
        }
        function setRings() {
            ar.setEffect({
                id: ringList[0].EffectId,
            })
        }
        
        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>
WebRTC Trtc Logo
Copyright © 2013-2025 Tencent RTC. All Rights Reserved.
  1. 隐私条款
  3. 法律
  5. Cookie政策
  7. 腾讯云