应先检查是否为HTTPS/localhost环境、是否由用户手势触发、iframe是否含allow="camera"属性；再根据error.name区分NotAllowedError（用户拒绝或策略拦截）、SecurityError（协议不安全）、NotFoundError（设备缺失）三类错误。

MediaDevices.getUserMedia() 权限拒绝时怎么查原因

浏览器拒绝调用摄像头，90% 是因为没走 HTTPS 或页面没在用户交互后触发。HTTP 协议下 getUserMedia() 直接抛 NotAllowedError，连提示都没有；本地文件（file://）协议也一样被禁。

• 检查地址栏：必须是 https:// 开头，或 localhost（Chrome/Firefox 对其豁免）
• 确保调用发生在用户手势之后，比如 button.onclick 里，不能在 page load 或 setTimeout 里直接调
• 如果用了 iframe，确认它带 allow="camera" 属性，否则会被 sandbox 阻断

video.srcObject = stream 赋值后没画面怎么办

srcObject 是现代标准写法，但容易漏掉关键步骤：video 元素必须已挂载到 DOM，且不能设 display: none 或父元素不可见，否则部分浏览器（尤其是 Safari）会静音/停帧。

• 先 append 到 body 或 visible 容器，再赋值 srcObject
• 加 autoplay 和 muted 属性（音频流默认需要静音才允许自动播放）
• 别用 src 属性——那是给 Blob URL 用的，srcObject 是直接接 MediaStream

const video = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream; // ✅ 正确
    // video.src = URL.createObjectURL(stream); ❌ 过时且易内存泄漏
  });

只想要摄像头不想要麦克风，但 Chrome 还弹音频权限框

Chrome 从 94 版起，即使只请求 { video: true }，也会默认附带音频权限请求（除非明确禁用）。这不是 bug，是策略变更。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 显式写成 { video: true, audio: false }，避免歧义
• 若后端或业务真不需要音频，务必加 audio: false，否则用户看到“是否允许麦克风”会困惑
• Firefox 和 Safari 表现不同：Firefox 严格按配置请求，Safari 在 iOS 上可能忽略 audio: false，需实测

移动端 iOS 拍照模糊、预览镜像、无法对焦怎么办

iOS Safari 对 getUserMedia 支持有限：不支持 focusMode、torch、zoom 等约束，且默认预览是镜像（mirror），但 video 元素本身没镜像 CSS 属性可开。

立即学习“前端免费学习笔记（深入）”；

• 用 transform: scaleX(-1) 手动镜像 video 元素（仅视觉，不影响实际 capture）
• 拍照用 canvas.captureStream().getVideoTracks()[0].getSettings() 查当前分辨率，iOS 常固定为 640×480，没法提
• 真要高清，得走原生 App 或 WKWebView + 自定义插件，纯 Web 无解

WebRTC 的摄像头控制能力在 iOS 上就是残缺的——不是配错了，是平台不给。