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

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

4. 作業終了時の処理フロー

　最後に、作業終了時の処理フローを示します。

4-1. 接続経路の破棄

　スマートデバイスと監視端末のどちらでも構わないので「END CALL」をクリックすると、DiveceClassやMonitorClassのcloseCall()メソッドが実行されます（下図はスマートデバイスから「END CALL」した場合です）。

接続経路の破棄

　DiveceClassやMonitorClassのcloseCall()メソッドでは、MediaConnectionとDataConnectionをcloseします。

　MediaConnectionやDataConnectionはどちらかの側からcloseされると、双方でMediaConnection.on('close', callback)イベントやDataConnection.on('close', callback)イベントが発生するため、反対側のMediaConnection.close()とDataConnection.close()も実行されて通信経路が破棄されることになります。

remote-monitor.coffee

class BaseClass
  ...
  closeCall: ->
    console.log "closeCall"
    @emc.close() if @emc?
    @edc.close() if @edc?
  ...

4-2. シグナリングサーバとの接続とMediaStreamの破棄

　最後にスマートデバイスと監視端末双方で「TERMINATE」をクリックすると、DeviceClassやMonitorClassのterminate()メソッドが起動します。

シグナリングサーバとの接続とMediaStreamの破棄

　DeviceClassやMonitorClassの terminate() メソッドでは、もしまだP2P接続が確立していたら切断した後、@peer.destroy()を実行します。これにより、Peer初期化時にpeerjs-serverに登録されたユニークIDが破棄され、WebSocket接続も閉じられます。

remote-monitor.coffee

class BaseClass
  ...
  terminate: ->
    console.log "terminate"
    @emc.close() if @emc?
    @edc.close() if @edc?
    @peer.destroy() if @peer?
  ...

　最後にdevice.htmlやmonitor.html自体を閉じることで、initialize時に接続したMediaStreamも解放されます。

おわりに

　全3回に渡り、遠隔作業支援システムの実装を題材にWebRTCとPeerJSについて解説いたしました。WebRTCを活用すれば、これまで扱うことが困難だったリアルタイムデータの送受信をブラウザ上で簡単に実現できます。これまでのWebの常識にとらわれないエキサイティングなシステムの実現に向け、本稿が一助になれば幸いです。

　次回は、WebアプリケーションフレームワークShinyを使いR言語でWebアプリを作る方法について紹介します。お楽しみに！