WebRTCで配信者になろう part 1

WebRTCで配信者になろう part 1 @Msprzk 2025-10-26 千歳ゆるい勉強会vol.6

自己紹介 名前 : 宮本直幸, X: @Msprzk 所属: 北海道情報大学 趣味: ゲーム配信

最近アツいこと

技術的にはとてもおもしろいですが、UI,UXがまだまだというと ころなので私のようなオタク（アーリーアダプター）にしか刺 さらなそうという印象 未来を感じられるのでぜひ札幌駅に行った際に試してみてくだ さい〜！

アジェンダ WebRTCとは WebRTCの仕組み 自分と自分をWebRTCでつなげてみる(時間があれば)

今回使った教材 https://codelabs.developers.google.com/codelabs/webrtc-web

• https://codelabs.developers.google.com/codelabs/webrtc-web

WebRTCとは ウェブアプリケーションやウェブサイトにて、仲介を必要とせ ずにブラウザー間で直接、任意のデータの交換や、キャプチャ した音声／映像ストリームの送受信を可能にする技術[1] WebRTC = Web Real-Time Communication ZoomやDiscordの通話などで活用 [1] https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API

• https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API

WebRTCの仕組み 1: シグナリング, ICE候補の収集/交換 2: ピアツーピア通信の確立 3: メディアストリームの送受信 4: 通信の終了

シグナリングとは 通信を調整し、制御メッセージを送信するもの シグナリングサーバーには2つの役割がある ハンドシェイク 通信相手の接続情報(アドレスなど)や接続方法を交換 通信のセッションの管理 通信の開始、終了 通信パラメータの変更など 参考: https://imageflux.sakura.ad.jp/column/webrtc/

• https://imageflux.sakura.ad.jp/column/webrtc/

ICE(Interactive Connectivity Establishment)とは NATやファイアウォールの背後にあるデバイス同士が通信できる最適な方法を見 つけるためのフレームワークという理解 ICE candidate 通信に使用できる可能性のあるネットワークアドレス ICE candidateの収集/交換 各ピアは自分のICE candidateを収集し、シグナリングサーバーを介して相 手に送信

ピアツーピア通信の確立 シグナリングとICE候補の交換が完了した後、各ピアは受け取っ たICE候補を使用して接続を試みる 最適な経路が見つかると、ピアツーピア通信が確立される もし直接接続ができない場合は、TURNサーバーを介して通信 が行われることもある

STUNとTURNとは WebRTCは基本的にP2Pで動くように設計されていて、ユーザーはでき るだけ直接接続しようと努力する。 しかし、NATとファイアウォールを越える必要があり、P2Pでの接続が 失敗したときのフォールバックが必要。 そこで出てくるのがSTUN, TURNサーバー STUNサーバー: コンピュータのIPアドレスを取得する TURNサーバー: P2Pのフォールバックのリレーサーバー(仲介サーバー)

メディアストリームの送受信ができるようになる（業務連絡: こ こでサンプルコードを動かしてください）

次回, WebRTC SFU を使ってみる...?

まとめ WebRTCはリアルタイムコミュニケーションを可能にする技術 シグナリングとICE候補の収集/交換を通じてピアツーピア通信 を確立 STUNとTURNサーバーはNATやファイアウォールを越えるため に重要な役割を果たす WebRTCを活用することで、ブラウザベースのアプリケーショ ンで高品質な音声・映像通信が可能になる