Slide 1
Slide 1 text
WebRTC でスマートカメラを開発するチュー
トリアルやってみた
tetter
WebRTC Meetup Tokyo #25
SEP, 22, 2023
# for Beginners
Slide 2
Slide 2 text
自己紹介 2
NAME:
- tetter (Tetta Maeda)
FEATURES:
- WebRTC Meetup 運営
- AI / ML on Browser を試すのが好き
@tttr_mt
tetter27
2017
2018
2022
前職 (通信事業会社) Android
〃 EdgeAI
NTTコミュニケーションズ株式会社 WebRTC
CARRIER:
Slide 3
Slide 3 text
背景 3
- おもしろそうなチュートリアルができていたのでやってみた
- Google I/O 2023 で追加されたらしい
非常にお手軽だったので動作を解説してみる
https://developers.home.google.com/codelabs/smarthome-webrtc
Slide 4
Slide 4 text
作ったもの 4
Slide 5
Slide 5 text
先に結論 5
- 一方向しか対応していないので少し物足りない
- リアルタイムなモニタリングはできる
- 別の NW のモニタリングも一応できる
https://developers.home.google.com/cloud-to-cloud/traits/camerastream?hl=ja
Slide 6
Slide 6 text
全体像 6
Firebase
自宅LAN
Google Nest Hub
(任意の) PC
Slide 7
Slide 7 text
全体像 (もうちょっと詳しく) 7
Firebase
Cloud Function
for Firebase
自宅LAN
Realtime
Database
Firebase
Web app
Google Nest Hub
(任意の) PC
>
Actions
Google
Slide 8
Slide 8 text
事前準備 (1/2) 8
自宅LAN
Google Nest Hub
(任意の) PC
Actions
Google
Firebase
Cloud Function
for Firebase
Realtime
Database
Firebase
Web app
>
初期化
デプロイ
初期化
初期化
デプロイ
「WebRTC の表示」を登録
Slide 9
Slide 9 text
事前準備 (2/2) 9
自宅LAN
Google Nest Hub
(任意の) PC
Actions
Google
Firebase
Cloud Function
for Firebase
Realtime
Database
Firebase
Web app
>
Home App
トークン取得
登録
登録
Slide 10
Slide 10 text
大まかな処理の流れ 10
1. 各デバイスで Firebase へアクセスする
2. 経路候補を収集する
3. Firebase で経路候補等の情報を交換する
4. お互いに到達できる経路を探す
5. 接続してストリームを送信
Slide 11
Slide 11 text
大まかな処理の流れ 11
1. 各デバイスで Firebase へアクセスする
2. 経路候補を収集する
3. Firebase で経路候補等の情報を交換する
4. お互いに到達できる経路を探す
5. 接続してストリームを送信
Slide 12
Slide 12 text
1. 各デバイスで Firebase へアクセスする (1/2) 12
自宅LAN
Google Nest Hub
(任意の) PC
Actions
Google
Firebase
Cloud Function
for Firebase
Realtime
Database
Firebase
Web app
>
① App 取得
>
② アクセス
Slide 13
Slide 13 text
1. 各デバイスで Firebase へアクセスする (2/2) 13
自宅LAN
Google Nest Hub
(任意の) PC
Actions
Google
Firebase
Cloud Function
for Firebase
Realtime
Database
Firebase
Web app
>
② アクセス
>
①
「WebRTCを表示して」
Slide 14
Slide 14 text
大まかな処理の流れ 14
1. 各デバイスで Firebase へアクセスする
2. 経路候補を収集する
3. Firebase で経路候補等の情報を交換する
4. お互いに到達できる経路を探す
5. 接続してストリームを送信
Slide 15
Slide 15 text
2. 経路候補を収集する (1/3) 15
自宅LAN
Google Nest Hub
(任意の) PC
>
- 自身に割り当てられた IP アドレスを収集
- 「host」と表記される
- お互い同じ NW ならこれで接続できる
Slide 16
Slide 16 text
2. 経路候補を収集する (2/3) 16
自宅LAN
Google Nest Hub
(任意の) PC
>
- STUN サーバに接続して跳ね返ってきた自身の IP を収集
- 「srflx (server reflexive) 」と表記される
STUN
Slide 17
Slide 17 text
なぜ STUN が必要？ 17
自宅LAN
Google Nest Hub
(任意の) PC
>
- 相手が別 NW にいる場合はローカル IP ではたどり着けない (*)
- NAT (ルータ) が IP を変換しているため
- STUN で確認した IP はインターネット側から見たときのグローバル IP
なので到達可能！
別LAN
STUN
host
srflx
(*) IPv6 のグローバル IP が振られている場合はその限りではない
Slide 18
Slide 18 text
2. 経路候補を収集する (3/3) 18
自宅LAN
Google Nest Hub
(任意の) PC
>
- TURN サーバの IP アドレスを収集
- 「relay」と表記される
TURN
Slide 19
Slide 19 text
relay
別LAN
なぜ TURN が必要？ 19
自宅LAN
Google Nest Hub
(任意の) PC
>
- NAT の相性が悪かったり Firewall があると接続できない
- Symmetric NAT
- UDP を遮断する F/W
- 許可リスト設定の F/W
- TURN はストリームを中継、変換してくれるので到達可能！
- ただし、このチュートリアルではデフォルト OFF (*)
TURN
(*) おそらく TURN サーバの運用はコストがかかるし今回のユースケースでは過剰なため
例)
Slide 20
Slide 20 text
大まかな処理の流れ 20
1. 各デバイスで Firebase へアクセスする
2. 経路候補を収集する
3. Firebase で経路候補等の情報を交換する (シグナリング)
4. お互いに到達できる経路を探す
5. 接続してストリームを送信
Slide 21
Slide 21 text
3. 経路候補等の情報を交換する (1/5) 21
- 自身への到達経路や使用するメディアなどを Session Description へ
記載して SDP で交換する
今回生成された Session Description
Slide 22
Slide 22 text
3. 経路候補等の情報を交換する (2/5) 22
自宅LAN
Google Nest Hub
(任意の) PC
Firebase
Cloud Function
for Firebase
Realtime
Database
Firebase
Web app
>
Write
>
Offer SDP
経路候補を収集
Slide 23
Slide 23 text
3. 経路候補等の情報を交換する (3/5) 23
自宅LAN
Google Nest Hub
(任意の) PC
Firebase
Cloud Function
for Firebase
Realtime
Database
Firebase
Web app
>
>
Offer SDP
として登録
Read
Slide 24
Slide 24 text
3. 経路候補等の情報を交換する (4/5) 24
自宅LAN
Google Nest Hub
(任意の) PC
Firebase
Cloud Function
for Firebase
Realtime
Database
Firebase
Web app
>
>
Answer SDP
Write
経路候補を収集
Slide 25
Slide 25 text
3. 経路候補等の情報を交換する (5/5) 25
自宅LAN
Google Nest Hub
(任意の) PC
Firebase
Cloud Function
for Firebase
Realtime
Database
Firebase
Web app
>
>
Read
Answer SDP
として登録
Slide 26
Slide 26 text
ちなみに 26
- 交換 (シグナリング) 方法は何でも良い
- WebSocket とかも一般的
- Firebase を除いたらバッチリ書き込まれていた
Slide 27
Slide 27 text
大まかな処理の流れ 27
1. 各デバイスで Firebase へアクセスする
2. 経路候補を収集する
3. Firebase で経路候補等の情報を交換する
4. お互いに到達できる経路を探す
5. 接続してストリームを送信
Slide 28
Slide 28 text
4. お互いに到達できる経路を探す 28
- 自身への経路候補と相手への経路候補をお互いに入手
- それらの組み合わせでチェックリストを作ってお互い試す
- (今回の場合) 接続できた経路の中から優先度が高い経路を採用 (*)
● 候補 A
● 候補 B
● 候補 C
● 候補 D
● 候補 E
● 候補 F
● 候補 A x 候補 D
● 候補 B x 候補 D
● 候補 C x 候補 D
● 候補 A x 候補 E
● 候補 B x 候補 E
● 候補 C x 候補 E
● 候補 A x 候補 F
● 候補 B x 候補 F
● 候補 C x 候補 F
Answer
Offer
チェックリスト
(*) CameraStream トレイトは現在 Trickle ICE に対応していないらしい
Slide 29
Slide 29 text
大まかな処理の流れ 29
1. 各デバイスで Firebase へアクセスする
2. 経路候補を収集する
3. Firebase で経路候補等の情報を交換する
4. お互いに到達できる経路を探す
5. 接続してストリームを送信
ICE
Slide 30
Slide 30 text
5. 接続してストリームを送信 (1/2) 30
自宅LAN
Google Nest Hub
(任意の) PC
>
- 無事ストリームを送信できた
Slide 31
Slide 31 text
5. 接続してストリームを送信 (2/2) 31
- chrome://webrtc-internals/ で採用経路やビットレートを確認 (*)
(*) Edge なら edge://webrtc-internals/、FireFox なら about:webrtc
Slide 32
Slide 32 text
結論 32
- 一方向しか対応していないので少し物足りない
- リアルタイムなモニタリングはできる
- 別の NW のモニタリングも一応できる
https://developers.home.google.com/cloud-to-cloud/traits/camerastream?hl=ja