Twilio WebRTCハンズオンでビデオ通話アプリを作ってみた

こんにちは、CX事業本部の若槻です。

TwilioにはProgrammable Videoというアプリケーションにビデオ通話機能を実装できるSDKが用意されています。

• Programmable Video - Twilio

今回は、Twilioエバンジェリストの方による次のハンズオンを参考にProgrammable Videoのデモアプリを作ってみました。

• Twilio WebRTCハンズオン 2020版 - Qiita

やってみた

Twilioアカウントを使用するので未作成の場合は作成します。今回は以下を参考に無料のトライアルアカウントを作成しました。

• Twilioアカウントを作成する方法 - Twilio

APIキーの取得

管理コンソールで、スライドメニューを開きます。

[Programmable Video]を選択します。

サイドメニューで[ツール] - [APIキー]ページを開き、[新しいAPIキーを作成する]をクリックします。

[わかりやすい名前]でVideoと入力し、キータイプでStandardを選択します。[APIキーを作成する]をクリックします。

表示される[SID]と[SECRET]の値を控えます。[完了しました！]のチェックボックスにチェックを入れて、[終了]をクリックします。

バックエンド（アクセストークン取得処理）の実装

フロントエンドからのリクエストに応じて、APIキーをもとに生成したProgrammable Videoを利用可能なJWTトークンをレスポンスするバックエンドを実装します。

管理コンソールのスライドメニューから[Functions]を選択します。

[Functions (Classic)] - [設定]ページを開き、[Enable ACCOUNT_SID and AUTH_TOKEN]のチェックボックスにチェックを入れます。

[Environment Variables]の赤いプラスアイコンを２回クリックして、以下の2つの変数を設定します。

[Dependencies]の赤いプラスアイコンを1回押して、以下のモジュールを追加します。

[Save]をクリックして設定を保存します。

[Functions (Classic)] - [リスト]ページを開き、[Create a Function]をクリックして、新しいFunctionを生成します。

テンプレートの一覧から[Blank]を選択して、[Create]をクリックします。

[Properties]で[FUNCTION NAME]にVideoToken、[PATH]に/video-tokenと指定します。

[Configuration]で[ACCESS CONTROL]のチェックを外します。[CODE]欄のコードを以下のコードに置き換えます。（コードはハンズオンと同じ内容です。）

const uuid = require('uuid');
exports.handler = function(context, event, callback) {
    const ACCOUNT_SID = context.ACCOUNT_SID;
    const API_KEY = context.TWILIO_VIDEO_KEY;
    const API_SECRET = context.TWILIO_VIDEO_SECRET;
    const IDENTITY = uuid.v4();  // ランダムにクライアント名を生成

    const ROOM_NAME = 'VideoRoom';  // ルーム名は今回は固定

    const AccessToken = Twilio.jwt.AccessToken;
    const VideoGrant = AccessToken.VideoGrant;

    // 参加できるルームをトークンで限定
    const videoGrant = new VideoGrant({
        room: ROOM_NAME
    });

    const accessToken = new AccessToken(
        ACCOUNT_SID,
        API_KEY,
        API_SECRET
    );

    accessToken.addGrant(videoGrant);
    accessToken.identity = IDENTITY;
    callback(null, {
        token: accessToken.toJwt()
    });
};

[Save]をクリックして、デプロイが完了したらバックエンドの実装は完了です。

フロントエンド（ビデオ通話）の実装

ハンズオンのこちらのURLからZIPファイルをダウンロードし、解凍して2つのファイルがあることを確認します。

• video.html
• video.js

管理コンソールのサイドバーメニューより[Assets]を選択します。

[Assets (Classic)]を開き、[Add an Asset]をクリックします。

video.htmlを選択して[開く]をクリックします。

[MAKE PRIVATE]のチェックが外れていることを確認し、[Upload]をクリックしてアップロードが完了するまで待ちます。

video.jsについても同様にアップロードを行います。

どちらもアップロードできました。これでフロントエンドの実装は完了です。video.htmlのURLがアクセスURLなので控えます。

ビデオ通話をしてみる

先程控えたURLにアクセスします。メディアデバイスの許可を求められたら許可します。

カメラの入力映像がタイルで表示されます。[Join Room]をクリックすればRoom（ビデオ通話）に参加できます。

別の端末からも参加してみた様子です。これで複数人でのビデオ通話が行えます。

[Leave Room]をクリックすればビデオ通話から退出できます。

Programmable Videoのコンソールを見ると、ビデオ通話を実施したログを確認できます。

おわりに

ハンズオンを参考にProgrammable Videoのデモアプリを作ってみました。

SDKを利用するだけでTwilioを利用したビデオ通話機能が簡単にアプリケーションに組み込めるのは良いですね。また、ハンズオン実施前は「Twilio Functions」なるものを知らなかったので、Twilioの機能だけでサーバーレスなビデオ通話アプリが作れるとは思ってなかったので驚きました

以上