Garoon開発Tips

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

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

目次

はじめに

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

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

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

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

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

information

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

必要なもの

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

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

システム構成

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

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

Programmable Videoとは

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

Programmable Video

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

Programmable Video (External link) は、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経由で生成するほか、管理コンソール上でも生成が可能です。

カスタマイズの適用

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

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

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

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

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

ブラウザーで Twilioのログイン画面 (External link) にアクセスし、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]にあらかじめ書かれているコードをすべて削除し、以下のコードを貼り付けます。

     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);
};

  6. [SAVE]ボタンを押して、コードを保存します。

  7. しばらくすると、デプロイ完了の緑色のバナーが表示されます。

  8. 画面上の[PATH]の部分に表示されているURLをメモ帳にコピーしておきます。次の手順で利用します。
    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」をダウンロードしてください。
  2. ダウンロードしたtwilioVideo.jsをテキストエディタで開きます。
  3. 13行目のxxxxxxxxx-xxxxx-xxxxの部分を、 手順5. でメモしたFunctionのURLに置き換えてください。
カスタマイズファイルの適用

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

  1. Garoonを開きます。

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

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

  4. [カスタマイズグループを追加する]をクリックします。

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

    項目名 値
    カスタマイズ 「適用する」を選択します
    カスタマイズグループ名 「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

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

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

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

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

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

information

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