在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);

错误

未处理的拒绝(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 |   };

Answer 1

创建视频元素的ref后，必须使用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>

这应该可以解决问题。