时间戳

首页 > 解决方案 > 通过 ReactJS 中的 .getUserMedia 访问后单击断开网络摄像头

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

问题描述

我通过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
 }
};

我希望有一个功能，如果它是实时的，它会在点击时断开网络摄像头的馈送。

标签： javascriptreactjsvideo-streaminggetusermediamediastream

解决方案

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

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

推荐阅读