SDKをつかってオリジナルページをつくる

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

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

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

⚠️
SDKを使用したデジタルヒューマン体験の構築にはWEBに関連する技術、WebRTCに関連する技術、音声認識、音声合成、会話AIなど、さまざまな技術的な知識と開発が必要です。弊社ではホステッドエクペリエンスを使用することをおすすめしています。

アプリの例

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

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

 

インストール

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

npm install uneeq-js
 

初期化

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

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

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

 

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

プロパティ
説明
conversationId
会話を開始したいペルソナを識別する ID です。PersonaId は、カスタマーサクセスチームがこの ID を提供します。
48f0d553-f1ab-49c2-92d5-50328dad6041
url
ペルソナがプロビジョニングされているデジタルヒューマンプラットフォームのリージョンへのURLです。URL の一覧はこちらからご覧いただけます。
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 を指定する必要があります。通常はNorth Americaに格納されます。

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

 

音声送信

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)を受け取ることができます。これらのエラーは常に致命的なものではなく、ネットワーク接続が断続的であるなどの一時的なエラーである可能性もあります。しかし、これらのセッションエラーメッセージを監視し、致命的なエラーがないかどうかを確認することは重要です。以下のエラーメッセージは致命的なものです。

コネクションロストメッセージ

ConnectionLostMessage(connectionState: PublishSubscribeState)メッセージを受け取った場合、致命的なエラーが発生し、デジタルヒューマンとの接続が失われたことを意味します。

ユーザーエクスペリエンスでは、エラーによりセッションが終了したことをユーザーに通知する必要があります。

セッション終了メッセージ

致命的なセッションエラーメッセージを受信した場合、SessionEndedMessage()を受け取ることがあります。SDK.endSession()を呼び出しておらず、このメッセージを受け取った場合、ユーザーにエラーによりセッションが終了したことを通知する必要があります。

 

SDKリファレンス | SDK reference

SDKは最新版を参照してください。

SDKリリースノート | SDKRelease Notes

Uneeq-jsに関連するリリースノートについては、以下を参照してください。

 

SDKに対するサポートについて

SDKのサポートは、さまざまな技術的な知識と開発の要素を含んでいます。サポートには、お客様と弊社の両方に多くの工数が必要です。スムーズに対応するためには、システム構成図やコードなどを提供、説明していただく必要があります。必要に応じてご提供いただけない場合は、回答を致しません。

さらに、SDKサポートはプロプラン以上をご契約いただいているお客さまにのみ提供しています。

お役に立ちましたか?
😞
😐
🤩

最終更新日 June 17, 2023