WebRTC でスマートカメラを開発するチュートリアルやってみた

WebRTC Meetup Tokyo #25 2023/09/22
1 本目の資料

動画はこちら

Transcript

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