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 });
兼容性兜底建议（仅需覆盖极老版本）：
- 检查
navigator.mediaDevices?.getUserMedia是否存在，不存在再 fallback 到navigator.getUserMedia或带前缀的变体 - 不要用
new MediaDevices()—— 它不可实例化，MediaDevices是单例接口 - Firefox 63+、Chrome 71+ 已完全支持标准 API，生产环境可不处理前缀
video: true 不等于一定能拿到前置摄像头
默认行为由浏览器和系统决定，{ video: true } 只请求任意可用视频设备，不指定前后置。iOS Safari 默认用后置，Android Chrome 多数用前置，没有跨平台一致性。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
想明确控制，得用 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中自动重试，这既无效又干扰体验
真正的难点不在调用本身，而在权限状态的不可逆性和设备枚举的时机约束——很多问题不是代码写错了，而是没等用户交互就提前查设备、或在非安全上下文里硬上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
