我正在构建一个从浏览器中的网络摄像头捕获图像的项目。拍摄图像后,我不再需要使用相机,因此我尝试使用以下功能将其停止:
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)仍然显示该页面正在使用摄像头。
上面的代码中缺少什么?
最佳答案
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 ,你也需要阻止他们。
关于javascript - 流停止后网络摄像头灯保持亮起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61842322/