PeerJSを用いたリモート監視システムのサンプル #Node.js

WebRTCとNode.jsを用いたリモート監視システムのサンプルを書きました。

WebRTCを自力実装するのは結構面倒なため、PeerJSを利用しています。
またシグナリングサーバもPeerJSが提供するpeerjs-serverを利用しました。

利用したライブラリ

peer:0.2.5
express:4.2.0
node:0.10.28

動作検証した環境

Google Chrome 35.0.1916.153 / Mac OS X 10.7.5 / Macbook Air Mid 2011
Google Chrome for Android 35.0.1916.141 / Android 4.2.2 / HTL22
Google Chrome for Android 35.0.1916.141 / Android 4.0.4 / Vuzix M100

Vuzix M100

Vuzix M100は、Vuzix社が販売する片眼非透過型のスマートグラスです。Android4.0系で動作しており、カメラ・マイク・スピーカーやGPS/3軸センサーなど、ひと通りのセンサー類が搭載されています。

ただし残念なことに、Vuzix M100にデフォルトインストールされている標準ブラウザではWebRTCが動作しません。またGoogle Playも導入されていないため、Play StoreからWebRTCが動作するブラウザをインストールすることもできません。

そこで今回は、別のAndroidデバイスからGoogle Chrome for AndroidのAPKファイルをadb pullし、Vuzix M100にadb installすることで、Vuzix M100上でGoogle Chromeを利用できるようにしました。
（Vuzix M100のVendorIDは "0x1bae" です）

コア部分

PeerJSを使いP2Pでカメラ映像や音声の交換、及びイベント送受信を行う部分です。CoffeeScriptで書かれています。

全体構造

remote-monitor.coffee

ns = do ->
  exports = {}

  host = 'xxx.xxx.xxx.xxx' #シグナリングサーバのホスト名（or IPアドレス）'
  port = 0000 #シグナリングサーバを動作させているポート番号
  path = '/remote-monitor' #シグナリングサーバのPATH
  debug = 3

  class exports.RemoteMonitor
    ...

  exports

Globalにはnsという変数のみを公開し、これを今回のアプリの名前空間とします。hostやport等の変数は即時関数内のみ利用可能で、ns名前空間に公開するのはRemoteMonitorコンストラクタ関数のみとしています。

以下のJavascriptコードと同じです。

remote-monitor.js

var ns = (function() {
  var exports = {};
  var host = 'xxx.xxx.xxx.xxx';
  ...
  function RemoteMonitor() {...}
  exports.RemoteMonitor = RemoteMonitor;
  return exports;
})();

RemoteMonitor

remote-monitor.cofee

  class exports.RemoteMonitor
    constructor: ->
      # peerオブジェクトの作成
      # シグナリングサーバへの接続実施
    initialize: (video, initializing, waiting) ->
      # WebRTCを用いてカメラとマイクのmediastreamを取得
      # stream取得成功後、マイクは一旦OFFにする
    onOpen: (peerIDsetting) ->
      # peerの'open'イベントリスナを登録する
      # シグナリングサーバとの接続が確立すると'open'イベントが発火し、接続元ごとのユニークIDが採番される
    onError: (showError, waiting) ->
      # peerの'error'イベントリスナを登録する
    onConnection: ->
      # peerの'connection'イベントリスナを登録する
      # 別のpeerからconnect要求が発行されると発火する
    onCall: (video, connecting, waiting) ->
      # peerの'call'イベントリスナを登録する
      # 別のpeerからcall要求が発行されると発火する
      # call要求元へ初期化済みのMediaStreamをanswerする
    makeCall: (callto, video, connecting, waiting) ->
      # calltoで指定したpeerへcall要求を送る
    closeCall: ->
      # 確立済みのcallを閉じる
    toggleMIC: ->
      # 自分自身のマイクのON/OFFをトグルする
      # 接続済みのpeerに対し、connect要求を発行して'mic-on','mic-off'メッセージを送信する
    terminate: ->
      # 全ての接続を破棄し、peerオブジェクトを無効化する

    __connect: (call, video, waiting) ->
      # 接続してきたリモートpeerに対し、MediaStreamが確立した場合のイベントハンドラとリモートpeerが切断された場合のイベントハンドラを登録する

WebRTC関連処理を実装したコンストラクタ関数です。device.htmlとmonitor.htmlから利用されます。

処理の流れ

モニター側

初期化

constructor実行により、シグナリングサーバとの接続する
peerのerrorイベントリスナを登録する
シグナリングサーバとの接続が確立するとpeerのopenイベントが発火する
initialize実行により、ローカルカメラ・マイクのMediaStreamを取得する
MediaStream取得に成功すると、monitor.htmlから渡されたwaitingコールバック関数を呼び出す（接続したいpeerのIDを入力するフォームが画面に表示される）

デバイスへ接続

画面から接続するデバイスのIDを入力し、CALLボタンを押す
makeCall関数が起動し、指定したpeerへcall要求を送る
call要求が成功すると、接続したデバイスのMediaStreamをラップするMediaConnectionオブジェクトが得られる
monitor.htmlから渡されたconnectingコールバック関数を呼び出す（デバイスのカメラ映像が画面に表示される）

デバイスへMIC ON要求

画面上のMIC ONボタンを押す
toggleMIC関数が起動し、ローカル（モニター側）のマイクをONにする
接続したpeerへconnect要求を送る
connectionが確立した後、得られたDataChannelへ'mic-on'メッセージをsendする

デバイスを切断

画面上のEND CALLボタンを押す
closeCall関数が起動し、接続時に得られたMediaConnectionオブジェクトをcloseする

デバイス側

初期化

constructor実行により、シグナリングサーバとの接続する
peerのopen, error, connection, callイベントリスナを登録する
シグナリングサーバとの接続が確立するとpeerのopenイベントが発火し、ユニークIDが採番される
initialize実行により、ローカルカメラ・マイクのMediaStreamを取得する
MediaStream取得に成功すると、device.htmlから渡されたwaitingコールバック関数を呼び出す（自身のIDが画面に表示される）

モニター側から接続

モニター側からのcall要求が届くとpeerのcallイベントが発火し、モニター側のカメラとマイクのMediaStreamが得られる
device.htmlから渡されたconnectingコールバック関数を呼び出す（デバイスのカメラ映像が画面に表示される）

モニター側からのMIC ON要求

モニター側からconnect要求が届くとpeerのconnectionイベントが発火し、モニターとデバイス間でDataChannelが確立する
DataChannelを通じてデータが届くとconnectionのdataイベントが発火する
届いたdataが'mic-on'の場合、自身のマイクをONにする

モニター側からの切断

モニター側から切断されるとcallのcloseイベントが発火し、waitingコールバック関数を呼び出す（カメラ映像が消え、自身のIDが再び画面に表示される）