javascript - 如何在reactJs中显示实时摄像头信息

Question

更新

我尝试修改代码以使用 srcObject 但不知何故它不起作用。

componentDidMount() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then( stream => {
            console.log(stream);
            this.streamVideo(stream);
        })
        .catch(error => {
            console.log(error);
        })
}

streamVideo = (stream) => {
    this.selfVid.srcObject = stream;
};
.
.
.
<video autoPlay className="attendee"/>
<video autoPlay className="selfView" ref={ selfVid => { this.selfVid = selfVid }}/>  

不确定我做的事情是否正确。

<小时/>

原始问题

我第一次尝试使用 webRTC，因此关注了一些文章，但不知何故我无法在视频元素中显示我的相机源。使用当前代码，相机打开但抛出类型错误。

片段

componentDidMount() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then( stream => {
            console.log(stream);
            console.log(window.URL.createObjectURL(stream));
            this.setState({ videoSource: window.URL.createObjectURL(stream) });
        })
        .catch(error => {
            console.log(error.name);
        })
}
.
.
.

<div className="videoWrapper">
    <video autoPlay className="attendee"/>
    <video autoPlay className="selfView" src={ this.state.videoSource }/>
</div>  

我的控制台

Invalid URI. Load of media resource  failed.
MediaStream { id: "{78f74e3c-53f5-4aef-93c8-fd5a5a967bb3}", active: true, onaddtrack: null, onremovetrack: null }
TypeError

Answer 1

我发现我哪里出了问题。

componentDidMount() {
        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then( stream => {
                console.log(stream);
                this.selfVid.current.srcObject = stream;
            })
            .catch(error => {
                console.log(error);
            })
    }
    .
    .
    .
    <video autoPlay className="selfView" ref={ this.selfVid } />