[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる 番外編#2 ~別ブラウザにも対応させる~

概要

WebRTCとReactを使ったビデオ電話アプリ制作の番外編第2回です。今回はブラウザの対応範囲を増やしたいと思います。
これまでのコードは基本的にChrome向けのコードだったのでMacユーザーの方はもしかしたら途中で意味不明エラー(これは関数じゃないよ的な)が出ていたと思います。(かくゆう私もMacユーザーですが)
それをバシッと今回解決します。

そもそもなんでそんなことが起こるのか

ここでWebRTCの関数などについて調べるとわかるのですが、どうやらブラウザごとに対応バージョンが違うらしく、Chromeが一番最新まで対応しているということみたいです。(WebRTCもChromeもGoogle製みたいなところですからね)

解決方法

Google側もこの状況をほっといているわけではなく、adapter.jsというコードを公開しています。このコードを読み込んであげるだけでブラウザを気にせず最新バージョンで書いてOKって感じみたいです。
なので、今回はこのコードを読み込んで解決していきます。

今回のコードはGitHubにVideoConnect4.jsとしてアップしています。 VideoConnect4.js

// 省略
React.useEffect(() => {
    navigator.mediaDevices.getUserMedia(constraints)
      .then((stream) => {
        localStream = stream;
        console.log(localStream);
        localVideoRef.current.srcObject = stream;
        setCanCalling(true);
      })
      .catch((error) => {
        console.log("ERROR", error);
      });
    const adapterScript = document.createElement('script'); // 追加
    adapterScript.src = "https://webrtc.github.io/adapter/adapter-latest.js"; // 追加
    adapterScript.async = true; // 追加
    document.body.appendChild(adapterScript); // 追加
    return () => { // 追加
      document.body.removeChild(adapterScript); // 追加
    }; // 追加
  }, []);
// 省略

fontend/src/index.js

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

import VideoConnect4 from './VideoConnect4'; // 変更

ReactDOM.render(
  <React.StrictMode>
    <VideoConnect4 /> // 変更
  </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();

これでOKです。どのブラウザからもうまく動くようになったと思います。

まとめ

• adapter.jsのおかげでブラウザを気にせず実装ができる。素晴らしい。