【问题标题】：How to display live camera feed in reactJs如何在 reactJs 中显示实时摄像头提要
【发布时间】：2020-07-02 07:49:55
【问题描述】：

更新

我尝试修改代码以使用 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。

片段

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

【问题讨论】：

标签： javascript reactjs getusermedia

【解决方案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 } />

【讨论】：

【解决方案2】：

我现在正在做同样的事情，reactJS 中的 webRTC，它正在工作......这是我的代码，希望对您有所帮助：

        navigator.getUserMedia(
            { video: true, audio: true },
            stream => {
              const localVideo = document.getElementById("local-video");
              if (localVideo) {
                localVideo.srcObject = stream;
              }

              stream.getTracks().forEach(track => this.state.peerConnection.addTrack(track, stream));

            },
            error => {
              console.warn(error.message);
            }
        );

【讨论】：

嘿，太好了！我一定会试一试的。如果我们也可以一起工作，那就太好了，因为我们的动机是一样的。 :)
是的，那太好了 :) 也许你可以帮助我...我有一个“主持人”和“加入者”的情况，人们可以加入网络摄像头（这只是一种方式流）.. .我的问题是，连接后，需要刷新页面才能其他人连接...否则流失败，即使socketIO尝试建立连接。我还将所有内容都存储在状态中，包括 RTCPeerConnection .. 我不知道这是一种不好的方法。我在 reactJS 中找不到太多 RTC 的例子！它......虽然有点工作..大声笑
我也处于'host'和'joiner'的相同情况，但事实是我一直无法达到那个标记。我目前正在尝试 1-1 连接。但我很乐意在这方面为您提供帮助，但我还是 RTC 的菜鸟 :(
我也完全是菜鸟 :) 我遇到的主要问题是......需要一个 STUN 服务器......它可以通过 LAN 工作，但不能通过互联网工作，直到添加 STUN 服务器......很容易。 .. 只是 var servers = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }] };然后使用：新的 RTCPeerConnection(servers) ...
不管怎样，你的工作进展如何？ ;D

【解决方案3】：

URL.createObjectURL(mediaStream) 不久前已被弃用和删除。不要依赖过时的文档。

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

【讨论】：

我尝试了 refs 和 srcObject 但不知何故没有锻炼。
好的。得到它的工作。这是我的错。很抱歉给您带来麻烦。