Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。14:00JavaScriptHTML/CSSポスト本連載ではTIS株式会社が提供している技術ブログ「Tech-Sketch」から「コレは!」というテーマをピックアップし、加筆修正して皆様にお届けしております。今回はPeerJSを用いた「ブラウザ上で動作する遠隔作業支援システム」の後半部分(スマートグラスと監視端末のブラウザ間をP2P接続し、映像や音声、データを双方向に交換する部分)を取り上げます。シグナリングサーバとの接続とMediaStreamの破棄おわりに実装編1では前回の実装編1では、作業準備の処理フローとしてPeerJSの初期化とMediaStreamの取得まで進めました。ここまでで、スマートグラスと監視端末はそれぞれユニークIDが採番されてシグナリングサーバと接続しており、自身のカメラやマイクへのアクセスも可能となっています。通常作業の処理フローでは次に通常作業時の処理フローとして、シグナリング処理からスマートグラスのカメラ映像をリアルタイムに監視端末へ表示する部分まで進めます。接続要求PeerJSを用いて他のPeerとP2P接続する場合、接続先PeerのユニークIDを指定しなければなりません。今回はシンプルに、スマートグラスの接続待ち画面(device画面2/下図左)に表示したユニークID(下図であればf9uyrhv2lzwljtt9)を、監視端末(monitor画面2/下図右)の入力フォームに転記する形で実装しました。監視端末の「CALL」ボタンをクリックすると、MonictorClassのmakeCallメソッドが呼び出され、シグナリング処理が開始されます。MediaConnectionの確立MonitorClassのmakeCallメソッドでは、MediaConnectionの接続要求とDataConnectionの接続要求を一挙に実施します。MediaConnectionの接続処理から追ってみましょう。MediaConnectionWebRTCのRTCPeerConnectionによって交換されるMediaStreamをラップしたオブジェクト。最初に@peer.call()を呼び出すことで、監視端末側からスマートグラスに向けてMediaConnectionの接続要求を出します(Offer送信)。この際、接続済みの監視端末のMediaStreamを引数に渡します。監視端末側ではこの段階でMediaConnectionオブジェクトが取得できますが、P2P接続が確立していないため、まだ利用できません。...BaseClassに実装されたconnectメソッドには、MediaConnectionの接続が確立した際のイベントハンドラと接続が閉じられた場合のイベントハンドラが記述されています(後述)。callback)イベントが発生し、設定したcallback関数が呼び出されます。下記のように、接続要求受信時には、接続済みのスマートグラスのMediaStreamを引数に接続受託を返信(Answer送信)することになります。監視端末・スマートグラス:MediaConnectionのイベント処理MediaConnectionに設定できるイベントハンドラにはいくつかありますが、重要なのは次の2つです。MediaConnectionの接続が確立し、接続相手先のMediaStreamが利用可能となった際に呼び出される。自分もしくは接続相手先が、MediaConnectionを切断した際に呼び出される(MediaConnectionの切断を検知するまでは数秒のタイムラグがある)。callback)イベントの発生時には、取得した接続相手のMediaStreamをvideoタグのsrcに接続し、通常作業画面を表示します。callback)イベントの発生時には、自分自身のマイクをOFFにした後に切断されたMediaConnectionをcloseし、接続待ち画面へ戻ります。戦略技術センターに所属。アーキテクチャ設計やデータモデル策定、フレームワーク構築などバックエンド側のアーキテクトとしてプロジェクトに従事していたが、現部門への異動を契機に戦略技術の検証や新規サービスの事業企画に軸足を移す。プラットフォームチームの意義と実践のポイント1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。プラットフォームチームの意義と実践のポイント1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。プラットフォームチームの意義と実践のポイント1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。