如何在reactJs中显示实时摄像机提要

Question

UPDATE

我尝试修改代码以使用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，因此关注了一些文章，但是以某种方式我无法在视频元素中显示我的摄像机供稿。使用当前代码，相机打开但抛出TypeError。

Snippet

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

URL.createObjectURL（mediaStream）已过时，已删除。不要依赖过时的文档。

将媒体元素srcObject属性设置为流

Answer 2

我发现我要去哪里错了。

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