如何使用 ReactJs 將網絡攝像頭流式傳輸到移動瀏覽器？

Question

我創建了一個簡單的 React 應用程序，可以在瀏覽器上流式傳輸網絡攝像頭視頻流。 這是github項目的鏈接： Basic WebCam Streamer
代碼非常簡單明了：

class AppStreamCam extends React.Component {
  constructor(props) {
    super(props);
    this.streamCamVideo= this.streamCamVideo.bind(this)
  }
  streamCamVideo() {
    var constraints = { audio: true, video: { width: 1280, height: 720 } };
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function(mediaStream) {
        var video = document.querySelector("video");

        video.srcObject = mediaStream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(err) {
        console.log(err.name + ": " + err.message);
      }); // always check for errors at the end.
  }
  render() {
    return (
      <div>
        <div id="container">
          <video autoPlay={true} id="videoElement" controls></video>
        </div>
        <br/>
        <button onClick={this.streamCamVideo}>Start streaming</button>
      </div>
    );
  }
}

這是結果：

有一次，我單擊按鈕，網絡攝像頭打開並開始流式傳輸到瀏覽器。
這是我的問題：
當我在手機上打開 chrome 並輸入 localServer 地址，然后單擊按鈕時，應用程序崩潰了，因為顯然應用程序代碼是從 PC 瀏覽器運行的，以便它可以打開 PC 網絡攝像頭。

所以當我點擊手機上的按鈕時，我可以理解地得到這個錯誤：

類型錯誤：無法讀取未定義的屬性“getUserMedia”

我的目標是單擊我的移動瀏覽器中的按鈕並開始在我的移動瀏覽器上流式傳輸 PC 網絡攝像頭，就像在 PC 上一樣。

但是，我不知道從哪里開始。 有什么幫助嗎？

Answer 1

我已經解決了這個問題。
1. 打開package.json並將其粘貼到腳本中：

"start": "設置 HTTPS=true&&react-scripts 開始"

這應該通過 https 為應用程序提供服務
2. 如果這給你這個錯誤：

React 應用程序錯誤：無法構建“WebSocket”：可能無法從通過 HTTPS 加載的頁面啟動不安全的 WebSocket 連接

打開

node_modules/react-dev-utils/webpackHotDevClient.js

並將此代碼粘貼到連接的定義中：

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

這顯然是react-sript 中的一個尚未解決的錯誤。 如果使用 https 協議，我們應該使用 WebSockets over SSL/TLS (WSS) 協議而不是 WebSockets (WS)。 您可以在此處了解更多信息：

注意：這不會將您的電腦網絡攝像頭傳輸到您的手機中，而是將手機的攝像頭傳輸到您的手機中。