如何使用 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)。 您可以在此处了解更多信息：

注意：这不会将您的电脑网络摄像头传输到您的手机中，而是将手机的摄像头传输到您的手机中。