我在检查器中看到一个空白页面和此消息“此文件是一个模板，如果您在浏览器中直接打开它，您将看到一个空白页面。”

Question

I am new to reactjs and I am trying to display a local html-video inside of the react Application.

I recive the allow request to access camera but after accept i see just an empty page , my js file is like following:

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);

    this.localVideoref = React.createRef();
  }
  render() {
    const constraints = { video: true };

    const success = stream => {
      this.localVideoref.current.srcObject = stream;
    };

    const failure = e => {
      console.log("getUserMedia Error: ", e);
    };

    navigator.mediaDevices.getUserMedia(constraints, success, failure);

    return (
      <div>
        <video ref={this.localVideoref} autoPlay />
      </div>
    );
  }
}

export default App;

Does anyone know, what I have to adjust to make this work?

Thanks!

Answer 1

I think this will work:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.localVideoref = React.createRef();
  }
  componentDidMount() {
    const constraints = { video: true };

    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(res => {
        this.localVideoref.current.srcObject = res;
      });
  }
  render() {
    return (
      <div>
        <video ref={this.localVideoref} autoPlay></video>
      </div>
    );
  }
}