浏览器拒绝调用摄像头主因是安全策略限制：必须https（localhost除外）、用户手势触发，且需预检权限状态并正确处理错误。
浏览器拒绝调用摄像头，大概率不是代码写错了，而是权限触发条件没满足——navigator.mediaDevices.getUserMedia() 在现代浏览器中受严格的安全策略约束，不满足“安全上下文”或用户交互要求，就会静默失败或抛出 NotAllowedError、SecurityError。
为什么 getUserMedia 一调就报 NotAllowedError
这个错误最常见于两种场景：一是页面未通过 HTTPS 加载（除 localhost 外的任何 HTTP 地址都不行），二是调用时机不对——Chrome 90+ 和 Safari 要求必须由**明确的用户手势**（如 click、touchend）触发，不能在页面加载、DOMContentLoaded 或自动轮播逻辑里执行。
容易忽略的点：
-
127.0.0.1≠localhost：Chrome 94+ 已明确不信任http://127.0.0.1:8080，必须用http://localhost:8080 - iframe 内调用必须加
allow="camera"属性，否则直接拒绝，连错误都不会进 catch - 错误对象的
err.name才是稳定判断依据，err.message在不同版本 Chrome 中可能变化（比如 “Permission denied” 或 “User gesture required”）
如何正确请求视频权限并处理拒绝状态
不要直接 await navigator.mediaDevices.getUserMedia({ video: true }) 就完事。得先查权限状态、再请求、再兜底处理。
实操建议：
- 用
navigator.permissions.query({ name: 'camera' })预判当前状态：granted、denied或prompt；若已是denied，说明用户之前点过“拒绝”，此时再调getUserMedia会立刻 reject，应引导用户手动去浏览器设置页开启 - 调用必须包在
try-catch里，且 catch 中检查err.name === 'NotAllowedError'，而不是靠字符串匹配err.message - 移动端（尤其 iOS Safari）必须确保
<video></video>元素有muted和autoplay属性，否则即使拿到流也无法播放 - 如果想强制后置摄像头（拍照场景常用），约束对象里加
facingMode: { exact: 'environment' }，但注意部分安卓机型不支持该值，可 fallback 到user
HTTP 环境下临时调试的可行方案
生产环境必须上 HTTPS，但测试/内网环境临时跑通，有且仅有一个靠谱办法：Chrome 实验性标记。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
步骤很明确：
- 地址栏输入
chrome://flags/#unsafely-treat-insecure-origin-as-secure - 在 “Insecure origins treated as secure” 输入框填目标地址，例如
http://192.168.1.100:3000（多个用英文逗号分隔） - 右侧下拉选
Enabled，点右下角Relaunch重启浏览器 - 重启后访问该地址，
navigator.mediaDevices就会存在，getUserMedia也能正常 resolve
注意：这个设置只对指定地址生效，不影响其他 HTTP 站点；Firefox 和 Edge 不支持此方式，需换用本地 HTTPS 开发服务（如 Vite 的 --https）。
分辨率与设备适配的硬坑
设了 { width: { ideal: 1920 }, height: { ideal: 1080 } } 不代表真能拿到 1080p——浏览器最终返回的尺寸取决于设备能力、驱动、系统权限，甚至当前是否已有其他应用占用了高清通路。
更稳妥的做法：
- 用
min+ideal组合，避免写死exact（容易直接失败） - 拿到流后，读取
stream.getVideoTracks()[0].getSettings()查看实际生效的width/height，再动态调整 canvas 尺寸 - Android 上部分 WebView（如微信内置）根本不支持
getUserMedia，要提前用'mediaDevices' in navigator做兼容检测，别等报错才降级 - 拍照时从
<video></video>绘制到<canvas></canvas>，canvas 的width/height属性必须显式设为目标分辨率，不能只靠 CSS 缩放，否则导出图片糊
最常被跳过的细节：iOS Safari 对 showSaveFilePicker 支持有限，download 属性在某些版本会失效，导出图片前务必先 console.log 出 Data URL 长度，确认不是空字符串再生成链接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
