WebRTCでビデオチャット | グリニッジ株式会社

現在グリニッジでは新潟に作業拠点を構築中。そちらの拠点にて、東京の事務所にいるのと同じように、東京事務所のファイルサーバを使い、そして、社内ネットワークで閉じられた開発サーバにアクセスしながら作業を進めることができるよう、VPNの設定を進めています。

このVPNについては、YAMAHAのRTX-1200やRTX-810といったVPNルーターを利用することで割と簡単に行えます。

当初は、東京と新潟とで別セグメント（東京は192.168.1.xxx、新潟は192.168.2.xxx）という形でVPNを組みましたが、 L2TPv3 (Layer 2 Tunneling Protocol version 3) というプロトコルを利用することで、複数拠点間でも同一セグメントのネットワークを構築できることがわかり、試行錯誤しまして現在は同一セグメントでつながっています。

VPNが構築できたので、続いて今取り組んでいるのがビデオチャットを簡単に行える仕組み。

テレビ会議、ビデオ会議とかいろいろな名前がありますが、要はパソコン同士のテレビ電話みたいなものです。

Skypeを使うというのが一番簡単なのでしょうが、仕事でSkypeを使うということは世の中的にも否定的な意見もあり、社内ネットワークにつながったPCからSkypeを使うのは当社の規定にも抵触するので別の何かを探していました。

いくつかテレビ会議のクラウドサービスとかも見てみましたが、社内ネットワーク上の2台のPCでビデオチャットができれば構わないので、何か簡単な解決策がないのかと探し回ったところ、WebRTCというものに辿り着きました。

ウィキペディアによると、
WebRTC (Web Real-Time Communication)とはWorld Wide Web Consortium (W3C)が提唱するリアルタイムコミュニケーション用のAPIの定義で、プラグイン無しでウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができる。
https://ja.wikipedia.org/wiki/WebRTC

手っ取り早くWebRTCによるビデオチャットを試すには、最新のChromeブラウザにて、以下のGoogleのWebRTCのデモアプリにアクセスすることです。
https://apprtc.appspot.com/
Webカメラとマイクが必要ですので、ノートパソコンなどで試すのが一番でしょう。

最初にWebカメラやマイクへの接続許可を求められるます。許可をするとまずは自分の顔が映ります。画面にはチャットルームのURLが表示されるので、そちらを別の方にメール等で送り、その方が同じようにアクセスするとビデオチャットが行えます。

最近では、FirefoxもWebRTCへの対応を進めており、最新のFirefox（Firefox 34）には、動画・音声チャット機能“Firefox Hello”が搭載されていますので、こちらも試してみる価値はあります。

いくつかWebRTCの実装を試して、画質等を確認してみましたが、社内ネットワークで高画質で通信しようとした際に、映像・音声で一番しっくりきたのが、さきほどご紹介しましたGoogleのデモアプリでした。

しかしながら、このデモアプリは、チャットルームのURLさえわかれば第三者もチャットに入れてしまいますので、そのまま使うのはセキュリティ上の問題があります。
幸い、このデモアプリはgithubにてソースコードが公開されていますので、そちらを入手して手を加えることが可能。社内ネットワークからしか使えなくするなどして使ってみようとしているところです。

自分用に一番簡単に使うには、Google App EngineというPaaS型クラウドサービスを利用することです。今回私も、動かしてみるために初めてGoogle App Engineを使いましたが、AWSなどとは全く勝手が違い少々戸惑いました。おまけにこのデモアプリに関する日本語の情報も少ない状況ですので、同じようにいじり倒してみたい方向けに、以下に動作環境を構築する手順を記しておきます。ご参考まで。

１．Google App Engine を使ったことがない場合は、Google App Engine のアカウント登録が必要です。
https://developers.google.com/appengine/
アカウントを登録後、予めプロジェクトを作成しておくと楽です。

２．開発環境のダウンロード
https://cloud.google.com/appengine/downloads
Google App Engine SDK for Pythonを選択して、自分の環境に合わせたツールをダウンロード

３．Pythonの実行環境のダウンロード
Google App Engine SDK for Python をインストールする最中に、Python の実行環境についてもダウンロードする必要があります。
現時点（2014年12月20日）では、Python 2.7系の最新版は2.7.9となりますが、この2.7.9はGoogle App Engine との相性が悪いようです。ですので、ひとつ前の2.7.8を利用します。

４．開発環境のインストールを完了させる
Windowsでは、Google App Engine Launcher というものがインストールされます。

５．デモアプリのソースコード入手
ソースコードは以下から落としてきます。
https://github.com/GoogleChrome/webrtc/

このWebRTCのビデオチャットを行うために必要となるファイルは、
tree/master/samples/web/content/apprtc
の中のファイルになります。ただし、
tree/master/samples/web/content/apprtc/js/adapter.js
は上の階層のファイルを参照しているので、コピーして置き換える必要があります。

６．Google App Engine Launcher にてアプリケーションの追加
Google App Engine Launcher を立ち上げて、メニューから Add Existing Application... を選択し、５．で用意したソースコードのパスを指定。
その後、追加したプロジェクトを選択し、Edit を押すと、app.yaml というファイルが開くので、一行目を１．で作成したプロジェクトのプロジェクトIDに変更。つづいて、Deploy を押すと Google App Engine のサーバにファイルがアップされます。

７．動作確認
問題なければ、
https://xxxxxx.appspot.com/
を開くとビデオチャットの画面が開くはず。 ※ xxxxxx はプロジェクトIDの文字列に置き換えてください。

うまく表示されない場合などは、Chromeのデベロッパーツールで見てみると、何かしらのエラーが出ているかもしれません。
出ている場合はその内容に応じて修正。

私がセットアップした際には、 No 'Access-Control-Allow-Origin' header is present on the requested resource. みたいなエラーが出ていて、この解決が少々厄介でした。
利用されているTURNサーバが 'Access-Control-Allow-Origin' というヘッダを返さないために Chrome で TURN に接続できないために出るエラーです。
仕方がないので、PHPで 'Access-Control-Allow-Origin' というヘッダを付与するスクリプトを書き、そちらを中継させることでエラーを回避させました。

以上となります。
ネットで検索しても、なかなか情報が少なかったので、試してみたい方の参考になれば幸いです。
では今日はこれにて失礼いたします。