华为和小米浏览器对capture属性根本性忽略，不解析该属性，点击后直接弹出图库选择器且无报错；需ua检测后强制降级为文件选择并引导用户手动拍照上传。
华为浏览器和小米浏览器对 capture 的实际支持情况
华为浏览器（基于自研内核或旧版 Chromium）和小米浏览器（多数为定制 WebView 或 X5 内核）对 capture 属性的支持极不稳定，不是“偶尔失效”，而是根本性忽略——它们不解析该属性，也不触发任何降级提示，行为等同于没写 capture。
典型表现：<input type="file" accept="image/*" capture="environment"> 在华为 Mate 60 系列（HarmonyOS 4.2 + 华为浏览器 15.x）和小米 14（MIUI 15 + 小米浏览器 17.x）上点击后直接弹出图库选择器，无相机入口、无控制台报错、无权限请求弹窗。
- 华为浏览器：完全不识别
capture="user"或capture="environment"，仅当accept="image/*"存在时走系统默认文件选择流程 - 小米浏览器：部分版本（如 16.8.10）会响应布尔形式的
capture（即capture无值），但capture="environment"被静默丢弃；新版已趋向彻底忽略 - 两者均不支持
accept="video/*" capture触发录像界面，iOS 上本就依赖 Safari 16.4+，而华为/小米连基础拍照都不保障
capture 在华为/小米设备上静默失效的底层原因
不是代码写错，是渲染层压根没走媒体采集路径。华为和小米的浏览器内核未将 capture 映射到 Android Intent.ACTION_IMAGE_CAPTURE 或 MediaStore.EXTRA_OUTPUT 调用链，而是直接 fallback 到 Intent.ACTION_GET_CONTENT（纯文件选择）。
这意味着：即使你加了 HTTPS、用户手势触发、DOM 静态插入、元素可见，只要 UA 是 HuaweiBrowser 或 MiuiBrowser，capture 就不会进入原生相机调度逻辑。
- 华为浏览器 UA 特征：
navigator.userAgent.includes("HuaweiBrowser") - 小米浏览器 UA 特征：
navigator.userAgent.includes("MiuiBrowser")或navigator.userAgent.includes("XiaoMi") - 二者均不响应
getUserMedia()的facingMode: "environment"，说明底层摄像头抽象层缺失或权限沙箱拦截
如何检测并安全降级
不能靠 if ("capture" in document.createElement("input")) 判断——这个检查在华为/小米浏览器里返回 true，但实际无效。必须运行时 UA 检测 + 行为试探。
推荐做法：首次点击按钮时，先尝试触发 input.click()，若 800ms 内未触发 change 事件且无 files.length 变化，则判定为 capture 失效，立即显示引导文案。
- UA 检测优先级高于特性检测：
if (navigator.userAgent.includes("HuaweiBrowser") || navigator.userAgent.includes("MiuiBrowser"))→ 直接移除capture属性，隐藏原 input，展示文字按钮：“请打开相机 App 拍照后上传” - 避免用
display: none隐藏 input：华为浏览器对 hidden input 的 click() 调用常静默失败；改用position: absolute; left: -9999px; - 不要在 Vue/React mounted 或 useEffect 中动态创建 input：华为浏览器只认初始 HTML 解析阶段的
capture，动态 append 的一律无视
为什么不用 getUserMedia 替代
在华为/小米设备上，getUserMedia 同样不可靠——不是 API 不存在，而是调用后常返回 NotAllowedError（即使用户点了允许）或黑屏（videoElement.readyState === 0），尤其在 MIUI 15 和 HarmonyOS 4.3 的 WebView 中。
真正能跑通的最小可行路径是：先 UA 识别 → 对华为/小米强制降级为文件选择 + 引导文案 → 其他设备再尝试 getUserMedia + canvas.toBlob()。
容易被忽略的一点：华为/小米设备的「允许网站使用摄像头」权限开关藏得深，不在浏览器设置首页，而在「设置 → 应用管理 → 浏览器 → 权限管理 → 相机」，且部分机型需手动开启「后台运行权限」才能维持 video 流持续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
