Note

3年後の自分のために書いています

WebRTC + Firebase のチュートリアルやってみた

See. https://webrtc.org/getting-started/firebase-rtc-codelab

ほぼ写経しただけ、👆 のチュートリアルの通りに書いても動かなかったので、サンプルリポジトリ の方を参考にした。

成果物

ブラウザで動くシンプルな 1 対 1 のビデオ通話アプリケーション。 チュートリアルではローカルでの動作確認までしか書いてないけど、せっかくなので Firebase Hosting にデプロイまでした。

使い方

  1. Open camera & microphone でカメラとマイクを許可
  2. Create room を押下すると Room ID が発行される
  3. 別の PC で Join room を押下し、Room ID を入力すると通話ができる
  4. Hang up を押下すると通話終了し、その Room ID は使えなくなる

同一 LAN 内じゃないと動作しなかった :sob:

いろいろ試した結果以下のような結果になった。

最初は OS やブラウザのせいかと思っていたが、途中からもしかしてネットワーク周りが原因では？と思い、最終的に家用 Wifi ルータとモバイルルータ使って LAN を分けて試した結果、Mac + Chrome x Mac + Chrome 環境でも LAN が違うと通信できないことが分かった。

現状 Google が提供している STUN サーバなるものを利用しているが、LAN 外のホストと通信するには TURN サーバなるものを用意しないといけないかもしれない。

ref. そして壁の向こうへ。 NAT/Firewallを越えて通信しよう―WebRTC入門2016

STUNでNATを越えられないとき

NATにはグローバルIPアドレスを共有するだけでなく、セキュリティ対策としての役割もあります。内部の端末を隠したり、通信できるポートを制限したり、一種の簡易Firewallとして利用されているケースもあります。その場合はFirewallの場合と同じく、次に説明するTURNを利用する必要があります。

またNATの構造によっては、接続先によって（今回の場合、STUNサーバーとPeer-to-Peerの通信相手）別のポートが割り当てられる Symmetric NAT という物があるようです。この場合もSTUNの仕組みでは通信することができません。やはりTURNの出番ということになります。

メモ

  • PC（Mac）同士だと動いたけどスマホ（iOS）では相手の画面が表示されない不具合が出た
  • Firestore は Room ID と offer の管理に使ってるだけ、あとはほぼ JS から呼べる MediaDevices と WebRTC の API で実装できてる
  • ICE と SDP あとで調べる

参考