Magic Leap で WebRTC 触ってみた
- 1. 1 Magic Leap で WebRTC 触ってみた Nisho Matsushita | HoloLab Inc. | Magic Leap Ambassador | 2021.4.15 ARヒノボル @liketableteninu
- 3. WebRTC とは？ 3 WebRTC (Web Real-Time Communication) は音声や映像を取り込 み、ストリーミングしたり、アプリケーション間で任意のデータを交換し たりすることを、仲介者を介さず (P2P) にリアルタイムで可能にする 技術 (OSS) です。 WebRTCを構成する一連の標準規格は、ユーザがプラグインやサー ドパティ製のソフトウェアをインストールすることなく、P2Pでデータの 共有や電話会議することを可能にしています。 Magic Leap “Unity WebRTC Guide” より引用・翻訳
- 4. WebRTC を採用しているコミュニケーションツール Google Meet Facebook Messenger Discord
- 5. WebRTC を実現するための構成例 PC (Peer) Magic Leap1 (Peer) シグナリングサーバ P2P 確立前の通信 P2P 確立後の通信 ① ① ②
- 6. WebRTC の P2P 通信を開始するための情報 SDP (Session Description Protocol) マルチメディア（映像、音声）の解像度、フォーマット、コーデック、暗号化、port番号、IP アドレスなどの情報をまとめて記述する方式 ICE (Interactive Connectivity Establishment) P2P 通信の経路決定、特に NAT やファイヤーウォール越えのために必要な情報
- 7. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ サ ー バ 接 続
- 8. サ ー バ 接 続 P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ サ ー バ 接 続
- 9. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ createOffer()
- 10. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ createOffer() SDP offer
- 11. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ setLocalDescription() SDP offer SDP
- 12. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ SDP offer
- 13. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ SDP offer SDP
- 14. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ setRemoteDescription() SDP SDP
- 15. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ createAnswer() SDP SDP
- 16. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ createAnswer() SDP answer SDP SDP
- 17. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ setLocalDescription() SDP answer SDP SDP SDP
- 18. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ SDP answer SDP SDP SDP
- 19. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ SDP answer SDP SDP SDP
- 20. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ setRemoteDescription() SDP SDP SDP SDP
- 21. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ ICE candidate onicecandidate() SDP SDP SDP SDP ICE candidate onicecandidate()
- 22. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ ICE candidate SDP SDP SDP SDP ICE candidate
- 23. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ ICE candidate SDP SDP SDP SDP ICE candidate
- 24. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ ICE candidate addIceCandidate() SDP SDP SDP SDP addIceCandidate() ICE candidate
- 25. P2P通信が開始されるまでの流れ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ ICE candidate SDP SDP SDP SDP ICE candidate P2P確立！
- 26. P2P通信が開始されてから PC (Peer) Magic Leap1 (Peer) シグナリングサーバ ICE candidate SDP SDP SDP SDP ICE candidate SDPに従って 音声、映像、データを やり取り
- 28. MLWebRTC 28 ● WebRTC API を Lumin OS 用に使いやすくラッピングした C# API ● 提供されている API 例 ○ P2P: connection の作成 ○ SDP: local (offer/answer) の作成（と同時に設定）、 remote の設定 ○ ICE: candidate の作成、 remote の設定 ○ 映像: local/remote の stream の追加、 MRCamera 対応 ○ 音声: local/remote の stream の追加 ○ データ: テキストやバイナリデータの送受信 ○ 各種イベント（P2P導通時、offer/answer作成時、映像音声データ受信時など） ● ただし ○ シグナリングサーバとの通信部分 は自分で実装する必要あり
- 29. MLWebRTC がサポートしている範囲イメージ PC (Peer) Magic Leap1 (Peer) シグナリングサーバ 非サポート サポート
- 31. サンプルの構成 ● シグナリングサーバ ○ SDP/ICE を仲介する REST API サーバ ○ python で起動 ● PC クライアントアプリ ○ Web アプリ ○ WebRTC に対応しているブラウザで起動 ■ Chrome, FireFox, Opera, Safari, Edge など ■ このリンクから確認できる ● ML クライアントアプリ ○ Unity アプリ ○ WebRTC シーンをビルド PC (Peer) Magic Leap1 (Peer) シグナリングサーバ
- 32. 環境 ● シグナリングサーバ ○ command prompt / terminal など ○ python 3 系 ● PC クライアントアプリ ○ WebRTC 対応ブラウザ ● ML クライアントアプリ ○ Unity Engine 2020.2 ○ Magic Leap XR Plugin 6.1.0-preview.2 ○ Magic Leap Unity SDK Package 0.25.0 ○ MLSDK 0.25.0 ○ LuminOS 0.98.20 ● 全て同じローカルエリアネットワーク内で動作する必要あり PC (Peer) Magic Leap1 (Peer) シグナリングサーバ 同一LAN内
- 33. シグナリングサーバ起動 1. terminal または command prompt 起動 2. Assets/MagicLeap/WebRTC/ExampleSetup/Server にて、 $ python server.py を実行。以下のように表示されれば成功 3. サーバをホストしている端末の local IP アドレスを取得 ○ terminal なら ifconfig, command prompt なら ipconfig
- 34. PC クライアントアプリ起動 1. Assets/MagicLeap/WebRTC/ExampleSetup/Browser/index.html をブラウザで起 動 2. カメラと音声の権限を許可 3. Host の欄にサーバの IP アドレスを入力し、 Connect 4. カメラ映像がストリーミングされる
- 35. ML クライアントアプリ起動 1. Assets/MagicLeap/WebRTC/Scenes/WebRTC.unity シーン を build & run 2. ポップアップされる権限確認を全て許可 3. Host の IP アドレスを入力し、接続開始 4. PC クライアントアプリにて映像や音声がストリーミングされる 5. テキストデータの送受信も可能
- 36. MLアプリの（忘れがちな）権限設定 WebRTC に必要な権限 ● Internet ● LocalAreNetwork ● AudioCaptureMic ● CameraCapture シーンの操作に必要な権限 ● ControllerPose
- 38. Ayame Labo とは？ 38 時雨堂さんが公開しているシグナリングサービスです。 利用前に必ず以下のドキュメントを確認しましょう。 Ayame Labo ドキュメント 主に提供されている機能 ● シグナリングサーバ ● ブラウザで動作するクライアントアプリ（映像・音声・データの送受信に対応）
- 39. シグナリングサーバ Ayame 39 ● 基本仕様 ○ シグナリング URL: wss://ayame-labo.shiguredo.jp/signaling ○ WebSocket で接続することで、サーバと情報の通信が可能となる ○ Ayame Labo アカウントに紐づくシグナリングキーでの認証が必要 ○ 1 対 1 専用で、3 つ以上のクライアント接続は拒否する ● Ayame Labo を使えば、遠距離通信が可能に ○ ML が提供しているサンプルサーバだと無理 ● Ayame の詳細仕様はこちらを参照してください 同一LAN 内である 必要なし
- 40. Ayame Labo との通信にあたり新規実装した部分 PC (Peer) Magic Leap1 (Peer) Ayame Labo (WebSocket) 非サポート サポート ここ
- 41. 利用手順 41
- 42. Ayame Labo のサーバとクライアントアプリ起動 42 1. Ayame Labo にログインすれば、自動的にシグナリングサーバが起動 2. サンプルアプリの送受信を選択し、起動 3. 映像コーデックを VP8 に設定（他の設定ではML側でデコード出来ず） 4. 接続ボタンを選択すると、映像と音声がストリーミングされる
- 43. ML クライアントアプリの起動 43 1. アプリ側では事前に、シグナリングサーバ URL、ルーム ID とシグナリングキーを 設定する 2. サーバへの接続を開始し、映像と音声のストリーミングを開始 a. この際 MRCamera か通常のカメラかを選べる 3. お互いの映像/音声が表示される 通常カメラ MRCamera ML側で表示 されている PCカメラの 映像
- 44. 44
- 45. 45 最後に 04
- 46. まとめ 46 ● ML1 でも WebRTC が使えるようになった！！ ○ 映像、音声、データの双方向通信が可能 ○ シグナリングサーバとの通信は自分でハンドリングが必要 ● MRCamera 映像も送信が可能 ○ 装着者以外への状況共有が簡単に（リモートアシストがしやすくなる？） ● 対応しているコーデックなどは今後要調査 ○ 知っている方いたら教えてください ... MRCamera
- 47. ブログ
- 48. 48 Q&A