javascript - 流停止后网络摄像头灯保持亮起

Question

我正在构建一个从浏览器中的网络摄像头捕获图像的项目。拍摄图像后，我不再需要使用相机，因此我尝试使用以下功能将其停止:

function stopCamera(container) {
    console.log("Stopping the camera.");

    video = container.querySelector('.video-streamer');

    console.log(video);

    video.srcObject = null;

    navigator.mediaDevices.getUserMedia({ video: true }).then(
        function (stream) {
            console.log(stream.getTracks().length);

            stream.getTracks().forEach(function (track) {
                console.log("Found a stream that needs to be stopped.")
                track.stop();
            });

            console.log(stream.getTracks().length);
        }).catch(
            function (error) {
                console.log('getUserMedia() error', error);
            });

}

但是，即使在调用该函数后，网络摄像头访问灯仍然亮着，我看到浏览器(Firefox 和 Chrome)仍然显示该页面正在使用摄像头。

上面的代码中缺少什么？

Answer 1

navigator.mediaDevices.getUserMedia返回一个新流(克隆)，而不是现有流。

你必须停止 全部 来自 的轨道全部 从对 getUserMedia 的不同调用返回的流克隆，在灯熄灭之前。

在您的情况下，这包括您已经在播放的流的轨道。使用以下内容:

function stopCamera(container) {
  const video = container.querySelector('.video-streamer');

  for (const track of video.srcObject.getTracks()) {
    track.stop();
  }
  video.srcObject = null;
}

一旦所有轨道停止，灯应立即熄灭。

如果您忽略此操作，则 video.srcObject = null 后 3-10 秒后灯仍会熄灭感谢垃圾收集(假设它是对流的唯一引用)。

如果您创建了任何轨道 clones ，你也需要阻止他们。