html调用摄像头需用户手势触发getusermedia，禁用非https或file://协议，video须设autoplay+muted并用srcobject绑定流；权限拒绝后应检查navigator.permissions.query，真机测试 facingmode 和约束参数适配。
HTML调用摄像头时 getUserMedia 报错 PermissionDenied
直接原因是浏览器未获得用户明确授权，或调用时机不合法。Chrome、Edge、Safari 都要求 getUserMedia 必须由用户手势（如 click、touchstart）触发，不能在页面加载、setTimeout 或异步回调中直接调用。
常见错误现象包括：NotAllowedError: Permission denied、SecurityError: The request is not allowed by the user agent。
- 确保调用
navigator.mediaDevices.getUserMedia的函数绑定在按钮点击等显式用户交互事件上 - 避免在
window.onload、DOMContentLoaded或fetch回调里直接请求权限 - Safari 17+ 对非 HTTPS 环境更严格，本地开发建议用
http://localhost（被豁免），而非file://协议打开 HTML 文件 - 首次调用前可先检查
navigator.mediaDevices是否可用，再判断是否已授予权限（通过queryPermission不可靠，推荐用MediaDevices.enumerateDevices()+ 实际调用试探）
video 标签黑屏但控制台无报错
多数情况是流媒体对象未正确绑定到 video 元素，或自动播放策略被拦截。现代浏览器默认禁止静音外的自动播放，而摄像头流默认无音频，video 可能因缺少 autoplay + muted 组合被静默挂起。
- 必须设置
video元素的autoplay和muted属性：<video autoplay muted></video> - 拿到 MediaStream 后，要用
video.srcObject = stream（不是src），且该赋值需在用户手势上下文中完成 - 部分安卓 WebView 或旧版 iOS Safari 不支持
srcObject，可降级用URL.createObjectURL(stream)，但注意后续需手动URL.revokeObjectURL - 若仍黑屏，检查
stream.getVideoTracks()是否返回空数组——说明摄像头实际未启用（比如设备被占用、驱动异常）
如何减少首次调用权限弹窗被屏蔽或忽略
浏览器对反复、非上下文触发的权限请求会降权甚至静默拒绝。用户看到弹窗后不点“允许”或直接关闭，下次再调用可能直接进 catch 而不弹窗。
- 不要在页面加载完就立刻调用
getUserMedia；优先展示引导文案 + 明确按钮（如“开启摄像头”），把权限请求动作完全交由用户主动触发 - 避免在同一个用户会话中重复请求（比如按钮多次点击）；可缓存
MediaStream实例，或用stream.active判断是否仍在使用 - 若用户拒绝过，
Permissions API的navigator.permissions.query({name:'camera'})可返回state: 'denied'，此时应隐藏摄像头功能入口，而非再次尝试调用 - 部分企业内网环境或 Chrome 策略组（Group Policy）会禁用摄像头，这类限制无法绕过，需提前提示用户检查系统设置
移动端摄像头方向与分辨率适配问题
手机前后置摄像头默认方向相反，且 getUserMedia 的 width/height 约束常被忽略或降级，导致画质模糊或拉伸。
- 指定
deviceId前，先用enumerateDevices()获取设备列表，区分label和kind: 'videoinput'，再按需选前置/后置（facingMode: 'user'或'environment'） -
constraints中的分辨率建议用ideal而非exact，例如：{ width: { ideal: 1280 }, height: { ideal: 720 } }，避免因设备不支持而失败 - Android Chrome 对
facingMode支持不稳定，可配合deviceId使用；iOS Safari 则严格依赖facingMode，deviceId可能无效 - 横屏拍摄时，
video元素需加transform: rotate(90deg)并调整宽高，否则画面被裁剪——但注意这仅影响显示，canvas.captureStream()或截图仍按原始方向
权限不是一次配置就能一劳永逸的事。用户改系统设置、换浏览器、清缓存，都可能导致状态重置；而不同机型对 facingMode 和约束参数的实际响应差异极大，真机测试比模拟器重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
