LoginSignup
3
4

More than 3 years have passed since last update.

[Twilio/GAE]TwilioとGAEを使って通話内容の文字起こしを作ってみた

Last updated at Posted at 2019-07-02

Twilioを使って電話で話した内容を文字起こしするサンプルアプリを作ったので、その時の内容を記載します。

準備するもの

開発環境

ソースコード

全体像

スクリーンショット 2019-07-01 11.57.41.png

TwilioとGCPを使って通話内容の文字起こし作り方

アプリ準備

※必要に応じて新規プロジェクトを作成する

Google Cloud Speech APIを有効化する

スクリーンショット 2019-07-01 12.08.38.png

スクリーンショット 2019-07-01 12.09.12.png

gcp-speech-08.png

GAEを有効化する

スクリーンショット 2019-07-01 12.14.40.png

スクリーンショット 2019-07-01 12.16.42.png

※日本リージョンを設定、asia-northeast1 or 2を選択
スクリーンショット 2019-07-01 12.17.01.png

スクリーンショット 2019-07-01 12.18.37.png

アプリをデプロイする(ローカル)

GAEにdefaultサービスが上がっているのが前提となります。
defaultサービスが上がってない場合、エラーとなるのでご注意ください

  1. gcloudコマンドをインストールする
  2. gcloudコマンドの設定を行う
  3. GitHubからソースコードをダウンロードする。
  4. ダウンロードしてきたフォルダ内でnpm installを実行する。
  5. npm startを行い、アプリが正常に起動することを確認する
  6. gcloud app deployを実行し、アプリをGAEにデプロイする

※Twilioに設定するためにデプロイ後のURLをメモしておく

アプリをデプロイする(Cloud Shell)

GAEにdefaultサービスが上がっているのが前提となります。
defaultサービスが上がってない場合、エラーとなるのでご注意ください

  1. GitHubリポジトリを開く
  2. READMEに記載のあるOPEN IN GOOGLE CLOUD SHELLをクリックする
  3. gcloud config set project <user project ID>でアプリをデプロイするプロジェクトを設定する
  4. gcloud app deployを実行し、アプリをGAEにデプロイする

※Twilioに設定するためにデプロイ後のURLをメモしておく

Twilioを準備する

※電話番号は取得しているものとします
電話番号の取得方法はこちらをご覧ください。

電話を受話した時のWebhook先を設定

スクリーンショット 2019-07-02 14.08.46.png

スクリーンショット 2019-07-02 14.09.52.png

スクリーンショット 2019-07-02 14.15.11.png

GAEのコンソールにアクセスしてアプリのURLを確認し、入力する。
例: https://twilio-transcription-sample-dot-<your-project-id>.appspot.com/call/receive
スクリーンショット 2019-07-02 14.15.40.png

動作を確認する

GCPのログコンソールを開きます。

スクリーンショット 2019-07-02 14.25.16.png

スクリーンショット 2019-07-02 14.26.07.png

電話をかける

Twilioで取得した電話番号に電話をかけ、ピーと言う音声の後に任意の言葉を話してください。

ログ確認

最後にGCPのログを確認します。

最後に

GitHubのdevelopブランチで、録音した内容を文字起こししてFireStoreに保存、iOSアプリで表示するアプリを作っているので興味ある方はみて見て下さい。
(使い勝手は微妙なので、プルリクなりissueなどで改善要望いただければ随時直します。)

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4