BYOエクスペリエンス – SDKをつかってオリジナルページをつくる

Build Your Own（BYO）体験（エクスペリエンス）を提供するために、完全オリジナルなフロントエンドを構築しましょう。ここでは、オリジナルユーザーインターフェース/オリジナルUIを作成する手順を紹介します。

私達はuneeq-js SDKを提供し、デジタルヒューマン体験をあなたのウェブサイトやウェブアプリケーションに、あなたの基準に従ってインストールすることを可能にします。

SDKはそのWebアプリケーションとプラットフォーム間の通信を容易にし、デジタルヒューマンの実装を完全に制御することができます。

アプリの例

ReactとNodeのフロントエンド・アプリケーションのサンプルをご覧ください。

web/node · master · uneeq-oss / examples · GitLab

GitLab.com

https://gitlab.com/uneeq-oss/examples/tree/master/web/node

web/node · master · uneeq-oss / examples · GitLab

次のビデオは、Reactのサンプルを使って起動する方法を示しています。

インストール

npmを使ってインストールするには

npm install uneeq-js

初期化

デジタルヒューマンとの会話を開始するには、オプションパラメータを指定してUneeqクラスの新しいインスタンスを作成する必要があります。

let uneeq = new Uneeq(options);
uneeq.initWithToken(token);

initWithToken()メソッドで使用するトークンは、チャットボットプラットフォームがアクセストークンを要求したときに受け取るものです。

参照：アクセストークン

オプションのパラメータは、デジタルヒューマンプラットフォームが会話を開始するために必要な情報をすべて伝えます。このパラメータには、以下のプロパティを含める必要があります。

プロパティ	説明	例
conversationId	会話を開始したいペルソナを識別する ID です。PersonaId は、UneeQ Creator の Personas エリアで確認できます。それ以外の場合は、カスタマーサクセスチームがこの ID を提供します。	48f0d553-f1ab-49c2-92d5-50328dad6041
url	ペルソナがプロビジョニングされているデジタルヒューマンプラットフォームのリージョンへのURLです。URL の一覧はこちらからご覧いただけます。	https://api.us.uneeq.io
avatarVideoContainerElement	デジタルヒューマン動画が提示されるHTML Div要素。	document.getElementById('remoteVideo')
localVideoContainerElement	ユーザーのローカルカメラが表示されるHTML Div要素。ユーザーのカメラを表示したくない場合は、ユーザーのカメラが表示されるHTML Div要素の値document.createElement('div')	document.getElementById('localVideo')
messageHandler	デジタルヒューマンプラットフォームからリアルタイムメッセージオブジェクトを処理するメソッド	fmMessageHandler (a javascript method you have defined)
playWelcome	ウェルカムメッセージを再生します。オプションのブール値。デフォルトはfalseです。	false
sendLocalVideo	セッション開始時にユーザのローカルビデオストリーム（カメラ）を送信するかどうかを定義します。Boolean型。trueの場合、ユーザーは自分のデバイスの使用を許可する必要があります。デフォルト値はtrueです。	true
sendLocalAudio	セッション開始時にユーザーのローカルオーディオストリーム（マイク）を送信するかどうかを定義します。trueの場合、ユーザーは自分のデバイスの使用を許可する必要があります。Boolean型。デフォルト値は true です。	true

const options = {
    url: 'https: //api.us.uneeq.io',
    conversationId: 'YourPersonaId',
    avatarVideoContainerElement: document.getElementById('your-div-element'),
    localVideoContainerElement: document.getElementById('your-div-element'),
    messageHandler: (msg) => messageHandler(msg),
    playWelcome: false,
    sendLocalVideo: false,
    sendLocalAudio: true
};

リージョンURL

デジタルヒューマンセッションを初期化する際には、デジタルヒューマンがプロビジョニングされている URL を指定する必要があります。

Creatorにアクセスできる場合は、開発者エリアのConnection URLで、正しいURLを見つけることができます。プランやご契約によってはCreatorをご提供していない場合があります。その場合はカスタマーサクセス・チームから提供されます。

Creator

https://creator.uneeq.io/developers

ご自身のデジタルヒューマンがプロビジョニングされている地域がわからない場合は、カスタマーサクセス・チームにお問い合わせください。

Region	URL
North America	https://api.us.uneeq.io
Europe	https://api.eu.uneeq.io
~~Asia~~	~~https://api.sg.uneeq.io~~
Oceania	https://api.au.uneeq.io
Japan	現在準備中です。デジタルヒューマン株式会社までお問い合わせください。

音声送信

JavaScript SDKを使用すると、顧客は「プッシュトゥトーク」対話モードを使用してデジタルヒューマンと話すことができます。

これは、ユーザーがデジタルヒューマンに話しかける間キーボードを押し続けることを意味します。

これを有効にするには、録音の最初と最後に、startRecording()メソッドとtopRecording()メソッドを呼び出す必要があります。

以下の例では、ユーザーがスペースバーを使用して話すことができます。

window.onkeydown = (e) => {
    if( e.code === 'Space' && !e.repeat ) {
        uneeq.startRecording();
    }
};
window.onkeyup = (e) => {
    if( e.code === 'Space' && !e.repeat ) {
        uneeq.stopRecording();
    }
};

会話のイベント

JavaScript SDKを使用すると、現在の会話に関するプラットフォームからのメッセージを購読する(subscribe)ことができます。

これらのメッセージを購読(subscribe)するには、Uneeqクラスをインスタンス化するときに、メソッド参照をパラメーターとして渡す必要があります。

let fmMessageHandler = (msg) => {
    console.log('Uneeq Message: ', msg);
   if( msg.uneeqMessageType === 'Ready' ) {
        //The Digital Human is setup and streaming to the end user
    } else if ( msg.uneeqMessageType === 'AvatarQuestionText' ) {
        //Question asked of the Digital Human
    } else if ( msg.uneeqMessageType === 'AvatarAnswer' ) {
        //Response to the question, including meta data.
    }
};

メッセージの特定のペイロードは、SDKリファレンスドキュメントで定義されています。

サポートブラウザ

本SDKは、Windows 10とMacOS（High Sierra以降）でのChrome、MacOSでのSafariをサポートしています。また、Android（6.0以上）ではChrome、iOS（11以上）ではSafariをモバイルブラウザとしてサポートしています。 SDKのサポートするブラウザは、特に明記されていない限り、最新バージョンのOSで実行されている、最新バージョンのブラウザをサポートしています。

エラーハンドリング

デジタルヒューマンとのセッション中にエラーが発生した場合、SessionErrorMessage(error: string)を受け取ることができます。これらのエラーは常に致命的なものではなく、ネットワーク接続が断続的であるなどの一時的なエラーである可能性もあります。しかし、これらのセッションエラーメッセージを監視し、致命的なエラーがないかどうかを確認することは重要です。以下のエラーメッセージは致命的なものです。