ReactとWebRTCでZoomのようなビデオチャットアプリを作ってデータフローを図解してみた

はじめに こんにちは。 都内在住のフロントンドエンジニアです。 僕はとある会社にて約 1 年半ほど React と WebRTC を用いて映像配信のアプリケーション開発を行ってきました。 そこでは開発をスムーズに進める為に WebRTC の SDK を利用していて、 本来学習コストが高いとされている WebRTC をカジュアルに利用することができています。 しかし、より入り組んだ実装をしたり映像配信特有の問題（後述） を解決するとなると以下 3 つの WebAPI の理解は避けて通れません。 MediaStream RTCPeerConnection WebSocket 詳しくは文中に記載しますがこれらの理解を深めないと開発の進行に大きな影響があると思ったので、WebRTC 関連のライブラリ等を利用せずに映像配信のアプリケーションを作って学習しようという考えになり、実際に作ってみました。

[kndkndknd]

ビデオチャットだ

[UDONCHAN]

ちゃんとしてる

[efcl]

WebRTCの流れ