流停止后网络摄像头指示灯保持点亮

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返回new流（克隆），而不是现有流。

您必须在灯光熄灭之前停止从all流克隆获得的all轨道克隆，这些克隆是从不同调用返回到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，也需要停止它们。