javascript - 通过 ReactJS 中的 .getUserMedia 访问网络摄像头后，单击断开网络摄像头连接

Question

我正在通过 navigator.mediaDevices.getUserMedia 获取网络摄像头信息单击按钮并将其传递给 <video />通过 createRef API。我需要在单击同一按钮时关闭源(而不是暂停)(如果它已打开)。

我尝试过访问媒体轨道，例如

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

尝试阻止他们，但没有成功。

我通过此函数处理流开/关:

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();
});