Twilio Videoでビデオ通話を試してみた

スポンサーリンク

スクリーンショット_2016-04-06_12_38_40

電話のシステムを容易に構築できるTwilioに新しくTwilio Videoという機能が追加されました。その名の通り、音声通話ではなく、Video通話が可能になりました。

公式HP:https://www.twilio.com/video

何事も人とお話する時は「Face to Face」に近ければ近いほど相手の表情も分かるのでコミュニケーションをとりやすいですよね。このサービスリリースにより、また新しいサービスが出てきそうでこれから面白くなりそうです。と、唐突ですが、早速作っていきます。

目的

Twilio Videoの実装

開発

開発を行う前に、Twilioのアカウントが必要になります。もしも興味があってお持ちでない方は、以前書いた記事があるのでアクセスして発行してください。
第2回 Twilioのアカウント登録方法

Twilio VideoのQuickstart(クイックスタート)をダウンロード

Twilioの管理コンソールにアクセスします。アクセス後、左上の「製品一覧」をクリックして、「プログラマブル ビデオ」を選択します。
スクリーンショット_2016-04-06_14_04_15

「プログラマブル ビデオ」を選択すると、下記のような画面が表示されます。
スクリーンショット_2016-04-06_14_06_48

今回は、「JavaScript」を使ったTwilio Videoを実装します。「JavaScript」をクリックします。
スクリーンショット_2016-04-06_14_06_48

みなさんの環境を選択します。私はMacを使っているので「Mac もしくは Linux」を選択します。
スクリーンショット_2016-04-06_14_10_10

下記のような画面が表示されますので、「Download the Quickstart App」下にあるマークをクリックしてQuickstart(クイックスタート)をダウンロードします。

アクセストークンの発行

引き続き、アクセストークンを発行します。下記、画像にある「アクセストークンを生成する」をクリックします。
スクリーンショット_2016-04-06_14_47_44

「アクセストークンを生成する」をクリックすると、下記のようにランダムな文字列が表示されます。
スクリーンショット_2016-04-06_14_50_43

表示されたランダムな文字列(アクセストークン)をコピーして、先ほどダウンロードしたQuickstart(クイックスタート)のファイル郡にある「quickstart.js」を開きます。
スクリーンショット_2016-04-06_14_55_34

開いたら、11行目ほどにある var accessTokenの値としてアクセストークンをペーストします。
スクリーンショット_2016-04-06_15_00_36

ローカルサーバーを起動してTwilio Videoを動かす

次にコンソールからローカルサーバーを起動します。
コンソールを起動したら先ほどダウンロードした「video-quickstart-javascript-master」へコンソールから移動します。私は「video-quickstart-javascript-master」をDownloadsにダウンロードしたので下記のようになります。
スクリーンショット_2016-04-06_15_10_38

「video-quickstart-javascript-master」へコンソールから移動したらshコマンドを使ってサーバを起動します。

sh start_server.sh

コマンドを入力して下記のように結果が表示されたら成功です。
スクリーンショット_2016-04-06_15_14_35

Twilio Videoでテスト会話をする

ローカルサーバの構築が完了したら、管理コンソールへ戻って「次」へをクリックします。
スクリーンショット_2016-04-06_15_47_36

テスト会話開始ページが開きます。
まず、先ほど作成したローカルサーバへ予めアクセスしておきます。
http://localhost:8000/quickstart.html
ページは下記のような黒を基調としたおしゃれな感じです。
スクリーンショット 2016-04-06 15.58.46
ページを開いたら、先ほどのテスト会話開始ページに戻ります。

続いて、「Create Conversation」をクリックしてConversationを作成します。
スクリーンショット_2016-04-06_15_50_44

上手くConversationが作成できたら、下記のようにご自身が表示されると思います。
スクリーンショット_2016-04-06_15_54_36

対してローカルサーバ側のページを開いてみましょう。
スクリーンショット_2016-04-06_16_04_27

バッチリ、管理コンソール側の僕が表示されています。
※同じ場所にいるので違いがあまりわかりませんね、、、すみません(笑

今回は割愛しましたが、user名を入れてその人にコネクトを開始してvideo通話をすることもできるようです。これはまた次の機会に。

参考文献

プログラマブル ビデオ をはじめよう

スポンサーリンク
スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク