getUserMedia 调用失败主因是环境与权限问题：HTTPS 为硬性前提（仅 localhost/127.0.0.1 允许 HTTP），移动端需用户手势触发；NotFoundError 表示设备缺失或系统级禁用；正确绑定视频流应使用 video.srcObject = stream，停止时须调用 track.stop() 释放资源。
getUserMedia 调用失败的常见报错和原因
直接调用 navigator.mediaDevices.getUserMedia({ video: true }) 报 NotAllowedError 或 NotFoundError，基本可以确定是环境或权限问题。HTTPS 是硬性前提——本地开发时 http://localhost 和 http://127.0.0.1 被浏览器视为安全上下文，但其他 http:// 地址一律拒绝。非 HTTPS 页面调用会静默失败或抛出 SecurityError。
- 检查地址栏是否显示锁形图标，或在控制台执行
location.protocol确认是https:或允许的本地协议 - 移动端必须通过用户手势（如
click、touchstart）触发，不能在页面加载后自动调用 -
NotFoundError通常表示设备不存在（比如笔记本没摄像头）或被系统级禁用（macOS 的“隐私与安全性”里需手动授权）
正确请求视频流并绑定到 <video> 元素
拿到 MediaStream 后不能直接赋值给 video.src，必须用 URL.createObjectURL() 生成临时 URL。现代写法推荐使用 video.srcObject，它支持直接赋值 MediaStream，且无需手动回收 URL。
const video = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream; // ✅ 推荐：无需 createObjectURL，也无需手动 revoke
})
.catch(err => {
console.error('获取摄像头失败:', err.name, err.message);
});
- 旧写法
video.src = URL.createObjectURL(stream)需在流停止后调用URL.revokeObjectURL(video.src)，否则内存泄漏 -
srcObject是标准属性，Chrome 53+、Firefox 51+、Safari 11+ 均支持，无需兼容旧版 - 务必在
then中设置video.play()（部分浏览器需显式调用）
约束条件（constraints）怎么写才有效
约束不是“建议”，而是强制要求。如果指定的分辨率或帧率硬件不支持，getUserMedia 会直接拒绝，除非你把参数设为 ideal 或 exact 并配合降级逻辑。
- 基础写法：
{ video: { width: 1280, height: 720 } }表示“必须满足”，不满足就报错 - 柔性写法：
{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } }表示“尽量接近”，浏览器会选最匹配的可用配置 - 常见陷阱：
frameRate在部分安卓设备上不可靠，iOS Safari 完全忽略该约束 - 开启镜像（自拍视角）：
{ video: { facingMode: 'user' } }；后置摄像头用'environment'
如何安全地停止摄像头并释放资源
用户离开页面或切换 Tab 时，摄像头不会自动关闭，必须手动调用 track.stop()。只停 video.srcObject = null 不够，底层媒体轨道仍活跃。
立即学习“Java免费学习笔记（深入）”；
let stream = null;
async function startCamera() {
stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
}
function stopCamera() {
if (stream) {
stream.getTracks().forEach(track => track.stop()); // ✅ 关键：遍历所有 track 并 stop
stream = null;
}
}
-
getTracks()返回的是MediaStreamTrack数组，每个 track 对应一个音/视频源 - 停止后再次调用
getUserMedia是安全的，但频繁启停可能触发系统弹窗（尤其 macOS） - 监听
visibilitychange事件，在页面隐藏时自动 stop，显示时再启动（注意需用户手势）
真正麻烦的从来不是调通那一行代码，而是设备兼容性、权限弹窗时机、约束不生效却无提示、以及忘记 stop 导致的后台摄像头常驻——这些细节不处理，上线后第一波投诉就来了。
