通过 ReactJS 中的 .getUserMedia 访问网络摄像头后点击断开网络摄像头

Question

我在单击按钮时通过 navigator.mediaDevices.getUserMedia 获取网络摄像头，并通过 createRef API 将其传递给 <video />。如果打开，我需要在同一个按钮上关闭（而不是暂停）Feed。

我试过访问像

这样的媒体曲目

.getUserMedia({ video: true, audio: false })
 .then(stream => 
  (this.video.current.srcObject = stream.getTracks()[0].stop))

尝试阻止他们，但没有运气。

我通过这个函数处理流 on/off：

handleClick = () => {
 // accessing webcam feed
 if (!this.state.rec) {
   navigator.mediaDevices
    .getUserMedia({ video: true, audio: true })
    .then(stream => (this.video.current.srcObject = stream))
 } else {
  // TODO disconnect webcam feed
 }
};

我希望有一个功能，可以在点击网络摄像头时断开连接（如果它是实时的）。

Answer 1

停止轨道是解决方案，但实际上您需要调用该方法。您还应该在所有轨道上调用它，即使您只期望一个轨道，以防万一您的约束没有完全满足。

stream.getTracks().forEach((track) => {
  track.stop();
});

通过 ReactJS 中的 .getUserMedia 访问网络摄像头后点击断开网络摄像头

Disconnect webcam on click after accessing it through .getUserMedia in ReactJS

javascript

video-streaming

getusermedia

reactjs

mediastream