NotAllowedError黑屏主因是浏览器未获摄像头权限，需用户点击允许且页面启用HTTPS；须由用户手势触发调用，正确绑定stream到video.srcObject，并注意Safari需autoplay/muted/playsinline三属性齐备。
WebRTC navigator.mediaDevices.getUserMedia 报错 NotAllowedError
这是最常见黑屏原因：浏览器根本没拿到摄像头权限。不是代码写错了，是用户没点“允许”，或者页面没走 HTTPS（Chrome 对非安全上下文直接拒掉）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查地址栏有没有锁形图标，
http://localhost可以，但http://192.168.x.x或纯http://域名在新版 Chrome 里会静默失败 - 调用
getUserMedia前加个简单判断：if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { /* 提示不支持 */ } - 别在页面加载完就自动调用——必须由用户手势（如点击按钮）触发，否则 Chrome 直接抛
NotAllowedError: Permission denied
调用 getUserMedia 后 video 元素一直黑屏，但没报错
权限有了、调用也成功了，stream 对象也拿到了，但 <video></video> 还是黑的——大概率是没把 stream 正确绑定到 video 的 srcObject。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认用了
video.srcObject = stream，而不是过时的createObjectURL（已废弃，且在 Safari 上可能黑屏） - 确保
video元素已挂载到 DOM，且没有被display: none或visibility: hidden挡住（部分安卓 WebView 会因此不渲染帧） - 加个
video.onloadeddata = () => console.log('video loaded')看是否触发，不触发说明流没真正连上
多个标签页或应用同时打开摄像头导致黑屏
摄像头是独占资源。Chrome、Edge、Safari 都不允许两个页面同时访问同一设备，后开的会失败或静默黑屏，错误可能是 OverconstrainedError 或直接无提示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
navigator.mediaDevices.enumerateDevices()查当前可用设备，注意label字段是否为空（权限未授权时通常为空） - 监听
devicechange事件，在用户插拔摄像头或切换设备时重新枚举，避免缓存旧设备列表 - 释放资源一定要做：
stream.getTracks().forEach(track => track.stop())，否则切页或刷新后设备仍被占用
移动端 Safari 黑屏但桌面 Chrome 正常
Safari 对 WebRTC 的限制更严：必须 playsinline、autoplay、muted 三者齐备，否则 video 不渲染画面（哪怕 stream 已绑定）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<video autoplay muted playsinline></video>缺一不可，少一个都可能黑屏 - 不要依赖
video.play()的 Promise 返回，Safari 有时 resolve 了但画面仍不出现，得靠canplay或playing事件确认 - 真机调试用 Safari 的「开发 → [设备名] → [页面]」，远程控制台能看到真实报错，模拟器经常不准
黑屏问题表面是画面没出来，实际往往是权限链、生命周期或平台策略断了一环。最容易被忽略的是：你以为调用成功了，其实 stream 里压根没 video track——打印 stream.getVideoTracks().length 比猜靠谱得多。
