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

若槻龍太

2020.11.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、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つの変数を設定します。

KEY	VALUE
TWILIO_VIDEO_KEY	<先程控えたAPIキーのSID>
TWILIO_VIDEO_SECRET	<先程控えたAPIキーのSECRET>

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

NAME	VERSION
uuid	7.0.3

[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]をクリックして、デプロイが完了したらバックエンドの実装は完了です。