Twilioブログ

Media Streamが双方向に対応し、スムーズな音声ボットが作れるようになりました!

こんにちは、Twilio事業部のkatsu.tです。

Twilio Media Streamの双方向通信が可能になりました。これにより、音声ストリームを用いることができるチャットボット構築サービス(Dialogflowなど)と連携することで滑らかな音声ボットを作成することができます。

本記事では、新しくなったTwilio Media StreamとDialogflowを使ったサンプルコードを元に音声ボットを構築していこうと思います。

本記事のデモ動画はこちらから視聴できます。

Media Streamとは

Media Streamsとは、Twilioの通話音声にWebSocketを使用してリアルタイムにアクセスすることができるサービスです。 Media Streamsと他のサービス(TTSや感情分析エンジン)を組み合わせることでリアルタイムな文字起こしや感情分析が可能となります。

必要なもの

・Twilioアカウント

・Googleアカウント

Twilioアカウントの作成

Twilioアカウントをまだ作成していない方は、こちらよりアカウントの作成をお願いします。

無料アカウント作成

Bundlesの設定

電話番号を購入するために、Twilioに個人情報を登録する必要があります。 詳しくは以下の記事をご覧ください。

電話番号の購入

まず、電話番号購入画面を開きます。

All Products & Services

購入したい国を選択して、「検索」をクリックします。

電話番号購入画面

購入したい電話番号を選択して「購入」をクリックします。

電話番号購入画面

電話番号の内容を確認して、「Next」をクリックします。

電話番号購入画面

電話番号をご利用いただく方の属性に合わせて選択し、「Next」をクリックします。
法人のお客様:Business
個人のお客様:Individual

電話番号購入画面

最後にBundlesの設定で作成した内容をそれぞれ選択して、「Buy」をクリックします。

電話番号購入画面

Twilio CLIのセットアップ

Twilio CLIのセットアップについてはこちらの記事をご覧ください。

Dialogflow

Dialogflow APIの有効化

GCPコンソールにアクセスしDialogflow APIを有効化します。 APIとサービス画面を開きます。

GCPコンソール

続いて「APIとサービスを有効化」をクリックします。

APIとサービス

検索欄に「Dialogflow」と入力します

サービス有効化

検索結果が表示されたら「Dialogflow」をクリックします。

サービス有効化

「有効にする」をクリックしたら、準備OKです。

サービス有効化

サービスアカウントの作成

APIとサービス画面を開きます。

GCPコンソール

「認証情報」をクリックします。

認証情報

「認証情報を作成」をクリックし「サービスアカウント」を選択します。

認証情報

任意のサービスアカウント名を入力して、「作成」をクリックましす。

サービスアカウント作成

ロールにDialogflowのクライアントを追加します。

サービスアカウント作成

「完了」をクリックします。

サービスアカウント作成

作成した、サービスアカウントを選択します。

サービスアカウント一覧

「鍵を追加」をクリックし、「新しい鍵を作成」を選択します。

鍵作成

JSONを選択して「作成」をクリックします。

秘密鍵作成

エージェントの作成

Dialogflowコンソールにアクセスして新しいエージェントを作成します。 左側のメニューで [Create Agent] をクリックします(すでに他のエージェントをお持ちの場合は、エージェント名をクリックし、一番下までスクロールして [Create new agent] をクリックします)。 Default LanguageにJapanese - jaを選択し、「CREATE」をクリックします。

エージェント作成

作成できたらエージェント名の隣の歯車マークをクリックして、Project IDを控えておきます。

エージェント作成

音声ボットの構築

ここからは実際にTwilioとDialogflowを使って音声ボットを構築していきます。 最初にソースコードをダウンロードします。 サンプルコードはこちら

$ git clone git@github.com:twilio/media-streams.git
    or
$ git clone https://github.com/twilio/media-streams.git

media-streams/node/dialogflow-integration内に事前準備で作成したサービスアカウントのjsonファイルを「google_creds.json」という名前でコピーします。 対象のフォルダへ移動します。

$ cd media-streams/node/dialogflow-integration/

対象フォルダへ移動したら、対応する言語を日本語に変更します。 dialogflow-utils.js内のlanguageCodeja-JPに変更します。

const intentQueryAudioInput = {
    audioConfig: {
            audioEncoding: "AUDIO_ENCODING_MULAW",
            sampleRateHertz: 8000,
            languageCode: "ja-JP",  // ja-JPに変更する
            singleUtterance: true,
        },
        interimResults: false,
    };

    function createDetectStream(isFirst, sessionId, sessionPath, sessionClient) {
        let queryInput = intentQueryAudioInput;
        if (isFirst) {
            queryInput = {
                event: {
                    name: process.env.DIALOGFLOW_STARTING_EVENT_NAME,
                    languageCode: "ja-JP", // ja-JPに変更する
                },
            };
        }
        .....
    }

対応言語を日本語に変更したら、次は必要なモジュールをインストールします。

$ npm install

必要なモジュールを作成したら続いて環境変数設定を行います。

$ npx configure-env
    ? Your Twilio Account SID. Copy and paste this value from https://twilio.com/console › // TwilioアカウントSIDを入力してください。
    ? Your Twilio Auth Token. Copy and paste this value from https://twilio.com/console › // Auth Tokenを入力してください。
    ? Enter your Dialogflow project id › // DialogflowのプロジェクトIDを入力してください。
    ? The name of your starting Dialogflow event › // Dialogflowで一番最初に応答するイベント名を入力してください。
    ? We will redirect your call to this a Webhook that should return TwiML. › // Dialogflowが終了した時のリダイレクト先を入力してください。
    ? Location of your Google credential file. › // Googleサービスアカウントのキーファイル(.json)へのパスを入力してください。

サーバーの起動を行います。

$ npm start

最後に電話番号に起動したサーバーのURLを設定します。以下コマンドを実行するとngrokが起動し、Twilioからローカルサーバーにアクセスできるようになります。

twilio phone-numbers:update +8105XXXXXXXX(購入した電話番号) --voice-url=http://localhost:3000/twiml

テスト

無事、環境構築は完了です。 最後に実際に電話をかけて今までと比べて数段レスポンスがよくなったMedia Streamを用いた音声ボットをお試しください!

 

デモ動画の視聴

まとめ

今までTwilioで音声ボットをやろうとした時、Twilioで文字起こしを行うか録音した音声をボットに投げていたので、どうしても微妙な間が開いてしまっていました。 Media Streamに直接アクセスできるようなったことにより、以前より数段スムーズな受け答えが可能となりました! 是非お試しください!

アプリケーションエンジニア 葛 智紀
アプリケーションエンジニア 葛 智紀

前職でiOS、Androidのネイティブアプリケーション開発、AngularやLaravelを用いたウェブアプリケーション開発に従事。KDDIウェブコミュニケーションズではTwilioの最新情報の発信やTwilioを用いた地域課題解決を担当。 個人では、Google Developer Group Tokyoのオーガナイザーを務める。

Share!!

この記事を読んだ人へのオススメ

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例