Twilio Video を Garoon スケジュールに表示して、ビデオ会議をしよう

（株式会社KDDIウェブコミュニケーションズ　Twilioエバンジェリスト高橋克己）

はじめに

本記事は、サイボウズ社の中堅、大企業向けグループウェアである「Garoon」の予定の詳細画面上に Twilio Video のコンポーネントを組み込むことで、
Garoon の画面上で最大 4 名のテレビ会議を実装する方法を紹介します。

カスタマイズの完成イメージ

市販のテレビ会議ソフトのような機能はありませんが、Garoon の予定の詳細画面を開いて参加ボタンを押すだけで会議ができるシンプルさが特長になっています。

※ Internet Explorer は、WebRTC に対応していないため、このカスタマイズはご利用いただけません。

必要なもの

• Twilio アカウント（トライアルアカウントでも可）
  Twilioの アカウント取得については、こちらの記事（外部サイト）をご覧ください。
• Garoon 環境（要：Garoon 管理者アカウント）
• Chrome ブラウザが動作するパソコン
• ビデオカメラとマイク、スピーカー

システム構成

1. ユーザーがGaroon の予定の詳細画面にある[参加]ボタンをクリックすると、Twilio からアクセストークンを取得します。
2. 取得したアクセストークンを使ってルームに接続し、動画中継サーバーから同じルームに参加しているユーザーのビデオを取得します。

Programmable Video とは

Programmable Video

Programmable Video は、Twilio の WebRTC をベースに構築された音声・動画・データ通信サービスで、以下の特徴があります。

• JavaScript SDK / iOS SDK / Android SDK を提供
  • JavaScript SDKを使うことで Garoon 上でビデオを利用できます。
• アクセストークンを使った認証
• ルームベースでの実装（呼び出し機能はありません）
• 「ピアツーピア（P2P）ルーム」と、SFUベースの「グループルーム」「スモールグループルーム」の3種類が利用可能
  • ピアツーピアルームは最大10名まで、スモールグループルームは最大4名まで、グループルームは最大50名までの参加者を収容できます。
• TURN / STUN サービスも提供
• 画面共有に対応（Chrome と Firefox のみ）
• 録画機能に対応（グループルーム、スモールグループのみ）
• メディアコーデックには、Opus（音声）、VP8 / H.264（映像）に対応

Twilio Video SDK が対応するブラウザ

※ iOS の Chrome と Firefox では、WebRTC API にアクセスできません

Video APIの認証

• Twilio Video の API にアクセスするためにはアクセストークンが必要です。
• アクセストークンは、以下の情報を使って動的に生成されます。
  • ACCOUNT SID （Twilioのアカウントに紐付いたID）
  • API KEY
  • API SECRET
  • IDENTITY （セッション中にユーザを識別するための値）
• アクセストークンに対して、接続可能なルームを埋め込むことが可能です。
• API 経由で生成するほか、管理コンソール上でも生成が可能です。

カスタマイズの適用

カスタマイズ適用の大まかな流れは、以下のとおりです。

1. Twilioの管理コンソールにログインする
2. Twilio Video の設定を行う
3. Twilio Video で API キーとシークレットを取得する
4. Twilio の Runtime 環境を構築する
5. Twilio の Functions にプログラムの実装する
6. Garoon 上で JS/CSS の設定を行う
7. Garoon 上で施設の登録を行う

手順 1. Twilio の管理コンソールにログインする

ブラウザで Twilio のログイン画面にアクセスし、Twilio の ID とパスワードでログインします。

手順 2. Twilio Videoの設定を行う

1. 左側のメニューボタン（「･･･」アイコン）をクリックし、スライドしたメニューから[Programmable Video]を選択します。
2. [部屋]を選択し、さらに[設定]を選びます。
3. 「Room Topology」で、以下の内容を登録していきます。
   
   

   項目名	値
   ROOM TYPE	「Group-Small」を選択します。
   VIDEO CODEC	「VP8 & H.264」を選択します。
   RECORDING	「DISABLED」を選択します。
   MAXIMUM PARTICIPANTS	「4」を入力します。
   MEDIA REGION	「Japan - jp1」を選択します。

4. [Save]ボタンを押します。

手順 3. Twilio Videoで API キーとシークレットを取得する

1. 「Programmable Video」のサブメニューから[ツール]を選択し、さらに[API Keys]を選択します。
2. [新しいAPIキーを生成する]ボタンを押して、新しいAPIキーを生成します。
3. 以下の内容を登録していきます。
   
   

   項目名	値
   わかりやすい名前	「Video」を入力します。
   キータイプ	「Standard」を選択します。

4. [APIキーを生成する]ボタンを押します。
5. 表示された「SID」「SECRET」の値をメモ帳にコピーしておきます。次の手順で利用します。
   
6. [完了しました！]のチェックをいれて、[終了]ボタンを押します。

手順4. Twilio の Runtime 環境を構築する

1. 左側のメニューボタン（「･･･」アイコン）をクリックし、スライドしたメニューの「RUNTIME」から、[Functions]を選択します。
2. [設定]を選択します。
3. [Enable ACCOUNT_SID and AUTH_TOKEN]のチェックボックスをONにします。
   
4. 「Environmental Variables」の[+]ボタンを3回クリックして、3つの行を生成します。
5. 各行に以下の内容を設定します。
   
   

   KEY	VALUE
   GAROON_APP_URI	「{subdomain}.cybozu.com」を入力します。 {subdomain} は、利用している Garoon 環境に合わせて変更してください。
   TWILIO_VIDEO_KEY	手順 3.でメモした SID を入力します。
   TWILIO_VIDEO_SECRET	手順 3.でメモした SECRET を入力します。

6. 「Dependencies」の twilio のバージョンを「3.29.2」に変更します。
   
7. [SAVE]ボタンを押して、設定を保存します。

手順5. TwilioのFunctions にプログラムの実装する

1. 「Functions」のサブメニューから、[管理]を選択します。
2. [Create a new function]ボタンを押して、新しい Function を作成します。
3. 「New Function」ダイアログで、「Blank」を選択し、[Create]ボタンを押します。
4. 以下の内容を設定します。
   
   

   KEY	VALUE
   FUNCTION NAME	「VideoToken」を入力します。
   PATH	「/video-token」を入力します。
   ACCESS CONTROL	「Check for valid Twilio signature」のチェックを外します。

5. [CODE]にあらかじめ書かれているコードをすべて削除し、以下のコードを貼り付けます。
6. [SAVE]ボタンを押して、コードを保存します。
7. しばらくすると、デプロイ完了の緑色のバナーが表示されます。
8. 画面上の[PATH]の部分に表示されている URL (https://xxxxxxxx-xxxxx-xxxx.twil.io）をメモ帳にコピーしておきます。次の手順で利用します。
   

以上で Twilio 側の設定は終了です。このあとは Garoon の設定を行っていきます。

手順6. Garoon 上でJS/CSSの設定を行う

カスタマイズファイル（JS / CSS ファイル）のダウンロード

まずは Garoon に組み込む JS ファイルと、CSS  ファイルをダウンロードします。

1. 次の GitHub のリンクから、それぞれ「twilioVideo.js」と「grn_kit.css」をダウンロードしてください。
   • twilioVideo.js
     https://raw.githubusercontent.com/twilioforkwc/garoon-schedule-twilio-video/master/twilioVideo.js
   • grn_kit.css
     https://raw.githubusercontent.com/garoon/css-for-customize/master/css/grn_kit.css
2. ダウンロードした twilioVideo.js をテキストエディタで開きます。
3. 13 行目の xxxxxxxxx-xxxxx-xxxx の部分を、手順 5.でメモした Function の URL に置き換えてください。

カスタマイズファイルの適用

次に、ダウンロードした JS / CSS ファイルを Garoon に組み込んでいきます。
カスタマイズを適用する手順の詳細は、スケジュールのカスタマイズ をご参考ください。

1. Garoon を開きます。
2. 右上の歯車アイコンをクリックして、[Garoonシステム管理]を選択します。
3. 左側の一覧から[スケジュール]を選択し、[JavaScript / CSSによるカスタマイズ]をクリックします。
4. [カスタマイズグループを追加する]をクリックします。
5. 以下の内容を登録していきます。
   
   

   項目名	値
   カスタマイズ	「適用する」を選択します
   カスタマイズグループ名	「TwilioVideo」を入力します
   適用対象	「変更する」を選択して、このビデオを利用するユーザをすべて追加します。
   JavaScript カスタマイズ	以下の並び順で、リンクとJSファイルを登録します。 https://unpkg.com/axios/dist/axios.min.js https://media.twiliocdn.com/sdk/js/video/releases/2.2.0/twilio-video.min.js twilioVideo.js
   CSS カスタマイズ	grn_kit.css

6. [追加する]ボタンを押して、設定を保存します。

手順7. Garoon 上で施設の登録を行う

施設を登録する手順の詳細は、施設の追加をご参照ください。

1. [システム管理（各アプリケーション）]に戻り、左側の一覧から[スケジュール]を選択します。
2. [施設/施設グループ]を選択します。
3. [施設を追加する]をクリックします。
4. 以下の内容を追加します。
   
   

   項目名	値
   施設名	「TwilioVideo」を入力します
   施設コード	「TwilioVideo」を入力します
   メモ	「Room:Room」を入力します（大文字小文字に注意してください）。

5. [追加する]ボタンを押します。

施設を登録したら、設定はすべて終了です。

動作確認

1. Garoon上で予定を登録します。
   その際に、施設の一覧から「TwilioVideo」を選択しておきます。
   
2. 作成した予定の詳細画面上で、自分の姿が映れば成功です。
   ※最初のアクセス時は、カメラとマイクのアクセス確認が表示されます。[許可]ボタンを押してください。
   
3. 実際に会議を始めるときは、参加ボタンを押します。
4. 会議を終了するときは、退出ボタンを押します。

おわりに

冒頭にも書きましたが、市販のビデオ会議サービスなどに比べると機能もほとんどなく、シンプルな作りになっていますので、設定さえ間違えなければ誰でもすぐに使い始めることができると思います。

ちなみにこのシステムにかかる料金を最後にご紹介しておきます。
今回は、最大 4 名までのSmall-Video Roomを使っているため、1 参加者あたり 0.61111 円/分が課金されます。
たとえば、30 分のミーティングを4名で行った場合、単純に計算すると 73.3332 円となります。
基本料などはなく、完全従量制です。

Twilio（トゥイリオ）とは

Twilio は音声通話、メッセージング（SMS/チャット）、ビデオなどの 様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウド API サービスです。
初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。