ReactJS - 来自网络摄像头的视频流不起作用

Posted 2023-05-07

【中文标题】ReactJS - 来自网络摄像头的视频流不起作用

【英文标题】：ReactJS - video stream from webcam not working

【发布时间】：2019-11-24 15:00:37

【问题描述】：

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

流似乎没有附加。

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

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

【参考方案1】：

我怀疑问题在于您没有播放视频。设置srcObject后尝试添加：

videoObj.play();

【讨论】：

天啊，呵呵。谢谢，@Brad - 就是这样。我已经为后代更新了 codepen：codepen.io/Chenzo/pen/QXXVvr