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

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 秒后熄灭。

如果您创建了任何轨道克隆，您也需要停止它们。