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

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

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

• EDGEは現時点で非対応
• iOSのChromeとFirefoxでは、WebRTC APIにはアクセスできません。

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

• Twilioアカウント（トライアルアカウントでも可）
• Garoonの管理者アカウント
• Chromeブラウザが動作するPC
• ビデオカメラとマイク、スピーカー

Twilioのアカウント取得については、こちらの記事を御覧ください。

• GaroonのAPP URI　例：xxxxxx.cybozu.com

一連の作業は以下のとおりです。

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

• ブラウザでログイン画面を表示し、事前に取得したIDとパスワードでログインをします。

• Twilioの管理コンソールにログインします。
• 左側のメニューボタン（ボタンのようなアイコン）をクリックし、スライドしたメニューからProgrammable Videoを選択します。
• **Rooms（部屋）を選択し、さらにSettings（設定）**を選びます。
• Room Topologyの中のROOM TYPEリストから「Group-Small」を選択します。
• VIDEO CODECは「VP8 & H.264」を選択します。
• RECORDINGは「DISABLED」を選択します。
• MAXIMUM PARTICIPANTSは「4」とします。
• MEDIA REGIONのプルダウンから「Japan - jp1」を選択します。

• Saveボタンを押します。

• スライドメニューからProgrammable Videoを選択します。
• Videoのサブメニューからツールを選択し、さらにAPI Keysを選択します。
• 新しいAPIキーを生成するを押して、新しいAPIキーを生成します。
• わかりやすい名前欄に、「Video」と入力します。キータイプはそのままでOKです。

• APIキーを生成するボタンを押します。

• 表示されたSIDとSECRETの値をメモ帳にコピーしておきます。
• 完了しました！のチェックをいれて、終了ボタンを押します。

• スライドメニューのRUNTIMEから、Functionsを選択します。
• **Configure（設定）**を選択します。
• Enable ACCOUNT_SID and AUTH_TOKENのチェックボックスをONにします。

• Environmental Variablesの赤いアイコンを3回クリックして、3つの行を生成します。
• 各行に以下の内容を設定します。

• Dependenciesのtwilioのバージョンを「3.29.2」に変更します。

• SAVEボタンを押して、設定を保存します。

• スライドメニューのRUNTIMEから、Functionsの**Manage（管理）**を選択します。
• 赤いプラスアイコンをクリックするか、Create a new functionを選択して、新しいFunctionを作成します。
• New Functionダイアログでは、Blankを選択し、Createボタンを押します。
• FUNCTION NAME欄に「VideoToken」、PATH欄に「/video-token」と入力します。
• ACCESS CONTROLのチェックボックスを外します。

• CODE欄に予め書かれているコードをすべて削除し、以下のコードを貼り付けます。

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(https://xxxxxxxx-xxxxx-xxxx.twil.io）をメモ帳に控えておいてください。

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

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

以下のGitHubから「twilioVideo.js」ファイルをダウンロードしてください。 https://github.com/twilioforkwc/garoon-schedule-twilio-video 以下のGitHubから「grn_kit.css」ファイルをダウンロードしてください。 https://github.com/garoon/css-for-customize

• ダウンロードしたtwilioVideo.jsをエディタで開きます。
• 13行目にある以下の行のxxxxxxxxx-xxxxx-xxxxの部分を、先程控えておいたFunctionのPATHに置き換えてください。

const TWILIO_DOMAIN = 'xxxxxxxxx-xxxxx-xxxx.twil.io'; // xxxxxxx-xxxxxxx-xxxx.twil.io

では次に、このJSのファイルをGaroonに組み込んでいきます。

ここからの作業は、Garoonの管理者権限をもったユーザが行う必要があります。

• Garoonを開きます。

• 右上の歯車アイコンをクリックして、Garoonシステム管理を選択します。

• 左側の一覧からスケジュールを選択し、JavaScript / CSSによるカスタマイズをクリックします。

• カスタマイズグループを追加するというリンクをクリックします。

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

JavaScriptカスタマイズには、以下の並び順でリンクとJSファイルを登録します。

CSSカスタマイズには、先程ダウンロードしたgrn_kit.cssを登録してください。

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

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

• システム管理（各アプリケーション）に戻り、左側のスケジュールを選択します。

• 施設/施設グループを選択します。

• 施設を追加するリンクをクリックします。

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

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

施設が登録されたら、一通りの設定はすべて終了です。

Garoon上で予定を登録します。 その際に、施設の一覧から「TwilioVideo」を選択しておきます。

作成した予定の詳細画面上で、自分の姿が映れば成功です。 ※最初のアクセス時は、カメラとマイクのアクセス確認が表示されますので、許可を選択してください。

実際に会議を始めるときは、参加ボタンを押します。 会議を終了するときは、退出ボタンを押します。

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

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

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