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

CRANK

はじめにこんにちは。都内在住のフロントンドエンジニアです。僕はとある会社にて約1年半ほどReactとWebRTCを用いて映像配信のアプリケーション開発を行ってきました。そこでは開発をスムーズに進める為にWebRTCのSDKを利用していて、本来学習コストが高いとされているWebRTCをカジュアルに利用することができています。しかし、より入り組んだ実装をしたり映像配信特有の問題（後述） を解決するとなると以下3つのWebAPIの理解は避けて通れません。詳しくは文中に記載しますがこれらの理解を深めないと開発の進行に大きな影響があると思ったので、WebRTC関連のライブラリ等を利用せずに映像配信のアプリケーションを作って学習しようという考えになり、実際に作ってみました。それがこれです！リンク: Herokuに上げたので初回起動の場合コンテンツレンダリングが遅めです😅このスクショでは何をやっているのか端的に説明しますと、まずMacで上記リンクにアクセスして部屋を作成します。続いてその部屋にiPhoneからアクセスをすると、既に部屋に入っているユーザー（Mac）と映像や音声（MediaStream）を交換することで相手と会話をすることが可能となります。これはSFU（…