模态窗口内无法打开webcam媒体设备的故障排查求助

问题根因 #

你的代码核心问题是摄像头调用时机错误：

• 页面加载完成后就立刻执行getUserMedia请求摄像头权限，此时Bootstrap模态框处于display: none的隐藏状态，多数浏览器会限制为不可见的媒体元素授予设备访问权限，即使权限申请通过，流也无法正常绑定到未渲染的video元素上。
• 你的video标签未设置宽高属性，即使流绑定成功也会因为显示尺寸为0出现灰屏。

修复方案 #

1. 调整HTML中video标签属性

给video标签添加宽高样式，确保流渲染后可以正常显示：

<!-- 模态框其他代码保持不变，仅修改video标签部分 -->
<video autoplay="true" id="video1" style="width: 100%; height: auto;"></video>

2. 调整JS逻辑，绑定模态框显示事件

将摄像头调用逻辑绑定到模态框完全弹出的事件上，同时在模态框关闭时主动释放摄像头设备，避免硬件占用：

// 保存摄像头流对象，方便后续关闭释放
let cameraStream = null;
const video = document.querySelector("#video1");

// 监听Bootstrap模态框完全显示的事件
$('#myModal').on('shown.bs.modal', function () {
  if (!navigator.mediaDevices?.getUserMedia) {
    console.log('当前浏览器不支持摄像头访问');
    return;
  }
  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(function (stream) {
      cameraStream = stream;
      video.srcObject = stream;
    })
    .catch(function (error) {
      // 打印详细错误信息，方便后续排查
      console.log("摄像头调用失败：", error);
    });
})

// 监听模态框关闭事件，释放摄像头硬件
$('#myModal').on('hidden.bs.modal', function () {
  if (cameraStream) {
    // 停止所有媒体轨道，彻底释放摄像头
    cameraStream.getTracks().forEach(track => track.stop());
    video.srcObject = null;
    cameraStream = null;
  }
})

额外检查项 #

• 确保你的页面是通过HTTPS协议访问的，除了localhost本地调试场景外，HTTP协议下浏览器默认禁止调用getUserMedia接口。
• 首次请求权限时请在弹出的浏览器权限提示中选择「允许」，如果之前误选了拒绝，可以在浏览器的站点设置中重置当前站点的摄像头权限。

内容的提问来源于stack exchange，提问作者meanthatmuchtoyou