TwilioのProgrammable Chatで動画を送信してみる

動画のやり取りができるチャットを作りたいと思い、TwilioのProgrammable ChatのMedia Messageの機能を検証してみました。

Programmable Chatとは

Programmable Chatは、リアルタイムのバックエンドを構築、またはスケーリングすることなくWebおよびネイティブのモバイル・アプリケーションへのチャット機能の追加を容易にします。 Chatは開発者のビジネスロジックに統合し、確実に使いこなすにあたって必要なAPiと機能を提供します。

出典: https://jp.twilio.com/docs/chat

要するに汎用的なチャット機能を提供してくれるサービスです。

基本的な機能について、以下の記事で紹介されていますのでご参照ください。

[Tutorial] Twilio Programmable Chatを使ってチャット機能を実装する

やってみる

今回はこちらのサンプルプロジェクト https://github.com/TwilioDevEd/sdk-starter-node に機能を加えて、ファイルをアップロードできるようにしてみます。

Twilioのセットアップ

まずはTwilioの設定を行います。

• Twilioのアカウント（フリープランで構いません）を作成します。
• Programmable Chatサービスを作成します。
• Programmable Chat > Base Configuration から Service SIDを控えておきます。
• Twilioの設定からアカウントSIDと、APIキーを発行してAPIキー、シークレットを控えておきます。

サンプルプロジェクト

サンプルプロジェクトをforkして、READMEに従い.envファイルに値を設定します。

そしてサンプルプロジェクトのChatページにMedia Messageを送受信する機能を追加しました。

diffはこちらを参照してください

npm start でローカルサーバを起動して http://localhost:3000/chat/ にアクセスすると以下のページが表示されます。

ファイルを選択してテキストエリアにカーソルがある状態でEnterキーを押すと、選択したファイルが送信されます。また、 load message の部分をクリックすると、Messageを読み込んで、MediaのTemporaryURLを取得してconsole.logに出力するようにしています。

以下はTwilioのコンソールで確認できたアップロードされたMediaです。

TemporaryUrlは以下の形式になります。有効期限は300秒のようです。

https://media.us1.twilio.com/{MediaのSID}?Expires={UnixTime}&Signature={省略}&Key-Pair-Id={省略}

感想

良い点

MediaへのアクセスはTemporaryUrl（一時的なURL）でアクセスするようになっており、Media Messageを参照する権限がある人、つまりチャンネルの参加者のみがそのURLを発行可能となっています。

また料金がMediaのデータ保存量だけで、トラフィック料金がかからないので費用面で優しいです。

制限や課題

Mediaの最大サイズは150MBに制限されています。動画で150MBというと、画質をスマートフォンでまあまあきれいに見られるレベルに落として、せいぜい5分程度の長さでしょうか。動画を送るにはギリギリのラインという感じです。

また、動画の変換処理などはありませんので、送信側で予め変換しておくか、Programmable ChatのWebhookの処理でどうにかする、ということになるかと思います。別のアイディアとして、Media Messageを使わずに、動画は別のサービスにアップロードしておいて、MessageのAttributesに動画のidだけを設定しておいて、動画は別のサービスから取得する、という方法も可能と思います。次回はその検証を行いたいと思います。