getUserMedia调用失败主因是安全上下文限制（仅HTTPS或localhost）、非用户手势触发、constraints配置不当；需用srcObject绑定流，区分错误类型处理权限与设备问题。
getUserMedia 调用失败常见报错和原因
直接调用 MediaDevices.getUserMedia 报 NotAllowedError 或 SecurityError 是最常遇到的问题。根本原因是浏览器强制要求：该 API 只能在安全上下文（https:// 或 localhost）中运行，HTTP 页面会静默拒绝。
- 本地开发时用
http://localhost:8080可以；但file://协议绝对不行 - 生产环境必须部署在 HTTPS 服务上，哪怕自签名证书也比 HTTP 强
- 部分旧版 Safari（iOS 11 之前）不支持非 HTTPS 域名下的
getUserMedia - 用户未点击触发（如页面 onload 时自动调用）也会被拦截 —— 必须由用户手势（
click、tap）发起
约束对象 constraints 的写法与实际效果差异
constraints 不是可有可无的参数，空对象 {} 在某些浏览器（如 Chrome 90+）可能默认只请求音频，导致视频流为空。明确指定所需轨道才可靠。
- 要视频和音频：
{ video: true, audio: true } - 只要高清视频：
{ video: { width: { ideal: 1920 }, height: { ideal: 1080 } } } - 禁用音频但保留视频：
{ video: true, audio: false }（注意不是省略audio） - 使用特定摄像头：
{ video: { deviceId: 'xxx' } }，需先用enumerateDevices()获取有效deviceId
设备能力超出约束时，浏览器会尽力满足 ideal，但最终分辨率/帧率仍可能降级，不可假设一定返回理想值。
拿到 MediaStream 后怎么正确绑定到 <video> 元素
不能直接赋值 src，必须用 URL.createObjectURL() 创建临时对象 URL，否则视频不会播放。
立即学习“前端免费学习笔记（深入）”；
const video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
// ✅ 正确：创建对象 URL 并赋给 srcObject（现代推荐）
video.srcObject = stream;
// ❌ 错误：src 不接受 MediaStream
// video.src = stream;
// ⚠️ 兼容旧版（如 Safari 11）可加 fallback：
// video.src = URL.createObjectURL(stream);
})
.catch(err => console.error('获取媒体流失败:', err));
注意：srcObject 是标准属性，无需再手动调用 play() —— 但若 <video> 带 muted 属性且含音频，部分浏览器仍需显式调用 video.play() 才能启动。
权限拒绝或设备被占用时的处理逻辑
用户点“拒绝”或系统提示“设备已被其他应用使用”，getUserMedia 会 reject，但错误类型不同，需区分对待：
-
NotAllowedError：用户拒绝权限，或页面非安全上下文 -
NotFoundError：找不到匹配的设备（如指定deviceId但已拔掉摄像头） -
NotReadableError：设备正被占用（Zoom、Teams、另一个标签页开着摄像头） -
OverconstrainedError：约束条件冲突（如同时要求 4K 分辨率和 60fps，但设备不支持）
真实项目中建议在 catch 中检查 err.name，而不是只打印日志 —— 比如 NotReadableError 可提示“请关闭其他正在使用摄像头的应用”，比泛泛的“获取失败”有用得多。
设备列表动态变化（插拔摄像头、开关麦克风）时，enumerateDevices() 返回结果可能滞后，需结合 devicechange 事件监听并重新枚举。
