使用JavaScript Media Devices无法关闭Web摄像头的问题求助

开发者阿泽

2026-6-22

解决Web摄像头无法彻底关闭的问题

问题根源

你当前的代码逻辑存在致命问题：每次执行停止操作时，都会重新发起一次摄像头权限请求并创建新的媒体流，随后仅停止这个刚创建的新流，但之前正在占用摄像头的旧流完全没被处理——这就是摄像头LED灯无法熄灭、仅刷新页面才生效的原因。

修复方案

核心思路是保存并复用原始媒体流的引用，停止时直接操作这个已存在的流实例：

1. 保存流引用

在全局作用域或组件实例中声明变量存储活跃流：

// 全局/组件内变量，用于保存当前活跃的媒体流
let activeCameraStream = null;

2. 初始化摄像头时赋值引用

调用getUserMedia获取流后，将其赋值给上述变量：

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    activeCameraStream = stream;
    // 这里绑定到video元素做渲染（如果需要）
    // document.getElementById('video').srcObject = stream;
  })
  .catch(err => console.error('摄像头访问失败:', err));

3. 停止摄像头时操作已保存的流

停止时直接对activeCameraStream进行处理，而非重新请求新流：

// 停止摄像头逻辑
if (activeCameraStream) {
  // 遍历所有轨道并停止
  activeCameraStream.getTracks().forEach(track => {
    track.stop();
    // 主动释放轨道引用，避免内存泄漏
    track = null;
  });
  // 清空流引用
  activeCameraStream = null;
  // 额外：如果有绑定video元素，清空其srcObject
  // document.getElementById('video').srcObject = null;
}