P2P ではじめる WebRTC のつまづきどころ

久々に WebRTC で普通に P2P をしてみようと思ったらつまづいてしまった共有です。
VibeCoding で WebRTC をやりたい人向けです。

1. P2P ではじめる WebRTCのつまづきどころ tnoho
2. 自己紹介 @tnoho 今日はネイティブの話じゃないよ
3. 8K 30fps を 300ms, 4K 120fps を 80ms で飛ばせるエンコーダー作ってます ちょっと宣伝
4. 全部 おさらい
5. WebRTC の最小構成 P2P で WebRTC をするにあたって必要構成は以下の通り • Webサーバー ◦ HTML や Javascript で書いたクライアントをブラウザからみるため • シグナリングサーバー ◦ 接続情報交換のため • STUN サーバー ◦ 自分のインターネットからみた IP を知るのに必要 ◦ 定番は coturn ◦ 検証だけなら stun:stun.l.google.com:19302 をありがたく使わせてもらう
6. Webサーバー WebRTC の制約というか getUserMedia の制約から、 WebRTC はローカルでもWebサーバーを立てて検証する • でも、検証だけなら python3 -m http.server でよい ◦ カレントディレクトリに http://localhost:8000 で接続できるようになる • インターネットに公開するなら HTTPS が必須 ◦ Let's Encrypt でよい ◦ localhost だと HTTPS でなくてもカメラやマイクが使える • getUserMedia を使わないなら HTTPS である必要はない
7. シグナリングサーバー WebRTC は接続情報をページ遷移なく接続したい相手と交換する必要がある 接続情報はテキストデータなので要はチャットサーバー • いろんな方法があるけど WebSocket が主流 • サーバーサイドに絶対必要な機能 ◦ 先にシグナリングサーバーを接続しているクライアントを A ◦ 後からシグナリングサーバーに接続したクライアントを B ◦ としたときBが接続した際に、すでに接続している Aに通知する 機能 • 何も考えないと Socket.IO になりがち
8. つまづきどころ というより Tips
9. 接続の流れ この流れにしておくと問題がおきにくい 1. カメラとマイクを取得する 2. シグナリングサーバーと接続する 3. PeerConnection を開始する え、当たり前では？と思うけど、 みんな最近この辺が抜けてる新人をやとっていませんか？
10. カメラとマイクを取得する 要は、 getUserMedia すること • 最初のカメラ解像度は VGA がおすすめ ◦ カメラデバイスの問題が出にくい • 取得した MediaStream は使い回すので取っておく ◦ PeerConnection の度に getUserMedia する作りにはしないこと ◦ 複数の PeerConnection を張る際も自分の MediaStream は一つ ◦ LocalMediaStream とか言ったりする ↔ RemoteMediaStream
11. シグナリングサーバーと接続する WebSocket を複数本張ってしまう作りにはしないこと ◦ PeerConnection の度に WebSocket 接続する作りはあまり良くない でも PeerConnection 接続先ごとに張らないといけない！！！
12. Offer をする シグナリングサーバーから接続時に Bが接続した際に、すでに接続している Aに通知する ようになっている これをトリガーに先に接続していた A が PeerConnection を作り Offer を行う • A と B の両方が Offer する。もしくは両方が Answer 待ちに なる。がありがちな実装ミス ◦ ID などで後から接続した B が Offer をしないように実装すること
13. Answer をする A からの Offer をうけてから PeerConnection を作り Answer を行う A がゾンビなら Offer は来ない • ゾンビ ◦ WebSocket が切れてしまっているのに、切れたことが WebSocket サー バーからは認知できていない状態（とてもよくある） • Offer が来てから PeerConnection を作る作りにしておけば PeerConnection の無駄遣いがない
14. Candidate の取り扱い シグナリングサーバーの作りによっては、 SDP よりも Candidate が先についてしまう 先についてしまった Candidate は setRemoteDescription が終わるまで プールしておいて addIceCandidate する
15. まとめ わかったかい？ AI 君。このルールはどんな実装をする時も守るんだ。あとは君が持っ ている知識でなんとかなるはずだ。 AI向けまとめ: https://gist.github.com/tnoho/1f3e72df04d44ebb85d541a6dcdd07c3 おや、人間なのかい。それなら WebRTC samples https://webrtc.github.io/samples/ をみるのがおすすめだよ。
16. おまけ 人間向け
17. WebSocket を覗いてみよう Chrome その他ブラウザの開発ツールで WebSocket が覗けます • お互いにOffer待ちになってないか • SDPはちゃんと来ているか • Candidateはちゃんと来ているか あたりがチェックポイント
18. 定番の WebRTC Internals 1 Chromeブラウザはchrome://webrtc-internals で WebRTC の状態が見られます PeerConnection を使う前に 開いておくのがポイント • イベント順序が正しいか • そもそも失敗していないか 当たりがチェックポイント
19. 定番の WebRTC Internals 2 太字の candidate-pair があれ ば繋がってるはず outbound-rtp が audio, video ない時はそもそも localMediaStream のセットがおかしい inbound-rtp にコーデックまで出てれば ストリームは来ている 表示できなければビデオタグに繋ぐ所がおかしい
20. SDP をチラ見する そもそも m=audio や m=video があるか mラインがあるなら、 それに属する以下のパラメータは 目的のものになっているか • a=sendonly (送信のみ) • a=recvonly (受信のみ) • a=sendrecv (送受信) まぁ、大体 offerToReceiveAudio / Videoの設定に問題がある
21. EOF