Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tetter
September 22, 2023
320

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

tetter

September 22, 2023
Tweet

Transcript

  1. 自己紹介 2 NAME: - tetter (Tetta Maeda) FEATURES: - WebRTC

    Meetup 運営 - AI / ML on Browser を試すのが好き @tttr_mt tetter27 2017 2018 2022 前職 (通信事業会社) Android 〃 EdgeAI NTTコミュニケーションズ株式会社 WebRTC CARRIER:
  2. 全体像 (もうちょっと詳しく) 7 Firebase Cloud Function for Firebase 自宅LAN Realtime

    Database Firebase Web app Google Nest Hub (任意の) PC </> Actions Google
  3. 事前準備 (1/2) 8 自宅LAN Google Nest Hub (任意の) PC Actions

    Google Firebase Cloud Function for Firebase Realtime Database Firebase Web app </> 初期化 デプロイ 初期化 初期化 デプロイ 「WebRTC の表示」を登録
  4. 事前準備 (2/2) 9 自宅LAN Google Nest Hub (任意の) PC Actions

    Google Firebase Cloud Function for Firebase Realtime Database Firebase Web app </> Home App トークン取得 登録 登録
  5. 大まかな処理の流れ 10 1. 各デバイスで Firebase へアクセスする 2. 経路候補を収集する 3. Firebase

    で経路候補等の情報を交換する 4. お互いに到達できる経路を探す 5. 接続してストリームを送信
  6. 大まかな処理の流れ 11 1. 各デバイスで Firebase へアクセスする 2. 経路候補を収集する 3. Firebase

    で経路候補等の情報を交換する 4. お互いに到達できる経路を探す 5. 接続してストリームを送信
  7. 1. 各デバイスで Firebase へアクセスする (1/2) 12 自宅LAN Google Nest Hub

    (任意の) PC Actions Google Firebase Cloud Function for Firebase Realtime Database Firebase Web app </> ① App 取得 </> ② アクセス
  8. 1. 各デバイスで Firebase へアクセスする (2/2) 13 自宅LAN Google Nest Hub

    (任意の) PC Actions Google Firebase Cloud Function for Firebase Realtime Database Firebase Web app </> ② アクセス </> ① 「WebRTCを表示して」
  9. 大まかな処理の流れ 14 1. 各デバイスで Firebase へアクセスする 2. 経路候補を収集する 3. Firebase

    で経路候補等の情報を交換する 4. お互いに到達できる経路を探す 5. 接続してストリームを送信
  10. 2. 経路候補を収集する (1/3) 15 自宅LAN Google Nest Hub (任意の) PC

    </> - 自身に割り当てられた IP アドレスを収集 - 「host」と表記される - お互い同じ NW ならこれで接続できる
  11. 2. 経路候補を収集する (2/3) 16 自宅LAN Google Nest Hub (任意の) PC

    </> - STUN サーバに接続して跳ね返ってきた自身の IP を収集 - 「srflx (server reflexive) 」と表記される STUN
  12. なぜ STUN が必要? 17 自宅LAN Google Nest Hub (任意の) PC

    </> - 相手が別 NW にいる場合はローカル IP ではたどり着けない (*) - NAT (ルータ) が IP を変換しているため - STUN で確認した IP はインターネット側から見たときのグローバル IP なので到達可能! 別LAN STUN host srflx (*) IPv6 のグローバル IP が振られている場合はその限りではない
  13. 2. 経路候補を収集する (3/3) 18 自宅LAN Google Nest Hub (任意の) PC

    </> - TURN サーバの IP アドレスを収集 - 「relay」と表記される TURN
  14. relay 別LAN なぜ TURN が必要? 19 自宅LAN Google Nest Hub

    (任意の) PC </> - NAT の相性が悪かったり Firewall があると接続できない - Symmetric NAT - UDP を遮断する F/W - 許可リスト設定の F/W - TURN はストリームを中継、変換してくれるので到達可能! - ただし、このチュートリアルではデフォルト OFF (*) TURN (*) おそらく TURN サーバの運用はコストがかかるし今回のユースケースでは過剰なため 例)
  15. 大まかな処理の流れ 20 1. 各デバイスで Firebase へアクセスする 2. 経路候補を収集する 3. Firebase

    で経路候補等の情報を交換する (シグナリング) 4. お互いに到達できる経路を探す 5. 接続してストリームを送信
  16. 3. 経路候補等の情報を交換する (2/5) 22 自宅LAN Google Nest Hub (任意の) PC

    Firebase Cloud Function for Firebase Realtime Database Firebase Web app </> Write </> Offer SDP 経路候補を収集
  17. 3. 経路候補等の情報を交換する (3/5) 23 自宅LAN Google Nest Hub (任意の) PC

    Firebase Cloud Function for Firebase Realtime Database Firebase Web app </> </> Offer SDP として登録 Read
  18. 3. 経路候補等の情報を交換する (4/5) 24 自宅LAN Google Nest Hub (任意の) PC

    Firebase Cloud Function for Firebase Realtime Database Firebase Web app </> </> Answer SDP Write 経路候補を収集
  19. 3. 経路候補等の情報を交換する (5/5) 25 自宅LAN Google Nest Hub (任意の) PC

    Firebase Cloud Function for Firebase Realtime Database Firebase Web app </> </> Read Answer SDP として登録
  20. 大まかな処理の流れ 27 1. 各デバイスで Firebase へアクセスする 2. 経路候補を収集する 3. Firebase

    で経路候補等の情報を交換する 4. お互いに到達できる経路を探す 5. 接続してストリームを送信
  21. 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 に対応していないらしい
  22. 大まかな処理の流れ 29 1. 各デバイスで Firebase へアクセスする 2. 経路候補を収集する 3. Firebase

    で経路候補等の情報を交換する 4. お互いに到達できる経路を探す 5. 接続してストリームを送信 ICE