设置视频标签srcObject时反应问题

时间:2018-09-23 22:16:37

标签: html reactjs video-streaming html5-video

我要执行的操作是将视频的src设置为笔记本电脑的摄像头。这样,但我得到这个奇怪的错误。即使我遇到此错误,代码也可以正常工作。我在这方面找不到太多信息。我很高兴能指出正确的方向或提供解决方案的帮助。

index.js:2178 Warning: Unexpected ref object provided for video. Use either a ref-setter function or React.createRef().
in video (at App.jsx:34)
in div (at App.jsx:33)
in App (at src/index.js:6)

亲爱的,您会找到我的App.jsx文件。

import React, {Component} from 'react';
class App extends Component {
    state = {
        start: false,
        stream: false
    }
    setOutGoingVideoStream = (node) => {
        this.setOutGoingVideoStream = node
    }
    start = (e) => {    
      navigator.mediaDevices
        .getUserMedia({
          audio: true,
          video: true,
        })
        .then((stream) => {
            console.log("Starting stream")
            this.setOutGoingVideoStream.srcObject = stream;
            this.setState({start: true, stream})
        })
        .catch(e => alert(`getUserMedia() error: ${e.name}`));
    }
    hangup = () => {
      console.log('Ending call');
      this.state.stream.getTracks()[0].stop();
      this.state.stream.getVideoTracks()[0].stop();
      this.setState({start: false, stream: false})
    }
    render() {
        return (
            <div>
                <video
                    ref={this.setOutGoingVideoStream}
                    playsInline
                    autoPlay
                    muted
                />
                <button
                    onClick = {this.start}
                    disabled = {this.state.start}
                >
                    request permission
                </button>
                <button

                >
                    call
                </button>
                <button
                    onClick={this.hangup}
                    disabled={!this.state.start}
                >
                    hang up
                </button>
            </div>
        )
    }
}

export default App;

0 个答案:

没有答案