Tech Sketch Bucket of Technical Chips by TIS Inc.

WebRTC(PeerJS)で遠隔作業支援システムを作る(2)

Pocket

WebRTCを用いた遠隔作業支援システムを作ります。 前回 はWebRTCの概要について説明しましたが、今回は遠隔作業支援システムを作るための準備として、スマートグラス( Vuzix M100 )とサーバサイド( node.js + express + peerjs-server )の環境構築について解説します。


スマートグラス Vuzix M100とは

Vuzix M100 はVuzix社が開発した片眼非透過型のスマートグラスです。Android4.0系で動作しており、カメラ・マイク・スピーカーやGPS&磁気コンパス、3軸のジャイロ&加速度センサーなど、ひと通りのセンサー類が搭載されています。

Vuzix_01.jpg Vuzix_02.jpg Vuzix_03.jpg Vuzix_05.jpg

Vuzix M100にはヘッドセットや保護メガネへのマウント用具が付属するなど、業務用途として利用することも念頭に置かれています。実際昨年開催されたSAP社が主催するイベント SAPPHIRE NOW 2013 では、Vuzix M100を用いてフィールドワーク作業や倉庫でのピッキング作業を支援するデモが公開されたようです(以下はSAP社提供のコンセプト動画)。

https://www.youtube.com/watch?v=5g7WUOB1uNk

Vuzix M100の準備

さてこのコンセプト動画にははるかに及びませんが、Vuzix M100とWebRTCを用いて遠隔作業支援システムを作りましょう。

しかし残念ながら、Android 4.0系であるVuzix M100の標準ブラウザではWebRTCが動作しません。またGoogle Playも導入されていないため、Play StoreからWebRTCが動作するChromeやFirefox、Opera等をインストールすることもできません。
そこで今回は、別のAndroidデバイスからGoogle Chrome for AndroidのAPKファイルを取り出し、Vuzix M100にUSB経由でインストールします。

Google Chrome for AndroidのAPK取り出し

1. Chrome for AndroidがインストールされているAndroidデバイスをPCへ接続
2. 次のコマンドを実施すると、インストールされているGoogle Chrome for AndroidのAPKファイルのパスがわかる

3. APKファイルを取り出し

Vuzix M100へGoogle Chrome for Androidをインストール

1. Vuzix M100とPCを接続(Vuzix M100のVendorIDは 0x1bae
2. 次のコマンドでGoogle Chrome for Androidをインストール

3. Vuzix M100のホーム画面にGoogle Chrome for Androidのアイコンが表示されることを確認

サーバサイドの準備

次に、遠隔作業支援システムのサーバサイドを準備しましょう。今回必要なのは、スマートグラスや監視端末のブラウザへHTMLとJavaScriptを配信する機能と、WebRTCのシグナリングを中継する機能です。

PeerJSの開発チームが提供しているシグナリングサーバである peerjs-server は、 node.js 上に wsrestify を用いて実装されています。wsはWebSocketのハンドリングを行うフレームワークで、接続してきたブラウザ間のシグナリング処理の中継を行います。restifyはREST Webサービスの構築に特化したフレームワークで、WebRTCのOffer / Answer / Candidate等を中継させるエンドポイントを提供します(restifyはRuby界隈で有名なSinatraと同じようなコンセプトのフレームワークです)。

restify自身には特定の正規表現に合致したGETリクエストを静的ファイルの配信にルーティングする機能がありますが、peerjs-serverの現時点の実装では利用できません。peerjs-serverの実装はシンプルなため、静的ファイルの配信を行わせるように手を入れることは難しくありませんが、今回は見送り express で静的ファイルを配信させることにします。

今回利用したサーバサイドのライブラリは、下記となります。

ライブラリ バージョン
node.js 0.10.28
peer (peerjs-serverのnpm登録名) 0.2.5
express 4.2.0

完全なソースコードは、 githubのリポジトリ を参照してください。

express-generatorによるscaffold

4系のexpressは、scaffoldを行う機能が本体から分離してexpress-generatorという別パッケージになりました。scaffoldしなくてもexpressアプリは作れますが、今回は手間を省くためにexpress-generatorを使います。

ただしscaffoldすると静的ファイル配信には不要なモジュールも読み込まれてしまいます。無駄なく美しく作りたい場合はexpress-generatorを使わないほうが良いかもしれません。

package.jsonの変更

package.json の依存ライブラリにpeerモジュールを追加します。

dependenciesの最後に "peer": "~0.2.5"を追加します。ひとつ前の行の末端にカンマを追加することを忘れないでください。

モジュールインストール

npmを用いてモジュールをインストールします。

npm list コマンドでpeerモジュールがインストールされていることを確認してください。

起動スクリプトの変更

express-generatorを用いてscaffoldした場合、expressの設定を行うapp.jsと、ポート等を指定してサーバを起動するスクリプト(bin/www)が分離して見通しが良くなりました。
今回はpeerjs-serverの起動処理を bin/www に追記することになります。

最後の2行を追加しただけです。
peerモジュールを読み込み、ポート9000、REST APIのPrefixを/remote-monitorにしてシグナリングサーバが起動します。expressはポート3000で起動するため、今回の遠隔作業支援システムのサーバは二つのポートを占有することになります。

サーバの起動

express-generatorでscaffoldした場合、 node app.js で起動するのではなくnpm経由で起動スクリプトを実行する形になります。

ここまでで、サーバサイドの準備は終わりです。WebRTCの本質はブラウザ上で動作するロジックですので、サーバサイドにはほとんど手を入れるところがありません。

次回は

スマートグラスとサーバサイドの準備が整いましたので、これからブラウザ上で動作するWebRTCのロジックをPeerJSを用いて記述していきましょう。次回はCoffeeScriptで記述されたモジュールの全体構成と、PeerJS & MediaStreamの初期化処理について解説します。

エンジニア採用中!私たちと一緒に働いてみませんか?