Virtual Try-On Integration Guide

準備作業
Web Beauty AR SDK Licenseの申請を読み、Licenseの申請と使用に慣れ、Licenseを準備してください。
Web Beauty AR SDK アクセスガイドを読み、SDKの基本的な使用方法をご覧ください。
使用開始
ステップ1：Web Beauty AR 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 Beauty AR SDKを初期化
上記の準備作業で取得したAPPID、LICENSE_KEY、およびtokenを、以下のサンプルコードに記入します：
/** ----- 認証設定 -----  */

/**
 * Tencent CloudアカウントのAPPID
 * 
 * [Tencent Cloudアカウントセンター](https://console.cloud.tencent.com/developer)でAPPIDを確認可能
 */
const APPID = ''; // ここには自分のパラメータを入力

/**
 * Web LicenseKey
 * 
 * 上記の準備作業で作成したLicense
 */
const LICENSE_KEY = ''; // ここには自分のパラメータを入力

/**
 * 署名に使用するシークレットTokenの計算
 * 
 * 注意：ここはデモのデバッグ用のみです。本番環境では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 .を実行します。
以下の出力が表示されればローカルサーバーサービスの起動が成功しています。
   |   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>