Twilioブログ

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

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

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

目次

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

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

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

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

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

機能 Web iOS Android
ビデオ会議
カメラのオンオフ
カメラの切り替え -
マイクのミュート
画面共有 - -
話しているスピーカーの検出
Network Quality APIを使用したネットワーク状態の監視
Network Bandwidth Profile APIを使用して参加者の帯域幅の使用を定義する - -

提供プラットフォーム

ビデオ会議アプリは以下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を任意のものに修正します。

TeamとBundle Identiferを任意に修正

実行

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

Video-Community

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

Twilio Access Token Server

Android

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

実行環境

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

Android Studio Android API Version
3.5以上 16以上


※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 VariantcommunityDebugになっているのを確認し実行してください。

Active Build VariantがcommunityDebug

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

Twilio Access Token Server

まとめ

どのプラットフォームもTwilio Blogのタイトルの通り、前提知識があれば5分程度で構築することができました。
こんなに簡単に、Twilio Videoをフル活用したアプリケーションが構築できるのは感動的でした。
これを機に、ビデオ会議アプリを色々なシステムに組み込んでみるのはいかがでしょうか。

アプリケーションエンジニア 葛 智紀
アプリケーションエンジニア 葛 智紀

前職でiOS、Androidのネイティブアプリケーション開発、AngularやLaravelを用いたウェブアプリケーション開発に従事。KDDIウェブコミュニケーションズではTwilioの最新情報の発信やTwilioを用いた地域課題解決を担当。 個人では、Google Developer Group Tokyoのオーガナイザーを務める。

CTA_まずはtwilioを使ってみる。

Share!!

この記事を読んだ人へのオススメ

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例