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

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

2-3. DataConnectionの確立

　MediaConnectionの確立とは並列に、DataConnectionの確立も行います。DataConnectionの接続処理を追ってみましょう。

DataConnection

　WebRTCのRTCPeerConnection上に構築されるRTCDataChannelをラップしたオブジェクト。

DataConnectionの確立

※1　監視端末：DataConnectionの接続要求を送信

　DataConnectionの場合、監視端末が@peer.connect()を呼び出すことで、P2P接続の確立まで処理が進みます。MediaConnection接続時のように、「Offer受信時にAnswerを送信する処理」をスマートデバイス側に明示的に実装する必要はありません。

remote-monitor.coffee

class MonitorClass extends BaseClass
  ...
  makeCall: (callto, video, connecting, waiting) ->
    ...
    # MediaConnectionの接続要求処理
    ...
    # DataConnectionの接続要求処理
    dataConnection = @peer.connect callto, {reliable: true}
      ...
    # DataConnectionのイベント処理
    ...

　@peer.connect()を呼び出す際に、オプションとして{reliable:true}を渡してください。初回でも解説しましたが、RTCDataChannelはSCTPを用いておりTCPのような信頼性のあるデータ転送を行わせることができます。{reliable:true}を設定することで、SCTPに信頼性のあるモードが設定されます。

　もしブラウザの実装がSCTPの信頼性のあるモードをサポートしていない場合、PeerJSは自力で再送や順序制御を行って信頼性のあるデータ通信を実現します（が、遅くなります）。

※2　監視端末：DataConnectionのイベント処理

　DataConnectionの接続が確立しDataConnectionが利用可能となった際に、DataConnection.on('open', callback)イベントが発生します。またDataConnectionの接続が切断されると、DataConnection.on('close', callback)イベントが発生します。

remote-monitor.coffee

class MonitorClass extends BaseClass
  ...
  makeCall: (callto, video, connecting, waiting) ->
    ...
    # DataConnectionのイベント処理
    dataConnection.on 'open', =>
      # DataConnectionが利用可能となった際の処理
      console.log "dataConnection.on 'open'"
      @edc.close() if @edc?
      @edc = dataConnection
    dataConnection.on 'close', ->
      # DataConnectionの接続が切断された際の処理
      console.log "dataConnection.on 'close'"
      @edc.close() if @edc?
    ...

　データ転送を行う際に必要になるため、DataConnection.on('open', callback)イベント発生時にDataConnectionオブジェクトをインスタンス変数に格納しましょう。

　またDataConnection.on('close', callback)イベント発生時には、切断されたDataConnectionをcloseしておきます。

※3　スマートグラス：DataConnectionのイベント処理

　P2P接続が確立すると、@peer.on('connection', callback)イベントが発生しcallback関数へDataConnectionオブジェクトが渡されます。このDataConnectionオブジェクトに対し、以下のイベントハンドラを設定します。

• DataConnection.on('open', callback)イベント：DataConnectionが利用可能となった際に呼び出される。
• DataConnection.on('data', callback)イベント：接続相手先からデータを受信した際に呼び出される。
• DataConnection.on('close', callback)イベント：DataConnectionの接続が切断された際に呼び出される。

remote-monitor.coffee

class DeviceClass extends BaseClass
  ...
  onConnection: (messageHandler = null, imageHandler = null)->
    console.log "onConnection"
    @peer.on 'connection', (dataConnection) =>
      # DataConnectionが確立した際の処理
      console.log "peer.on 'connection'"
      dataConnection.on 'open', =>
        # DataConnectionが利用可能となった際の処理
        ...
      dataConnection.on 'data', (data) =>
        # 接続相手先からデータを受信した際の処理
        ...
      dataConnection.on 'close', =>
        # DataConnectionの接続が切断された際の処理
        console.log "dataConnection.on 'close'"
        @edc.close if @edc?

　DataConnectionが利用可能となった際とDataConnectionの接続が切断された際の処理は、監視端末での実装と同じです。

　接続相手先からデータを受信した際には、受信したデータの種別を確認することで処理を分岐させます（データ受信処理の詳細は、後述します）。

2-4. スマートグラスのカメラ映像を監視端末に表示

　MediaConnectionとDataConnectionが確立すると、遠隔作業支援システムの通常作業時の画面が表示されます。通常作業時は、監視端末にスマートグラスのカメラ映像がリアルタイムに表示されます。

スマートグラスのカメラ映像を監視端末に表示