react-webrtc-sample
これは何
WebRTCを使ってビデオ通話/データ通信をするサンプルコードです。 webrtc.org が出している codelab のチュートリアルを参考に、React で作り直しました。
codelab のチュートリアルと同じく、以下のようなサンプルコードがあります。
- Sample1: 単純にカメラ映像を画面に移す
- Sample2: カメラ映像をもとに、1つのブラウザタブで1人2役で映像の送受信を行い表示する。
- Sample3: テキストデータを送信する(これも1人2役)
- Sample4: シグナリングサーバの登場。WebSocket を使いサーバと通信し、部屋IDを指定すると部屋に入る。
- Sample5: シグナリングサーバを利用して、P2Pのビデオ通話。 (ローカルでやるので2つタブを立ち上げて動かす)
- Sample6: シグナリングサーバを利用して、カメラ映像から画像を切り出し、相手に送信するサンプル。
codelab のチュートリアルとの違い
- 素朴なJavaScript環境から Webpack, React, TypeScript にした。
- var とかが使われている ES5 からES2017 に
- 古い RTCPeerConnection.addStream() を使っている箇所を RTCPeerConnection.addTrack() に変更
- 1から6 までのサンプルコードをひとまとめにし、１回のビルドで見えるようにした。
- React Router を使って1ページごとに1サンプルを置いてページ遷移をしている
- それに伴いページの切り替わり時に RTCPeerConnection のclose 処理などを行い、状態がリセットされるようにしている。
- console.log() を見やすいように調整した
- その他諸々、リファクタリング。
必要なもの
Chrome75 で動くことは確認しましたが、Firefox がダメでした(Sample6のデータ送信)。他は知りません。
SETUP
このリポジトリをcloneしてから
cd react-webrtc-sample
yarn installRUN
yarn start # webpack-dev-server を起動
yarn start:server # Sample4 以降を動かすのに必要なシグナリングサーバを起動気に入ったら
スターよろしくおねがいします。