html摄像头权限必须通过navigator.mediadevices.getusermedia()显式申请，且需用户手势触发、https环境、正确处理拒绝状态及移动端兼容性；错误需区分notallowederror、notfounderror、notreadableerror；绑定流应使用video.srcobject = stream。
HTML摄像头权限不是“能解决”，而是必须显式申请
浏览器不会自动给你开摄像头，navigator.mediaDevices.getUserMedia() 这个调用本身就会触发权限弹窗——它不是绕过权限的方案，恰恰是标准的、唯一的权限申请入口。很多人误以为“用了 HTML 摄像头 API 就等于搞定了权限”，结果在生产环境发现首次加载黑屏、控制台报 NotAllowedError，根本原因是没处理好调用时机和上下文。
- 必须由用户手势（如
click、touchstart）触发，不能在页面 onload 或定时器里直接调； - HTTP 协议下 Chrome / Edge 会直接拒绝，必须走
https://或localhost； - 如果用户之前点过“拒绝”，后续再调
getUserMedia()不会再次弹窗，得引导用户手动去浏览器地址栏点锁图标改设置； - iOS Safari 对自动播放和媒体权限更敏感，即使有手势，也要确保
video元素已挂载且未设display: none。
getUserMedia() 失败时常见错误信息及对应原因
实际开发中，你看到的报错几乎都来自 getUserMedia() 的 Promise reject，而不是 HTML 标签本身的问题。关键要区分三类错误：
-
NotAllowedError：权限被拒或非安全上下文（HTTP），也可能是页面被 iframe 嵌套且未加allow="camera"属性； -
NotFoundError：设备不存在（比如真机没插摄像头、MacBook 盖着盖子、或模拟器没开启虚拟摄像头）； -
NotReadableError：摄像头被其他程序占用（Zoom、Teams、另一个浏览器标签页），Windows 上尤其常见。
别只打印 error.name，建议同时输出 error.message 和 error.stack 到日志，方便定位是策略限制还是硬件冲突。
video.srcObject = stream 是唯一推荐的绑定方式
老教程里常见的 URL.createObjectURL(stream) + 赋值给 video.src 已被弃用，Chrome 92+ 会警告，Safari 15.4+ 直接不工作。正确做法是直接赋值 stream 给 video.srcObject：
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream; // ✅ 正确
// video.src = URL.createObjectURL(stream); // ❌ 过时，且需手动 revoke
这个赋值是实时的、可撤销的：video.srcObject = null 就能立即释放摄像头，不需要额外清理 URL 对象。如果忘了这步，摄像头红灯常亮、其他应用无法使用，就是典型资源泄漏。
移动端真机调试时最容易忽略的兼容性点
开发时在桌面 Chrome 测试通过，一上 iPhone 就黑屏，大概率卡在这几个细节：
- iOS 16+ 要求
<video></video>必须有playsinline属性，否则默认全屏且不渲染画面； - 部分 Android WebView（比如微信内置浏览器）不支持
aspectRatio约束，指定{ width: { ideal: 1280 }, height: { ideal: 720 } }可能直接失败，建议降级为{ facingMode: "environment" }或仅用video: true； - 华为/小米等定制系统可能拦截
getUserMedia()并弹自有权限框，此时 Promise 仍会 resolve，但返回的stream实际为空——得靠stream.getVideoTracks()[0]?.readyState === "live"做二次校验。
真机测试别只看画面是否出来，一定要打开 DevTools 连接 Safari / Chrome for iOS，检查 console 和 Media 面板里的 track 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
