将视频流javascript代码传输到React（ML5）

我正在尝试将ML5 image classification example（）中的代码转换为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;

这也不管用。我不知道什么是正确的方法来实现这一点

---

感谢您的帮助，谢谢

在

App

实例化的那一刻，视频元素还不存在，但是

文档.getElementById

运行，返回undefined或null。这就是为什么你会得到：

Cannot set property 'srcObject' of null

因为在这里：

this.video.srcObject = stream

此.视频

为空

这不是正确的做法。您应该准备dom元素的引用，将其指定为道具，然后从那里访问该元素。比如：

class App extends Component {

  video = React.createRef()

  ...

  render() {

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

    return (

      ...

      <video ref={ this.video } 
             id="video" 
             width="640" 
             height="480" 
             autoplay
      />

类应用程序扩展组件{
video=React.createRef（）
...
render（）{
navigator.mediaDevices.getUserMedia（{video:true}）
。然后（（流）=>{
如果（this.video.current）{
this.video.current.srcObject=流；
this.video.current.play（）；
}
})
返回(
...

在

应用程序

实例化的那一刻，视频元素还不存在，但

文档.getElementById

运行，返回未定义或空值。这就是为什么您会得到：

Cannot set property 'srcObject' of null

因为在这里：

this.video.srcObject = stream

此.视频

为空

这不是正确的方法。您应该准备dom元素的引用，将其指定为道具，然后从那里访问该元素。类似于：

class App extends Component {

  video = React.createRef()

  ...

  render() {

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

    return (

      ...

      <video ref={ this.video } 
             id="video" 
             width="640" 
             height="480" 
             autoplay
      />

类应用程序扩展组件{
video=React.createRef（）
...
render（）{
navigator.mediaDevices.getUserMedia（{video:true}）
。然后（（流）=>{
如果（this.video.current）{
this.video.current.srcObject=流；
this.video.current.play（）；
}
})
返回(
...

我再次强调了一个稍微不同的问题，而不是

ref

问题

有一个巨大的问题，导致可怕的闪烁和不断失败的承诺，由于一个例外…这是得到的用户媒体在渲染方法

考虑到这一点，每次设置状态时，组件都会重新呈现。您有一个不断更新组件状态的循环，而这个承诺总是失败

安装组件时，您需要获取用户介质：

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

render（）{
返回(
)
}

我再次强调了一个稍微不同的问题，而不是

ref

问题

有一个巨大的问题，导致可怕的闪烁和不断失败的承诺，由于一个例外…这是得到的用户媒体在渲染方法

考虑到这一点，每次设置状态时，组件都会重新呈现。您有一个不断更新组件状态的循环，而这个承诺总是失败

安装组件时，您需要获取用户介质：

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

render（）{
返回(
)
}

谢谢！这解决了引用问题。但是当我将其传递到

ml5.imageClassifier（'MobileNet'，this.video）

时，它说我没有传递视频元素。有没有办法解决这个问题？使用ref，你应该使用

this.video.current

是的，我已经尝试过了，但它一直显示

App.js:32 Uncaught的错误（承诺）DOMException

和

index.js:1582未捕获错误：您提供的错误不包含堆栈跟踪。

当然！

https://codesandbox.io/s/j1vx7y3l7v

这是链接。您可能必须打开预览窗口才能激活网络摄像头部件。谢谢！这解决了参考问题。但当我将其传递到

ml5.imageC时lassizer（'MobileNet'，this.video）

，它说我没有传递视频元素。有没有办法解决这个问题？使用ref，你应该使用

this.video.current

是的，我试过了，但它一直显示

App.js:32 Uncaught（承诺中）的错误DOMException

和

index.js:1582未捕获错误：您提供的错误不包含堆栈跟踪。

当然！

https://codesandbox.io/s/j1vx7y3l7v

这是链接。您可能必须打开预览窗口才能激活网络摄像头部件。这很有效！！！非常感谢您的帮助和详细解释：）成功了！！！非常感谢您的帮助和详细解释：）