Face Filter 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署名を取得する時に使用するパッケージで、ここではデモプロジェクトの例示用です。
ステップ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の計算
 * 
 * 注意：ここはDEMOのデバッグ用のみです。本番環境ではTokenはサーバー側で保管し、署名方法をサーバー側に移行して、インターフェースを通じて提供し、フロントエンドから署名を取得してください。下記のページを参考にしてください
 * 署名情報取得に関する資料(https://trtc.io/zh/document/50099?platform=web&product=beautyar#e4ce3483-41f7-4391-83ae-f4b61e221ea0)
 */
const token = ''; // ここには自分のパラメータを入力

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

/**
 * 署名取得メソッドを定義
 *
 * 注意：このメソッドはデモのデバッグ用のみです。本番環境では署名方法はサーバー側で実装し、インターフェースを通じて提供することをお勧めします
 * 例：
 * 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() 
// 内蔵アニ文字リストを取得
    animojiList = await ar.getAvatarList('AR')
// 内蔵アバターリストを取得 
    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：アニ文字またはアバターを設定。
setBeautify：美顔パラメータを設定。
// 化粧、ステッカー、およびすべてのカスタムエフェクトを設定
function onEffectClick(id){
    ar.setEffect({
      id,
      filterIntensity: 0.5 // 化粧素材に内蔵されているフィルターの強さ
    })
}
// フィルターを設定
function onFilterClick(id){
    ar.setFilter(id)
}
// アニ文字またはアバターを設定
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')">アバターを設定</button>
<button type="button" onclick="onAvatarClick('VR')">アニ文字を設定</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') // 内蔵アニ文字リスト
            avatarList = await ar.getAvatarList('VR') // 内蔵アバターリスト

// カスタム素材がある場合、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)
        }
// アニ文字またはアバターを設定
        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>