HTML摄像头调用需在HTTPS或localhost安全上下文中，且必须由用户手势触发；错误需区分处理，移动端需适配autoplay/muted等特性，并监听权限状态以应对撤回。
HTML 摄像头本身不能提升权限，它只能请求用户授权；所谓“提升权限”是误解，实际是浏览器策略限制下的合规调用问题。
为什么 navigator.mediaDevices.getUserMedia() 会失败或静默拒绝
现代浏览器（Chrome、Edge、Firefox、Safari）强制要求：调用摄像头必须在安全上下文（https:// 或 localhost）中进行。HTTP 页面直接调用会立刻抛出 NotAllowedError 或 SecurityError，且不会弹出授权框。
- 非 HTTPS 环境下，
getUserMedia()直接 reject，错误信息通常是"NotAllowedError: Permission denied"或"SecurityError: getUserMedia() not allowed in this context" - Safari 对
localhost的处理较宽松，但对127.0.0.1可能不识别为安全上下文，建议统一用localhost - 页面未与用户交互（如点击）就提前调用，部分浏览器（尤其 iOS Safari）会拒绝，必须由显式用户手势触发
如何正确触发并处理摄像头权限请求
权限不是“一次获取永久有效”，而是分阶段：先请求，再根据用户选择决定是否可用；且用户可在系统设置里随时关闭。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须绑定到用户手势事件，例如：
button.addEventListener('click', async () => { await navigator.mediaDevices.getUserMedia({ video: true }); }) - 不要在页面加载时自动调用，避免被浏览器拦截或标记为可疑行为
- 捕获并区分错误类型：
NotAllowedError（用户点拒绝）、NotFoundError（无摄像头）、NotReadableError（设备被占用），不同错误需不同提示 - 调用前可先检查支持性：
if (navigator.mediaDevices?.getUserMedia)，避免旧版 IE 等环境报错
移动端适配特别注意的三个坑
移动端权限模型更严格，且系统级设置优先级高于网页逻辑。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 要求
video必须带autoplay和muted属性，否则视频流可能黑屏或卡住：<video autoplay muted playsinline></video> - Android Chrome 在后台标签页中暂停媒体流，切回前台后需手动重启轨道（
track.enabled = true），否则画面冻结 - 部分国产安卓浏览器（如 QQ 浏览器、UC）不支持
getUserMedia，或仅支持特定版本，务必做降级提示（如显示“请使用 Chrome 或 Safari”）
真正难的不是调通摄像头，而是应对各种浏览器策略差异、系统权限开关状态、以及用户中途撤回授权后的恢复逻辑——这些没法靠一行代码解决，得靠状态监听（permissionstatus API）和重试引导来兜底。
