javascript - 将视频流 JavaScript 代码传输到 React (ML5)

Question

我尝试将 ML5 图像分类示例( Link )中的代码转换为我的 React 组件，如下所示:

class App extends Component {
  video = document.getElementById('video');

  state = {
    result :null
  }

  loop = (classifier) => {
    classifier.predict()
      .then(results => {
        this.setState({result: results[0].className});
        this.loop(classifier) // Call again to create a loop
      })
  }

  componentDidMount(){
    ml5.imageClassifier('MobileNet', this.video)
      .then(classifier => this.loop(classifier))

  }
  render() {

    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        this.video.srcObject = stream;
        this.video.play();
      })

    return (
      <div className="App">
        <video id="video" width="640" height="480" autoplay></video>
      </div>
    );
  }
}

export default App;

但是这不起作用。错误消息显示Unhandled Rejection (TypeError): Cannot set property 'srcObject' of null。

我可以想象 video = document.getElementById('video'); 可能无法通过 id 获取元素。所以我尝试了

  class App extends Component {
  video_element = <video id="video" width="640" height="480" autoplay></video>;

  ...

  render() {
    ...
    return (
      <div className="App">
        {video_element}
      </div>
    );
  }
}

这也不起作用。我很困惑实现这个的正确方法是什么？

感谢任何帮助，谢谢!

Answer 1

我再次回答，重点是一个稍微不同的问题，而不是ref问题。

有一个巨大的问题，导致可怕的闪烁和由于异常而不断失败的 promise ......这是渲染方法中用户媒体的获取!

考虑一下，每次设置状态时，组件都会重新渲染。您有一个不断更新组件状态的循环，而该 promise 不断失败。

安装组件时需要获取用户媒体:

componentDidMount() {
  navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
    if (this.video.current) {
      this.video.current.srcObject = stream;
      this.video.current.play();
    }

    ml5.imageClassifier("MobileNet", this.video.current)
       .then(classifier => this.loop(classifier));
  });
}

你的渲染方法会短很多:

render() {
  return (
    <div className="App">
      <video ref={this.video} id="video" width="640" height="480" autoPlay />
    </div>
  )
}