[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #5 ~データ通信・交換編~

概要

WebRTCとReactを使用したビデオ電話アプリ製作の第5回です。今回は、別のブラウザ間でのアクセスを可能にします。 今回もだいぶ重いです．．．

追加の準備

今回はサーバーにexpress、WebSocketを使用するためにsocket.ioを使用します。そのために追加で準備です。 まずは、react-webrtc(トップディレクトリ)内で

npm install express socket.io

を実行します。(express、socket.ioのインストール)
次にfrontend内で

npm install socket.io-client

を実行します。(socket.ioのクライアント側をインストール)
最後に、react-webrtc(トップディレクトリ)内のpackage.jsonの"script"に

"script": {
  "start": "node backend/index.js"
}

を追記します。
これで準備は完了です。

今回のコード

今回のコードも長くなってしまったので、ここに載せてあります。
変更(追加)したのはfrontend/src/VideoConnect2.js、backend/index.jsです。src/index.jsも変更しているのでここに載せておきます。

   
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import VideoConnect from './VideoConnect';
import VideoConnect2 from './VideoConnect2'; // 変更点

ReactDOM.render(
  <React.StrictMode>
    <VideoConnect2 />   // 変更点
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

コードの説明

使い方

1. 2つのターミナル①、②を準備します。
2. ①でトップディレクトリでnpm start
3. ②でfrontend内でnpm start
4. ブラウザでhttp://localhost:3000にアクセス
5. Callボタンを押す
6. 他のタブでhttp://localhost:3000にアクセス
7. Callボタンを押す
8. 1つ目のタブでAllowボタンを押す
9. つながる！

大体の流れ

1. ページを読み込む時にカメラの映像をローカルビデオとしてセット
2. Callボタンを押すと、サーバとの通信を始める
3. サーバに部屋がなければ作成して自分がホストになる。
4. サーバに部屋があれば参加する。
5. SDPを交換してリモートピアのビデオを受けとる。
6. リモートビデオを表示する。

socket.on() socket.emit()

socket.ioを用いてwebsocketで通信する時に使用する関数です。
socket.emitで関数を呼び、その呼び出される関数をsocket.onで記述します。

まとめ

• socket.ioを用いてサーバと通信することで別のタグなどから同時にアクセス可能