遠隔作業支援システムの環境準備
これからWebRTCを活用してこの遠隔作業支援システムを実装していきますが、シグナリング処理やデータ通信の信頼性制御を自力で実装するのはかなり大変です。そこで「PeerJS」というライブラリを用います。
PeerJSとは
PeerJSはブラウザごとに異なるWebRTCの実装を隠蔽し、イベントドリブンで使いやすいAPIを提供するOSS（MITライセンス）のWebRTCラッパーです。NTTコミュニケーションズがサービスしているWebRTCプラットフォームの「SkyWay」も、クライアントライブラリとしてこのPeerJSをベースとした実装が提供されています。
また、PeerJSと容易に接続できるシグナリングサーバの実装（peerjs-server）も公開されているため、面倒なシグナリング処理はすべてPeerJSにお任せすることができます。
PeerJSが提供するシグナリングサーバ（peerjs-server）は、STUNサーバやTURNサーバの機能を持っていません。
STUNサーバやTURNサーバが必要な場合、Googleなどがインターネット上に公開しているSTUNサーバを利用するか、必要であればこのOSSのようなSTUN&TURNサーバのOSS実装を使って独自サーバを立ち上げても良いでしょう。
サーバサイドの準備
遠隔作業支援システムとして必要になるサーバ機能としては、以下の2つの機能があります。
- PeerJSのシグナリング処理を中継する機能
- スマートグラスや監視端末のブラウザへ、HTMLとJavaScriptを配信する機能
peerjs-serverは、Node.js上にwsとrestifyを用いて実装されています。「ws」はWebSocketのハンドリングを行うフレームワークで、接続してきたブラウザ間のシグナリング処理の中継を行います。「restify」はREST Webサービスの構築に特化したフレームワークで、WebRTCのOffer／Answer／Candidateなどを中継するエンドポイントを提供します（restifyはRuby界隈で有名なSinatraと同じようなコンセプトのフレームワークです）。
restify自身には特定の正規表現に合致したGETリクエストを静的ファイルの配信にルーティングする機能がありますが、現時点でのpeerjs-serverではこの静的ファイル配信機能を利用するためのAPIは実装されていません。peerjs-serverの実装はシンプルなため、restifyの静的ファイル配信機能を公開するAPIを実装することは難しくありませんが、今回はライブラリ自体に手を加えることは見送り、expressを用いて静的ファイルを配信させることにします。
今回利用したサーバサイドのライブラリは、下記です。
サーバサイドの完全なソースコードは、遠隔作業支援システムの公開リポジトリ（remote-monitor）を参照してください。
| ライブラリ | バージョン |
|---|---|
| node.js | 0.10.28 |
| peer（peerjs-serverのnpm登録名） | 0.2.5 |
| express | 4.2.0 |
今回はpeerjs-serverとexpressを同一サーバに同居させましたが、実は別サーバで動作させても問題ありません。peerjs-serverが用いるWebSocketプロトコルは、AjaxやCometと違ってクロスドメイン制約に影響されないためです。
express-generatorによる雛形作成
4系のexpressは、scaffoldを行う機能が本体から分離してexpress-generatorという別パッケージになりました。scaffoldしなくてもexpressアプリは作れますが、今回は手間を省くためにexpress-generatorを使います。
ただし、scaffoldすると静的ファイル配信には不要なモジュールも読み込まれてしまいます。無駄なく美しく作りたい場合はexpress-generatorを使わないほうが良いかもしれません。
$ express -e [project name] $ cd [project name]
package.json の依存ライブラリにpeerライブラリを追加
express-generatorを用いて雛形を作成すると、依存ライブラリを定義するpackage.jsonが自動生成されています。このpackage.jsonにpeerライブラリを追加します。
{
...
"dependencies": {
...
"ejs": "~0.8.5",
"peer": "~0.2.5"
}
}
dependenciesの最後に、「"peer": "~0.2.5"」を追加します。1つ前の行の末端にカンマを追加することを忘れないでください。
依存ライブラリのインストール
npmを用いて依存ライブラリをインストールします。
$ npm install
起動スクリプトの変更
express-generatorを用いてscaffoldした場合、これまでのexpress3系とは違い、expressの設定を行うapp.jsと、ポートなどを指定してサーバを起動するスクリプト（bin/www）が分離して見通しが良くなりました。
今回はpeerjs-serverの起動処理をbin/wwwに追記することになります。
#!/usr/bin/env node
...
app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function() {
debug('Express server listening on port ' + server.address().port);
});
var PeerServer = require('peer').PeerServer; //追加
var peerServer = new PeerServer({port: 9000, path: '/remote-monitor', debug:true}); //追加
最後の2行を追加しただけです。この2行により、ポート9000、REST APIのPrefixを/remote-monitorにしてシグナリングサーバが起動します。expressはポート3000で起動するため、今回の遠隔作業支援システムのサーバは3000と9000の2つのポートを占有することになります。
サーバの起動
express-generatorでscaffoldした場合、 node app.js で起動するのではなくnpm経由で起動スクリプトを実行する形になります。
$ npm start
ここまでで、サーバサイドの準備は終わりです。WebRTCの本質はブラウザ上で動作するロジックなので、サーバサイドにはほとんど手を入れるところがありません。
スマートグラスと監視端末の準備
最後にスマートグラスと監視端末を準備しましょう。と言いましても、WebRTC対応のブラウザをインストールするだけです。
これから解説する遠隔作業支援システムは、下記のデバイスを用いて動作確認を行いました。
| デバイス | OS | ブラウザ | バージョン |
|---|---|---|---|
| Vuzix M100 | Android 4.0.4 | Google Chrome for Android | 35.0.1916.141 |
| HTC J One HTL22 | Android 4.2.2 | Google Chrome for Android | 35.0.1916.141 |
| Firefox for Android | 30 | ||
| Opera for Android | 22.0.1485.78487 |
| デバイス | OS | ブラウザ | バージョン |
|---|---|---|---|
| Macbook Air Mid 2011 | Mac OS X 10.7.5 | Google Chrome | 35.0.1916.153 |
| Surface Pro 3 | Windows 8.1 Pro | Google Chrome | 36.0.1985.125m |
Vuzix M100は、Vuzix社が販売する片眼非透過型のスマートグラスです。Android4.0系で動作しており、カメラ・マイク・スピーカーやGPS、ジャイロなどの各種センサー類が搭載されています。
しかし残念ながら、Vuzix M100の標準ブラウザではWebRTCは動作しませんでした。そのため、別のAndroidデバイスから取り出したGoogle Chrome for AndroidのAPKファイルをUSB経由でインストールし、遠隔作業支援システムの動作確認を行っています。
検証したネットワーク環境
これから構築する遠隔作業支援システムは、下記2つのネットワーク環境で動作検証を行いました。
動作検証1（同一LAN内）
スマートグラスと監視端末、およびシグナリングサーバをすべて同一LAN内に配置した環境です。スマートグラスと監視端末に付与されたプライベートIPアドレスで、お互いに通信できます。
動作検証2（NAT下 & インターネット経由）
スマートグラスと監視端末が、それぞれ別経路でインターネットに接続される環境です。スマートグラスと監視端末にはグローバルIPアドレスは付与されず、グローバルIPアドレスを持ったゲートウェイルータによってNATされます。スマートグラスと監視端末は付与されたプライベートIPアドレスでは通信できません。ただしインターネット上に存在するシグナリングサーバとSTUNサーバには、スマートグラスからも監視端末からも到達可能です。
実装編では
今回は「ブラウザ上で動作する遠隔作業支援システム」の構築を念頭に、基礎知識編と題してWebRTCの基礎知識とPeerJSを利用するための環境準備について取り上げました。次回の実装編では、ブラウザ上で動作するPeerJSを用いたWebRTCプログラムを解説します。近ごろのJavaScriptプログラムらしいコールバックを駆使した複雑な実装ですが、一つ一つステップを追っていけば、無理なく理解できるでしょう。次回もお楽しみに！
