1. 1
Magic Leap で
WebRTC
触ってみた
Nisho Matsushita | HoloLab Inc. | Magic Leap Ambassador | 2021.4.15
ARヒノボル @liketableteninu

2. 2
WebRTC の基本
01

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に従って
音声、映像、データを
やり取り

27. 27
MLWebRTC 入門
02

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)
シグナリングサーバ
非サポート
サポート

30. WebRTC の
ML サンプル
30

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

37. 37
03
MLWebRTC
+ Ayame Labo

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