Twilio Programmable Video SDKを活用したビデオ会議アプリのオープンソースが公開されました

こんにちわ、Twilio事業部のkatsu.tです。
先日、Twilio Programmable Video SDKを活用したビデオ会議アプリをオープンソースにて公開されました。
Deploy your own video collaboration app in five minutes or less

本記事では、公開されたビデオ会議ソフトウェアついてご紹介いたします。

目次

• ビデオ会議アプリについて
• ビデオ会議アプリ提供機能
# ダウンロードしてきたディレクトリに移動します。
• 提供プラットフォーム
• ライセンスについて
• ビデオ会議アプリのデプロイ・ビルド方法
• 事前準備
• Web
• iOS
• Android

ビデオ会議アプリについて

ビデオ会議アプリの目的は、通信ソリューションを構築する開発者に標準的なリファレンスを提供するためです。そのために、ビデオ会議ソフトウェアはオープンソースソフトウェアとして公開されました。

従来から公開していたProgrammable VideoのQuickstartではシンプルなビデオ会議アプリを通して、最速でProgrammable Video SDKの利用法を学ぶことができますが、今回のビデオ会議アプリは、より実践的なデモアプリとなっています。

ビデオ会議アプリ提供機能

ビデオ会議アプリでは、主に以下の機能を提供しています。

提供プラットフォーム

ビデオ会議アプリは以下3つのプラットフォーム向けに提供されています。
 
Web - https://github.com/twilio/twilio-video-app-react
iOS - https://github.com/twilio/twilio-video-app-ios
Android - https://github.com/twilio/twilio-video-app-android

ライセンスについて

ビデオ会議アプリは全てApache 2.0ライセンスのもと作成されています。

ビデオ会議アプリのデプロイ・ビルド方法

事前準備

Twilioアカウント

ビデオ会議アプリを利用するには、事前にTwilioアカウントを取得している必要があります。
Twilioアカウントをまだ作成していない方は、こちらの「無料サインアップ」よりサアカウントの作成をお願い致します。

Account SIDとAuthToken

Twilioのコンソールにログインして、Account SIDとAuthTokenを確認します。
※Twilio CLIのloginコマンドを使用する際に利用します。

npm

Twilio CLIを利用する際に、npmコマンドを利用します。
そのため、node.jsをインストールされていない方は、事前にインストールをお願いします。
 
node.jsのインストールはこちら

※node.jsのインストール方法はいくつかありますが、本記事では割愛させていただきます。

Twilio CLIの準備

以下コマンドを実行して、Twilio CLIの準備を行います。

# Twilio CLIのインストール

$ npm install twilio-cli -g

# Twilioへログイン
# twilio loginを実行すると以下入力を求められます。
#? The Account SID for your Twilio Account or Subaccount: Account SID
#? Your Twilio Auth Token for your Twilio Account or Subaccount: Auth Token
#? Shorthand identifier for your profile: Twilio CLI上での識別名（任意）
$ twilio login

# Twilio CLIにrtcプラグインをインストール
$ twilio plugins:install @twilio-labs/plugin-rtc 

Web

ビデオ会議アプリのWebアプリケーション版は、実行するのが最も簡単で、数分でアプリをデプロイすることができます。
以下コマンドを実行します。
※事前準備は終了しているものとします。

# gitを利用して、ソースコードをcloneします。

# gitをインストールしていない方は https://github.com/twilio/twilio-video-app-react よりソースコードをダウンロードしてください。

$ git clone https://github.com/twilio/twilio-video-app-react

# ダウンロードしてきたディレクトリに移動します。
$ cd twilio-video-app-react

# 必要なモジュールをインストールします。

$ npm install

# アプリケーションをデプロイ
# 表示された Web App URL にアクセスするとビデオ会議アプリが動作しているのがわかります。
$ npm run deploy:twilio-cli
deploying app... done
Web App URL: https://video-app-1111-dev.twil.io?passcode=1111111111
Passcode: 1111111111

iOS

iOSでの手順は以下となります。
※事前準備は終了しているものとします。
※Xcodeはインストール済みとします。

Twilio Access Token Serverをデプロイ

以下コマンドを実行してTwilio Access Token Serverをデプロイします。

# Twilio Access Token Serverをデプロイ

# 表示されたパスコードはアプリ実行時に使用します。

# パスコードは1週間後に期限切れになります。新しいパスコードを生成するには、 `twilio rtc:apps:video:deploy --authentication passcode --override` を実行します。

$ twilio rtc:apps:video:deploy --authentication passcode

ソースコードの準備

以下コマンドを実行してソースコードを準備します。

# gitを利用して、ソースコードをcloneします。
# gitをインストールしていない方は https://github.com/twilio/twilio-video-app-ios よりソースコードをダウンロードしてください。
$ git clone git@github.com:twilio/twilio-video-app-ios.git

# ダウンロードしてきたディレクトリに移動します。
$ cd twilio-video-app-ios

# 必要なモジュールをインストールします。
$ pod install

pod install が終了したらできた VideoApp.xcworkspace を開きます。

VideoApp.xcworkspaceを開いたら 左側からVideoAppを選択し、TARGETSの中にあるVideo-Communityを選択します。さらにSigning Capabilitiesタブを選択すると、以下の画面が開きます。
画面が開けたら、TeamとBundle Identiferを任意のものに修正します。

実行

実行するターゲットをVideo-Communityに設定し、実行ボタンを押します。
※シミュレーターを利用するとカメラが使用できないので、実機でビルドするのをオススメします。
※実機にてアプリを実行した時に、アプリが落ちる場合は最新のiOSにアップデートして再度お試しください。

画面が表示されたら、任意の名前とTwilio Access Token Serverをデプロイ時に表示された、パスコードを入力するとビデオ会議を開始できるようになります。

Android

Androidでの手順は以下となります。
※事前準備は終了しているものとします。
※Android studioはインストール済みとします。

実行環境

実行環境は以下に準拠している必要があります。

※Android Studioにプロジェクトを開いた際にThis version of Android Studio cannot open this project, please retry with Android Studio 3.6 or newer.と表示される場合はAndroid Studio 3.6以降でお試しください。

Twilio Access Token Serverをデプロイ

以下コマンドを実行してTwilio Access Token Serverをデプロイします。

# Twilio Access Token Serverをデプロイ

# 表示されたパスコードはアプリ実行時に使用します。

# パスコードは1週間後に期限切れになります。新しいパスコードを生成するには、 `twilio rtc:apps:video:deploy --authentication passcode --override` を実行します。

$ twilio rtc:apps:video:deploy --authentication passcode

ソースコードの準備

以下コマンドを実行してソースコードを準備します。

# gitを利用して、ソースコードをcloneします。

# gitをインストールしていない方は https://github.com/twilio/twilio-video-app-android.git よりソースコードをダウンロードしてください。

$ git clone git@github.com:twilio/twilio-video-app-android.git

ソースコードの準備ができたら、Android Studioでプロジェクトを開きます。
Gradleのビルドに失敗して、This version of Android Studio cannot open this project, please retry with Android Studio 3.6 or newer.と表示される場合はAndroid Studio 3.6以降でお試しください。

実行

実機または、エミュレーターでお試しください。
Build Variantsを開いてActive Build VariantがcommunityDebugになっているのを確認し実行してください。

画面が表示されたら、任意の名前とTwilio Access Token Serverをデプロイ時に表示された、パスコードを入力するとビデオ会議を開始できるようになります。