レイアウト

複数のデジタルヒューマンを表示する場合は、コンテインドレイアウトモードが最適です。HTMLで2つの異なるIDを指定し、それぞれのオプションのcontainedElementIdNameに渡す必要があります。デジタルヒューマンが互いに重ならないように、適切なCSSを使用してください。

HTML

<div class="first_container">
    <div id="firstDigitalHumanLayout"></div>
</div>

<div class="second_container">
    <div id="secondDigitalHumanLayout"></div>
</div>

クラス

必要なオプションを指定して、Uneeqクラスのインスタンスを2つ作成します。

let firstDigitalHumanOptions = {
    connectionUrl: "<https://api.uneeq.io>",
    personaId: "149f1f29-553e-46e5-a6cc-11dd58da854e",
    layoutMode: "contained",
    autoStart: true,
    containedElementIdName: "firstDigitalHumanLayout"
};

const firstDigitalHuman = new Uneeq(firstDigitalHumanOptions);

let secondDigitalHumanOptions = {
    connectionUrl: "<https://api.uneeq.io>",
    personaId: "aa47905f-501a-4050-af68-d27b10a08b4a",
    layoutMode: "contained",
    autoStart: true,
    containedElementIdName: "secondDigitalHumanLayout"
};

const secondDigitalHuman = new Uneeq(secondDigitalHumanOptions);

メッセージ

複数のデジタルヒューマンでメッセージを取得する場合、一方のデジタルヒューマンが他方のメッセージを処理しないように、frameIdでフィルタリングする必要があります。

// Uneeqメッセージを処理するイベントリスナー
window.addEventListener('UneeqMessage', (event) => {
    const msg = event.detail;

    // 最初のデジタルヒューマンからのメッセージかチェック
    if (msg.frameId === firstDigitalHuman.frameId) {
        console.log('First Digital Human:', msg)
    }

    // 2番目のデジタルヒューマンからのメッセージかチェック
    if (msg.frameId === secondDigitalHuman.frameId) {
        console.log('Second Digital Human:', msg)
    }
});

コードサンプル

<html>
    <head>
        <title>Multi Human Test</title>
        <style>
            body {
                margin: 0;
                display: flex;
                height: 100vh;
            }
            .first_container {
                width: 50%;
                height: 100vh;
                background-color: #f9f9f9;
                border-right: 2px solid #ddd;
                box-sizing: border-box;
                padding: 20px;
            }
            .second_container {
                width: 50%;
                height: 100vh;
                background-color: #f3f3f3;
                box-sizing: border-box;
                padding: 20px;
            }
        </style>
    </head>

    <body>
        <div class="first_container">
            <div id="firstDigitalHumanLayout"></div>
        </div>

        <div class="second_container">
            <div id="secondDigitalHumanLayout"></div>
        </div>

        <script src="<https://cdn.uneeq.io/hosted-experience/deploy/index.js>"></script>
        <script>
            let firstDigitalHumanOptions = {
                connectionUrl: "<https://api.uneeq.io>",
                personaId: "ペルソナID A",
                displayCallToAction: false,
                renderContent: true,
                mobileViewWidthBreakpoint: 900,
                layoutMode: "contained",
                cameraAnchorPosition: "center",
                logLevel: "info",
                enableMicrophone: false,
                showUserInputInterface: true,
                enableVad: false,
                enableInterruptBySpeech: false,
                autoStart: true,
                containedAutoLayout: true,
                showClosedCaptions: true,
                captionsPosition: "bottom-left",
                languageStrings: {},
                customMetadata: {},
                speechRecognitionHintPhrasesBoost: 0,
                containedElementIdName: "firstDigitalHumanLayout"
            };

            const firstDigitalHuman = new Uneeq(firstDigitalHumanOptions);

            let secondDigitalHumanOptions = {
                connectionUrl: "<https://api.uneeq.io>",
                personaId: "ペルソナID B",
                displayCallToAction: false,
                renderContent: true,
                mobileViewWidthBreakpoint: 900,
                layoutMode: "contained",
                cameraAnchorPosition: "center",
                logLevel: "info",
                enableMicrophone: false,
                showUserInputInterface: true,
                enableVad: false,
                enableInterruptBySpeech: false,
                autoStart: true,
                containedAutoLayout: true,
                showClosedCaptions: true,
                captionsPosition: "bottom-left",
                languageStrings: {},
                customMetadata: {},
                speechRecognitionHintPhrasesBoost: 0,
                containedElementIdName: "secondDigitalHumanLayout"
            };

            const secondDigitalHuman = new Uneeq(secondDigitalHumanOptions);

            // メッセージを処理するイベントリスナー
            window.addEventListener('UneeqMessage', (event) => {
                const msg = event.detail;

                // 最初のデジタルヒューマンからのメッセージかチェック
                if (msg.frameId === firstDigitalHuman.frameId) {
                    console.log('First Digital Human:', msg)
                }

                // 2番目のデジタルヒューマンからのメッセージかチェック
                if (msg.frameId === secondDigitalHuman.frameId) {
                    console.log('Second Digital Human:', msg)
                }
            });
        </script>
    </body>
</html>

お役に立ちましたか？

😞

😐

🤩

最終更新日 February 26, 2025

マルチプル 表示

レイアウト

HTML

クラス

メッセージ

コードサンプル

マルチプル表示