chrome提示notallowederror的主因是调用getusermedia时机非法或非安全上下文：须在用户手势同步链中调用，且仅限https/localhost；拒绝后需引导用户手动授予权限；ios safari需video标签加playsinline/autoplay/muted并立即play()。
Chrome 浏览器提示 NotAllowedError: Permission denied 怎么办
这是最常见的情况：调用 navigator.mediaDevices.getUserMedia() 时直接报错，而不是弹出权限请求框。根本原因不是用户拒绝了，而是调用时机或上下文不合法。
关键判断点：必须在用户手势（如 click、tap）触发的同步执行链中调用，不能放在 setTimeout、fetch 回调、页面加载完成事件里异步发起。
- ✅ 正确：按钮
onclick里直接调用getUserMedia({video: true}) - ❌ 错误：在
window.addEventListener('load', ...)里调用，哪怕延迟 1ms 也不行 - ⚠️ 注意：Vue/React 中绑定的事件处理器如果被包装成异步函数（比如用了
async但没 await 实际操作），也可能中断“手势信任链”
https:// 本地开发时用 file:// 协议打不开摄像头
现代浏览器（Chrome ≥ 74、Firefox ≥ 68）强制要求 getUserMedia 只能在安全上下文中运行——即 https:// 或 localhost（含 127.0.0.1）。用双击打开 HTML 文件走 file:// 协议，一定会失败。
解决方法不是“绕过”，而是让开发环境符合安全上下文：
- 用 VS Code 插件
Live Server启动，地址自动变成http://127.0.0.1:5500/xxx.html - 命令行快速起服务：
npx http-server -c-1（禁用缓存，避免媒体流配置失效） - Webpack/Vite 开发服务器默认就满足条件，无需额外操作
别试图用 Chrome 启动参数 --unsafely-treat-insecure-origin-as-secure，它只对指定 origin 生效且每次都要重开浏览器，不适合日常调试。
用户点了“拒绝”后，再次调用 getUserMedia 不再弹窗
这是浏览器的明确行为：一旦用户手动拒绝，后续同源页面的调用会直接 reject，不再询问。这不是 Bug，是隐私保护机制。
应对策略不是“强制重弹”，而是引导用户主动修改设置：
- 检查当前权限状态：用
navigator.permissions.query({name: 'camera'})获取state（granted/denied/prompt） - 若为
denied，显示友好提示，附上浏览器地址栏右侧的摄像头图标 → 点击 → “网站设置” → 手动改为“允许” - 不要反复调用
getUserMedia触发错误，这会让用户更困惑
注意：permissions.query 在 Safari 和部分旧版 Edge 中不支持，需做 if ('permissions' in navigator) 判断。
移动端 iOS Safari 摄像头黑屏或只有第一帧
iOS Safari 对 getUserMedia 的限制比桌面端更严格：必须显式设置 playsinline + autoplay + muted，且 video 元素不能 display:none 或 visibility:hidden。
典型修复写法：
<video id="video" playsinline autoplay muted></video>
同时确保 JS 中设置 video.srcObject = stream 后，**立刻调用 video.play()**，并捕获可能的 NotSupportedError 或 NotAllowedError：
- iOS 16.4+ 支持
getUserMedia在非主屏幕方向（如横屏）下工作，但老版本仅支持竖屏初始化 - 某些微信内置浏览器（X5 内核）完全禁用摄像头，需提前 UA 检测并降级提示
真机调试时记得关掉“低电量模式”，它会静音所有媒体元素，导致 play() 失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
