在反应中查看来自 WebRTC 的视频源答案

【问题标题】：Viewing video feed from WebRTC in react在反应中查看来自 WebRTC 的视频源
【发布时间】：2021-04-13 07:13:31
【问题描述】：

这是 HTML 代码

<video ref={videos}  autoPlay ></video>

   <Button onClick={() => 
navigator.mediaDevices.getUserMedia({audio: true, video: true}).then((mediaStream) => {

  videos.srcObject = mediaStream;
  videos.onloadedmetadata = function(e) {
    videos.play();
  };
}
)}>Record</Button>

const videos = createRef(null);

错误

未处理的拒绝（TypeError）：无法添加属性 srcObject，对象不可扩展

 353 |    <Button onClick={() => 
  354 | navigator.mediaDevices.getUserMedia({audio: true, video: true}).then((mediaStream) => {
  355 | 
> 356 |   videos.srcObject= mediaStream;
  357 |   videos.onloadedmetadata = function(e) {
  358 |     videos.play();
  359 |   };

【问题讨论】：

您可能正在寻找 DOM 元素 videos.current。请阅读the tutorial。

标签： javascript html reactjs web video-streaming

【解决方案1】：

创建视频元素的引用后，您必须使用video.current 属性来访问 DOM 元素。您的代码应如下所示：

<video ref={videos}  autoPlay ></video>
   <Button onClick={() => 
    navigator.mediaDevices.getUserMedia({audio: true, video: true})
    .then((mediaStream) => {
      videos.current.srcObject = mediaStream;
      videos.current.onloadedmetadata = function(e) {
      videos.current.play();
      };
    }
    )}>Record</Button>

这应该可以解决问题。

【讨论】：

这应该可行，我看到了 ``` 。当前 ``` 但我认为它仅用于文本输入
@RaphaelInyang，查看文档）reactjs.org/docs/refs-and-the-dom.html
我不在家，为了确认可信度，我确认后会标记的