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

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

您必须停止 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，您也需要停止它们。

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

Web camera light stays on after stream is stopped

html

javascript

webcam

web

webrtc