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

2020.11.02

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

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

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

やってみた

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

APIキーの取得

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

[Programmable Video]を選択します。 image

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

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

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

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

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

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

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

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

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

image

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

NAME VERSION
uuid 7.0.3

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

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

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

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

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

フロントエンド(ビデオ通話)の実装

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

  • video.html
  • video.js

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

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

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

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

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

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

ビデオ通話をしてみる

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

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

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

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

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

おわりに

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

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

以上