See. https://webrtc.org/getting-started/firebase-rtc-codelab
ほぼ写経しただけ、👆 のチュートリアルの通りに書いても動かなかったので、サンプルリポジトリ の方を参考にした。
成果物
ブラウザで動くシンプルな 1 対 1 のビデオ通話アプリケーション。 チュートリアルではローカルでの動作確認までしか書いてないけど、せっかくなので Firebase Hosting にデプロイまでした。
使い方
Open camera & microphone
でカメラとマイクを許可Create room
を押下すると Room ID が発行される- 別の PC で
Join room
を押下し、Room ID を入力すると通話ができる Hang up
を押下すると通話終了し、その Room ID は使えなくなる
同一 LAN 内じゃないと動作しなかった :sob:
いろいろ試した結果以下のような結果になった。
- ○ Mac + Chrome x Mac + Chrome(同一 LAN 内)
- ○ Mac + Chrome x Mac + Firefox(同一 LAN 内)
- × Mac + Chrome x Mac + Chrome(LAN 外)
- × Mac + Chrome x Mac + Safari(LAN 外)
- × Mac + Chrome x Windows + Mac(LAN 外)
最初は 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 あとで調べる
参考
- https://webrtc.org/
- https://webrtc.github.io/samples/
- https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia
- https://developer.mozilla.org/ja/docs/Web/API/MediaStream
- https://developer.mozilla.org/ja/docs/Web/API/RTCPeerConnection
- https://developer.mozilla.org/ja/docs/Web/API/RTCSessionDescription
- https://developer.mozilla.org/ja/docs/Web/API/RTCIceCandidate
- https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API