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

Garoon 開発 Tips

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

固定リンクがコピーされました

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

はじめに

固定リンクがコピーされました

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

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

固定リンクがコピーされました

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

本記事で紹介している連携カスタマイズの製品版がリリースされています。
製品版では、ご自身での Twilio の設定が不要となる他、チャット機能などの追加機能があります。
詳細は Video 会議室 for garoon を確認してください。

必要なもの

固定リンクがコピーされました

Twilio アカウント（トライアルアカウントでも可）
Twilio のアカウント取得については、 Twilioのサインアップを確認してください。
Garoon 環境（要：Garoon 管理者アカウント）
Chrome ブラウザーが動作するパソコン
ビデオカメラとマイク、スピーカー

システム構成

固定リンクがコピーされました

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

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 が対応するブラウザー

固定リンクがコピーされました

	Chrome	Microsoft Edge	FireFox	Safari
Android	◯	なし	◯	なし
iOS	^*1	なし	^*1	◯
Linux	◯	なし	◯	なし
macOS	◯	なし	◯	◯
Windows	◯	X	◯	なし

^*1 iOS の Chrome と Firefox では、WebRTC API にアクセスできません。 ^

Video API の認証

固定リンクがコピーされました

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

カスタマイズの適用

固定リンクがコピーされました

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

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

固定リンクがコピーされました

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

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

固定リンクがコピーされました

左側のメニューボタン（「…」アイコン）をクリックし、スライドしたメニューから[Programmable Video]を選択します。
[部屋]を選択し、さらに[設定]を選びます。

「Room Topology」で、以下の内容を登録していきます。

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

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

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

固定リンクがコピーされました

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

項目名値

わかりやすい名前「Video」を入力します。

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

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

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

固定リンクがコピーされました

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

各行に以下の内容を設定します。

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

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

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

固定リンクがコピーされました

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

以下の内容を設定します。

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

[CODE]にあらかじめ書かれているコードをすべて削除し、以下のコードを貼り付けます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


/*
* Garoon x Twilio sample program
* Copyright (c) 2020 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/

exports.handler = function(context, event, callback) {
  const response = new Twilio.Response();
  response.appendHeader('Access-Control-Allow-Origin', 'https://' + context.GAROON_APP_URI);

  const IDENTITY = event.identity || '';
  if (IDENTITY === '') callback(new Error(`Parameter 'identity' was not set.`));

  const roomName = event.room || '';
  if (roomName === '') callback(new Error(`Parameter 'room' was not set.`));

  const ACCOUNT_SID = context.ACCOUNT_SID;
  const API_KEY = context.TWILIO_VIDEO_KEY;
  const API_SECRET = context.TWILIO_VIDEO_SECRET;

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

  const videoGrant = new VideoGrant({
    room: roomName
  });

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

  accessToken.addGrant(videoGrant);
  accessToken.identity = IDENTITY;

  response.appendHeader('Content-Type', 'application/json');
  response.setBody({
    token: accessToken.toJwt()
  });
  callback(null, response);
};

[SAVE]ボタンを押して、コードを保存します。
しばらくすると、デプロイ完了の緑色のバナーが表示されます。
画面上の[PATH]の部分に表示されている URL をメモ帳にコピーしておきます。次の手順で利用します。
URL の例：https://xxxxxxxx-xxxxx-xxxx.twil.io

以上で Twilio 側の設定は終了です。このあとは Garoon の設定を実施します。

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

固定リンクがコピーされました

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

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

次の 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
ダウンロードした twilioVideo.js をテキストエディタで開きます。
13 行目の xxxxxxxxx-xxxxx-xxxx の部分を、手順 5. でメモした Function の URL に置き換えてください。

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

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

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

以下の内容を登録していきます。

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

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

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

固定リンクがコピーされました

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

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

以下の内容を追加します。

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

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

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

動作確認

固定リンクがコピーされました

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

おわりに

固定リンクがコピーされました

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

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

Twilio（トゥイリオ）とは

固定リンクがコピーされました

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

この Tips は、2024 年 3 月版 Garoon で動作を確認しています。

Garoon 開発 Tips