ReactJS - 来自网络摄像头的视频流无法正常工作

Question

我不确定为什么这不起作用。我正在获取相机流并且它正在工作，因为我的相机上有光。

流似乎没有附加。

class VideoOutput extends React.Component {
    constructor(props) {
        super(props);
        this.videoRef = React.createRef();
    }

    componentDidMount() {
        const videoObj = this.videoRef.current;
        videoObj.srcObject = this.props.video;
        console.log(videoObj);
    }

    render() {
        return <video ref={this.videoRef}></video>;
    }
}


class Application extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      video: null
    };

    this.handleVideoClick = this.handleVideoClick.bind(this);
  }


  async getVideo() {
    const video = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: true
    });
    this.setState({ video });
  }

  stopVideo() {
    this.state.video.getTracks().forEach(track => track.stop());
    this.setState({ video: null });
  }


  handleVideoClick() {
    if (this.state.video) {
      this.stopVideo();
    } else {
      this.getVideo();
    } 
  }

  render(){
    return(
      <div>
          <button onClick={this.handleVideoClick}>
            {this.state.video ? 'Vid On' : 'Vid Off'}
          </button>
      <div>
      {this.state.video ? <VideoOutput video={this.state.video} /> : ''}
       </div>
       </div>
    );
  }


}

ReactDOM.render(<Application />, document.getElementById('root'));

此处为非功能示例： https://codepen.io/Chenzo/pen/QXXVvr

这似乎应该对我有用...但我怀疑我遗漏了一些简单的东西。

Answer 1

我怀疑问题出在您没有播放视频。在设置 srcObject:

后尝试添加它

videoObj.play();