Javascript 如何使用ReactJs将网络摄像头传输到移动浏览器？

我创建了一个简单的react应用程序，可以在浏览器上播放网络摄像头视频流。以下是github项目的链接：
代码非常简单明了：

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>
    );
  }
}

类AppStreamCam扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.streamCamVideo=this.streamCamVideo.bind（this） } streamCamVideo（）{ var约束={音频：true，视频：{宽度：1280，高度：720}； navigator.mediaDevices .getUserMedia（限制条件） .then（功能（媒体流）{ var video=document.querySelector（“视频”）； video.srcObject=mediaStream； video.onloadedmetadata=函数（e）{ video.play（）； }; }) .catch（函数（err）{ console.log（err.name+“：”+err.message）； })；//始终在结尾检查错误。 } render（）{ 返回(
开始流媒体 ); } } 这就是结果：

一旦我点击按钮，网络摄像头就会打开并开始进入浏览器。
这是我的问题：
当我在手机上打开chrome并输入localServer地址，然后单击按钮时，应用程序崩溃，因为显然应用程序代码是要从pc浏览器运行的，以便它可以打开pc网络摄像头

因此，当我在手机上单击按钮时，我可以理解地得到以下错误：

TypeError:无法读取未定义的属性“getUserMedia”

我的目标是在我的移动浏览器中单击按钮，并开始在我的移动浏览器上像在pc上一样播放pc网络摄像头

---

然而，我不知道从哪里开始。有什么帮助吗

我已经解决了这个问题。
1.打开package.json并将其粘贴到脚本中：

“开始”：“设置HTTPS=true&&react脚本开始”

这应该通过https为应用程序提供服务
2.如果出现此错误：

React应用程序错误：构造“WebSocket”失败：不安全的 WebSocket连接不能从加载到的页面启动 HTTPS

打开

node_modules/react dev utils/webpackHotDevClient.js

并将此代码粘贴到连接的定义中：

这显然是react脚本中尚未解决的一个bug。如果使用https协议，我们应该使用基于SSL/TLS（WSS）协议的WebSockets，而不是WebSockets（WS）。您可以了解更多信息：

---

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

我注意到其他人也遇到了类似的问题：。然而，它还没有被回答。。。显然，连接需要通过移动浏览器的SSL完成。在做了一些控制台记录后，我发现导航器对象在移动浏览器中不可访问？为什么会这样<代码>“getUserMedia（）是一项功能强大的功能，只能在安全上下文中使用；在不安全上下文中，未定义navigator.mediaDevices，从而阻止对getUserMedia（）的访问。简而言之，安全上下文是使用HTTPS或文件：///URL方案加载的页面，或从localhost加载的页面。”

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