如何通过使用ReactJs将网络摄像头流式传输到移动浏览器? [英] How to stream webcam into mobile browser by using ReactJs?

问题描述

我创建了一个简单的react应用程序，可在浏览器中流式传输网络摄像头视频流.这是github项目的链接:基本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浏览器运行这样它可能会打开计算机网络摄像头.

因此，当我点击手机上的按钮时，我 可以理解 出现此错误:

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

我的 目标 是要从我的移动浏览器中单击该按钮，然后像在PC上一样在我的移动浏览器中开始流式传输PC网络摄像头.

但是，我不知道从哪里开始.有什么帮助吗?

解决方案

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

开始":设置HTTPS = true&&&&& react-scripts开始"

这应该通过https服务该应用程序
2.如果这给您这个错误:

反应应用程序错误:无法构造'WebSocket':不安全 WebSocket连接可能无法通过加载的页面启动 HTTPS

打开

node_modules/react-dev-utils/webpackHotDevClient.js

并将此代码粘贴到连接的定义内:

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

这显然是 react-sripts 中的一个错误，尚未解决.如果使用https协议，则应使用基于SSL/TLS(WSS)协议的WebSocket，而不是WebSockets(WS).您可以在此处 了解更多信息:

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

I have created a simple react app that streams the webcam video stream on the browser. Here's the link to the github project : Basic WebCam Streamer
The code is pretty simple and straightforward :

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

And this is the result :

Once, I click on the button, the webcam turns on and starts streaming into the browser.
Here's my problem:
When I open chrome on my phone and enter the localServer address, and click on the button, the app crashes since obviously the app code is meant to be run from the pc browser so that it may turn the pc webcam.

So when I click on the button from my phone, I understandably get this error:

TypeError: Cannot read property 'getUserMedia' of undefined

My goal is to click on the button from my mobile browser and start streaming the pc webcam on my mobile browser just like on the pc.

However, I do not know from where to start exactly. Any help?

解决方案

I have solved this issue.
1. Open package.json and paste this inside scripts:

"start": "set HTTPS=true&&react-scripts start"

This should serve the app over https
2. If this gives you this error:

React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS

Open

node_modules/react-dev-utils/webpackHotDevClient.js

And paste this code inside the definition of the connection:

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

This is apparently a bug in react-sripts that hasn't been solved yet. If https protocol is being used we should use WebSockets over SSL/TLS (WSS) protocol instead of WebSockets (WS). You can learn more about it here:

NOTE: This will not stream your pc webcam into your phone but rather the phone's camera.

这篇关于如何通过使用ReactJs将网络摄像头流式传输到移动浏览器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！