1つのブラウザタブ内で複数のデジタルヒューマンを実行できます。
1つのブラウザタブ内に2つのデジタルヒューマンを表示
複数のデジタルヒューマンを表示する場合は、コンテインドレイアウトモードが最適です。HTMLで2つの異なるIDを指定し、それぞれのオプションのcontainedElementIdNameに渡す必要があります。デジタルヒューマンが互いに重ならないように、適切なCSSを使用してください。
必要なオプションを指定して、Uneeqクラスのインスタンスを2つ作成します。
複数のデジタルヒューマンでメッセージを取得する場合、一方のデジタルヒューマンが他方のメッセージを処理しないように、frameIdでフィルタリングする必要があります。
最終更新
<div class="first_container">
<div id="firstDigitalHumanLayout"></div>
</div>
<div class="second_container">
<div id="secondDigitalHumanLayout"></div>
</div>
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);
// 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>