浏览器调用摄像头必须获用户明确授权，唯一合法入口是navigator.mediaDevices.getUserMedia()；失败常因非HTTPS、iframe缺失allow属性、后台标签页暂停或约束不当等安全与兼容性限制。
浏览器调用摄像头必须先获得用户明确授权，navigator.mediaDevices.getUserMedia() 是唯一可靠入口，没有“绕过权限”或“默认开启”的合法路径。
为什么 getUserMedia() 调用失败时经常没报错？
常见现象是黑屏、静音、Promise 既不 resolve 也不 reject，实际是被浏览器静默拒绝——多数因页面未满足安全上下文要求。
- HTTP 协议下必然失败，必须使用 HTTPS 或
localhost（含127.0.0.1） - iframe 嵌入时，需显式添加
allow="camera;microphone"属性，否则权限被隔离 - 部分安卓 WebView（如微信内置浏览器）对非全屏调用限制极严，建议触发前先检查
document.hasFocus() - Chrome 94+ 对后台标签页自动暂停媒体流，切回页面后需手动重启
track.enabled = true
getUserMedia() 的约束参数怎么写才不踩坑？
硬编码宽高（如 { width: 640, height: 480 }）极易在不同设备上失败；应优先用范围约束或理想值，让浏览器自主适配。
- 要兼容性好：用
{ width: { ideal: 1280 }, height: { ideal: 720 } }，而非固定值 - 要强制竖屏手机：加
aspectRatio: { ideal: 0.5625 }（9:16），但注意部分老设备不支持该约束 - 避免同时指定
frameRate和分辨率，某些摄像头驱动会因无法满足全部约束而直接报OverconstrainedError - 请求音频时务必设
echoCancellation: true，否则 WebRTC 回声抑制可能失效
用户点了“拒绝”之后还能再申请吗？
可以，但不能直接重试 getUserMedia() —— 浏览器会直接返回 NotAllowedError，不再弹窗。必须由用户主动触发（如点击按钮），且该操作需是用户手势（click/tap）的直接响应。
立即学习“前端免费学习笔记（深入）”；
- 禁止在
setTimeout或异步回调里调用，会被视为非用户发起 - 若已拒绝，再次调用前建议先检查
MediaDevices.getSupportedConstraints()确认基础能力，再提示用户去设置页手动开启 - Firefox 下可监听
permissionstatus变化：navigator.permissions.query({ name: 'camera' })，但 Chrome 目前仅对地理位置等少数权限生效
真正难的不是调通摄像头，而是应对各种“已拒绝但用户没意识到”的状态：比如权限被系统级禁用、浏览器设置了“始终拒绝”、或用户误点了地址栏上的“禁止图标”——这些情况连 permissions.query 都查不到，只能靠 UI 引导和降级方案兜底。
