HTML调用摄像头必须通过HTTPS（localhost除外）并由用户手势触发getUserMedia，强制弹窗请求权限，无法静默授权；错误需按NotAllowedError、NotFoundError等类型分别处理，iOS Safari存在facingMode不支持等限制。
HTML调用摄像头必须请求getUserMedia权限
是的，所有现代浏览器中通过navigator.mediaDevices.getUserMedia访问摄像头，都强制触发用户权限弹窗——这是浏览器安全策略硬性要求，无法绕过或静默授权。不弹窗、不请求、直接拿到视频流的情况只存在于本地文件协议（file://）下部分旧版 Chrome，但该行为已被逐步废弃，生产环境绝不可依赖。
常见错误现象包括：NotAllowedError: Permission denied、SecurityError: The request is not allowed by the user agent，基本都源于未走 HTTPS 或页面未交互触发（比如 onload 时立刻调用，而非由按钮点击等用户手势触发）。
- 必须部署在 HTTPS 环境（
localhost除外，开发时可豁免） - 调用
getUserMedia必须由用户手势（如click、touchstart）触发，不能放在DOMContentLoaded或自动定时器里 - 首次请求需显式传入
{ video: true }，仅写true在新版 Chrome 中已无效 - 若同时需要音频，应明确写成
{ video: true, audio: true }，避免因默认值变化导致兼容问题
getUserMedia失败后如何判断是权限拒绝还是设备不可用
错误类型决定后续处理逻辑：NotAllowedError 表示用户点了“拒绝”或之前已拒绝；NotFoundError 表示系统无可用摄像头（拔掉、被占用、驱动异常）；NotReadableError 多见于设备正被其他标签页或应用独占使用。
实际开发中建议按错误名分支处理，而不是只看是否成功：
立即学习“前端免费学习笔记（深入）”；
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream;
})
.catch(err => {
if (err.name === 'NotAllowedError') {
console.log('用户拒绝了摄像头权限');
} else if (err.name === 'NotFoundError') {
console.log('未检测到摄像头设备');
} else if (err.name === 'NotReadableError') {
console.log('摄像头被其他程序占用');
}
});
注意：PermissionDeniedError 是旧规范名，现统一为 NotAllowedError，不要混用。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
移动端 Safari 对摄像头权限有额外限制
iOS Safari 直到 11.0 才支持 getUserMedia，且至今不支持前置/后置摄像头切换参数（facingMode 在 constraints 中被忽略），也无法通过 enumerateDevices() 获取设备列表（返回空数组）。这意味着你无法在 iOS 上可靠地“选后置摄像头拍照”。
真实场景下的妥协方案：
- 放弃
facingMode: 'environment'，改用video: { facingMode: { ideal: 'environment' } }（部分机型有效，但不保证） - 不依赖
enumerateDevices做设备枚举，直接尝试getUserMedia并捕获错误 - 对 iOS 用户提示“请手动旋转手机切换镜头”，因为 Safari 会在视频元素右下角提供原生切换按钮（仅横屏时可见）
- 确保
<video>标签设置playsinline属性，否则全屏播放会中断流媒体绑定
权限状态可查但不可预设：query API 的实际价值有限
navigator.permissions.query({ name: 'camera' }) 能返回 'granted'、'denied' 或 'prompt'，但它只反映当前状态，不能代替调用 getUserMedia。即使状态是 'granted'，仍需调用 getUserMedia 才能拿到流对象；而状态为 'prompt' 时，调用 getUserMedia 仍会弹窗。
真正有用的地方只有两个：
- 在按钮文案上做区分：状态为
'prompt'时显示“开启摄像头”，'granted'时显示“重新启用” - 配合
permissionstatus.onchange监听用户后续操作（比如从“拒绝”改为“允许”），但需注意该事件在 iOS Safari 中不触发
别试图用 query 来“提前判断能否成功”——它不解决任何实质性问题，反而容易让你误以为可以跳过权限流程。
