WebRTC（PeerJS）で遠隔作業支援システムを作る（実装編1）

近未来の技術トレンドを先取り！ 「Tech-Sketch」出張所 第16回（中編）

スマートグラスのモジュール

　device.coffeeでは、スマートグラスの画面操作をハンドリングするロジックを記述します。

　画面コンポーネントを操作するコールバック関数とボタンクリック時の処理を定義した後、DeviceClassの各種イベント処理へコールバック関数を設定し、MediaStreamの初期化処理を呼び出します。

device.coffee

$ ->
  dc = new ns.DeviceClass() # DeviceClassのインスタンス化
 
  ## 画面コンポーネントを操作するコールバック関数の定義
  ...
  ## ボタンクリック時の処理定義
  ...
  ## DeviceClassの各種イベント処理へ画面コンポーネントを操作するコールバック関数を設定
  ...
  ## MediaStreamの初期化処理を呼び出す
  ...

　"$ ->" というのはCoffeeScriptでjQueryを用いる際の定石で、以下のよく見るコードと同様、Documentのロードが完了後に記述した処理が実行されることになります。

device.js相当（device.coffeeから実際にコンパイルされたJavaScriptとは異なります）

$(function() {
  ...
});

監視端末のモジュール

　monitor.coffeeでは、監視端末の画面操作をハンドリングするロジックを記述します。

　device.coffeeとほぼ同様の構成ですが、キャプチャした画面にフリーハンドで指示を描く機能を実装するために、各種ローカル変数の定義や画面キャプチャ処理、マウス操作に追随して線を描く処理などが追加実装されています。

monitor.coffee

$ ->
  mc = new ns.MonitorClass() # MonitorClassのインスタンス化
 
  ## ローカル変数の定義
  ...
  ## 画面コンポーネントを操作するコールバック関数の定義
  ...
  ## ボタンクリック時の処理定義
  ...
  ## カメラ映像のキャプチャとフリーハンドでの指示を描く処理
  ...
  ## MonitorClassの各種イベント処理へ画面コンポーネントを操作するコールバック関数を設定
  ...
  ## MediaStreamの初期化処理を呼び出す
  ...

1. 作業準備の処理フロー

　それでは遠隔作業支援システムの処理フローと実装をステップを追って確認しましょう。作業準備として行うのは、PeerJSの初期化とMediaStream取得までです。

1-1. HTMLとJavaScriptの取得

　前回構築したexpressより、必要なHTMLやJavaScript、CSSを取得します。

HTMLとJavaScriptの取得

　スマートグラスと監視端末それぞれで行う処理で前後関係はありませんので、お互い非同期に実行して構いません。