在 React 中查看来自 WebRTC 的视频提要

Question

这是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>

JS

const videos = createRef(null);

错误

未处理的拒绝（类型错误）：无法添加属性 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 |   };

Answer 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>

这应该可以解决问题。

在 React 中查看来自 WebRTC 的视频提要

Viewing video feed from WebRTC in react

html

javascript

video-streaming

web

reactjs