Я вижу пустую страницу и это сообщение в инспекторе: «Этот файл является шаблоном, и если вы откроете его прямо в браузере, вы увидите пустую страницу». - PullRequest
1 голос
/ 22 марта 2020

Я новичок в reactjs и пытаюсь отобразить локальное html -видео внутри приложения реакции.

Я получаю запрос на разрешение доступа к камере, но после подтверждения вижу только пустая страница, мой js файл выглядит следующим образом:

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;

Кто-нибудь знает, что я должен настроить, чтобы сделать эту работу?

Спасибо!

1 Ответ

0 голосов
/ 22 марта 2020

Я думаю, что это будет работать:

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