Search code examples
reactjswebcam

None of the browsers support recording of a video

I have implemented react-webcam and react-video-recorder to take pictures and video respectively using the device's webcam. I have followed the document and both of them work perfectly on my localhost. The issue is when I deploy them, the browser doesn't support recording the video. I have tested it on Chrome, Firefox and Opera, and none of them support it.

I've followed https://www.npmjs.com/package/react-webcam for taking image and https://www.npmjs.com/package/react-video-recorder for recording video through the device's webcam. 

class VideoPost extends Component {
  handleRecordingComplete = (videoBlob, startedAt, thumbnailBlob, duration) => {
    const urlCreator = window.URL || window.webkitURL;
    const videoUrl = urlCreator.createObjectURL(videoBlob);
    this.setState({ videoSrc: videoUrl, video: videoBlob });
  };
  onVideoDisplay = () => (
    <video
      src={this.state.videoSrc}
      controls
      style={{
        height: '200px',
        width: '200px'
      }}
    />
  );
  render(){
    return(
      <div>
      <VideoRecorder
        onRecordingComplete={this.handleRecordingComplete}
        renderLoadingView={this.onVideoDisplay}
      />
      </div>
    )
  }
}

i expect the video to work working example from localhost

however on the live site, live site example

Am i missing out something?

Solution

  • This might be due to insecure origin. Make sure you have deployed your application on https i.e. you have a valid SSL cert applied

    Refer - react-webcam's npm page

    Note: Browsers will throw an error if the page is loaded from insecure origin. I.e. Use https.