JavaScript通过MediaDevices.getUserMedia()获取摄像头权限并获取视频流，需在HTTPS或localhost安全上下文中调用；成功后将MediaStream赋给video.srcObject实时显示；不再使用时应遍历track.stop()释放资源；需捕获NotAllowedError、NotFoundError等错误并提示用户。

JavaScript 通过 MediaDevices.getUserMedia() API 获取用户授权并访问摄像头（和麦克风），这是 Web 实现实时音视频采集的核心接口。关键在于正确请求权限、处理媒体流、绑定到 HTML 元素显示，并妥善管理生命周期。

获取摄像头权限并获取视频流

调用 navigator.mediaDevices.getUserMedia()，传入约束对象指定需要视频（可选音频）。该方法返回 Promise，成功后得到 MediaStream 对象：

• 只启用摄像头：{ video: true }
• 同时启用摄像头和麦克风：{ video: true, audio: true }
• 指定分辨率等高级约束（如 { video: { width: { ideal: 1280 }, height: { ideal: 720 } } }）

注意：必须在安全上下文（https:// 或 localhost）中运行，否则浏览器会拒绝调用。

将视频流显示在页面上

拿到 MediaStream 后，赋值给 元素的 srcObject 属性即可实时播放：

const video = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
  })
  .catch(err => {
    console.error('访问摄像头失败:', err.name, err.message);
  });

无需再用 URL.createObjectURL()（旧写法已废弃），现代浏览器直接支持 srcObject。

停止摄像头（释放资源）

不再需要视频流时，应主动停止所有轨道，避免持续占用摄像头、耗电或影响其他应用：

• 遍历 stream.getTracks()，对每个 MediaStreamTrack 调用 .stop()
• 常见做法：stream.getTracks().forEach(track => track.stop());
• 也可设 video.srcObject = null，但不释放底层设备，推荐显式 stop

例如在组件卸载、切换页面或用户点击“关闭摄像头”时执行。

处理常见错误与兼容性

用户拒绝权限、设备不可用、不支持 HTTPS 等都会触发 Promise reject。常见错误类型包括：

• NotAllowedError：用户点击了“拒绝”或浏览器自动阻止（如 iframe 无用户手势）
• NotFoundError：未检测到可用摄像头
• NotReadableError：摄像头被其他程序占用
• SecurityError：非安全上下文（HTTP 非 localhost）

建议在 catch 中根据 err.name 给出明确提示，并引导用户检查设置或刷新页面。