MediaDevices.getUserMedia() 必须在HTTPS或localhost安全上下文中调用，且需用户手势触发；直接调用会因非安全上下文、file://协议、缺少iframe allow="camera"等失败；须通过navigator.mediaDevices获取实例，不可new MediaDevices()；video: true不指定前后置，需用enumerateDevices()获取deviceId并约束，但该方法也需用户交互后调用；用户拒绝权限后将永久静默拒绝，需引导手动重置。
MediaDevices.getUserMedia() 必须在安全上下文中调用
直接调用 MediaDevices.getUserMedia() 会失败，除非页面运行在 HTTPS 或 localhost（含 127.0.0.1）。HTTP 页面哪怕本地打开也会被浏览器拒绝，报错 NotAllowedError: Permission denied 或直接静默失败。
常见踩坑点：
- 用文件协议打开 HTML（
file://）——不支持，必须起本地服务（如python3 -m http.server 8000） - 部署到 HTTP 域名（如
http://example.com）——会被现代浏览器拦截，连权限提示都不会弹 - iframe 嵌入时未声明
allow="camera"属性——父页即使有权限，子 iframe 也拿不到
调用前必须先获取 MediaDevices 实例，且注意兼容写法
navigator.mediaDevices 是标准入口，但旧版 Chrome/Safari 可能只暴露 navigator.webkitGetUserMedia。不能直接写 MediaDevices.getUserMedia()，因为 MediaDevices 是接口名，不是构造函数。
正确写法是：
立即学习“前端免费学习笔记（深入）”；
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
兼容性兜底建议（仅需覆盖极老版本）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查
navigator.mediaDevices?.getUserMedia是否存在，不存在再 fallback 到navigator.getUserMedia或带前缀的变体 - 不要用
new MediaDevices()—— 它不可实例化，MediaDevices是单例接口 - Firefox 63+、Chrome 71+ 已完全支持标准 API，生产环境可不处理前缀
video: true 不等于一定能拿到前置摄像头
默认行为由浏览器和系统决定，{ video: true } 只请求任意可用视频设备，不指定前后置。iOS Safari 默认用后置，Android Chrome 多数用前置，没有跨平台一致性。
想明确控制，得用 deviceId 约束：
const constraints = {
video: { deviceId: { exact: "abc123..." } }
};
但 deviceId 值必须先通过 enumerateDevices() 获取，且该方法也需在用户手势触发后调用（如点击按钮），否则返回空列表或仅含 generic label。
-
enumerateDevices()返回的deviceId是临时的，刷新页面即失效 - 不同源（origin）之间无法共享
deviceId，不能硬编码进配置 - iOS Safari 对
enumerateDevices()的支持较晚（iOS 13.4+），且部分机型仍限制返回真实 ID
用户拒绝权限后，再次调用 getUserMedia 不会重弹提示
一旦用户点“拒绝”，后续调用 getUserMedia() 会立即 reject，错误类型是 NotAllowedError，且浏览器不会再弹权限框——这是故意设计，防止骚扰。
应对方式只有两个：
- 引导用户手动去浏览器地址栏点击锁形图标 → “网站设置” → 手动重置摄像头权限
- 检测错误类型，如果是
NotAllowedError，就显示友好提示（如“请在浏览器设置中开启摄像头权限”），而不是反复重试 - 不要在
catch中自动重试，这既无效又干扰体验
真正的难点不在调用本身，而在权限状态的不可逆性和设备枚举的时机约束——很多问题不是代码写错了，而是没等用户交互就提前查设备、或在非安全上下文里硬上。
