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

Question

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?

Answer 1

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.