capture="user"和capture="environment"仅为HTML语义提示，非强制开关，实际效果取决于系统、浏览器版本及运行环境；iOS Safari 16.4+才开始有限支持，Android表现亦不稳定，且Chrome 96+已移除支持，当前可靠方案是navigator.mediaDevices.getUserMedia()。
capture="user" 和 capture="environment" 是语义提示，不是强制开关
这两个值只是告诉浏览器“优先用哪个摄像头”，但最终是否生效、调起哪颗镜头、甚至是否弹出相机界面，完全取决于设备系统、浏览器版本和运行环境。它们不改变 DOM 行为，也不触发任何 JS 逻辑，纯属 HTML 层面的建议。
常见错误是把 capture="user" 当成“一定能开前置”，结果在 iOS Safari 16.3 或 HTTP 页面里一点反应都没有——这不是代码错，是条件不满足。
-
capture="user"：提示使用面向用户的摄像头（通常是前置），iOS Safari 16.4+ 才真正识别该字符串；旧版 Safari 只认布尔形式capture（无值）或capture="" -
capture="environment"：提示使用环境-facing 摄像头（通常是后置），Android Chrome 多数支持，但 iOS Safari 直到 16.4+ 才开始有限支持；低于此版本会静默忽略 - 写成
capture="front"、capture="camera"或capture="true"都无效，浏览器直接忽略
为什么 capture="environment" 在 iOS 上基本没用
iOS Safari 对 capture="environment" 的支持极弱：16.4 之前完全不识别，16.4–17.2 期间行为不稳定（有时仍打开前置，有时 fallback 到相册），17.3+ 虽有改进但仍受限于 WebKit 策略——它不会绕过系统统一媒体选择器，更不会禁用相册入口。
这意味着即使你写了 <input type="file" accept="image/*" capture="environment">，在 iPhone 上点击后大概率还是弹出带“拍照”和“从相册选取”的混合面板，默认前置，并且无法跳过相册选项。
立即学习“前端免费学习笔记（深入）”；
- 必须 HTTPS，HTTP 下 Safari 直接禁用所有摄像头相关入口
- 不能动态插入 DOM（如 Vue mounted 中 append、React useEffect 中 create + append），Safari 只认初始渲染的
input - 不能包裹在
display: none或visibility: hidden容器里，否则 Safari 跳过该元素
Android 上 capture="user" vs "environment" 的实际表现差异很小
Android Chrome 对两个值都支持，但实际效果常被系统相机 App 覆盖：厂商 ROM 可能忽略 capture 值，统一打开默认镜头；部分机型甚至将 capture="environment" 解释为“允许切换镜头”，而非“强制后置”。
更关键的是，accept 的写法比 capture 值影响更大：
-
accept="image/*"✅：最稳妥，多数安卓机型能触发相机界面 -
accept="image/jpeg"❌：部分 Android 会降级为图库选择，尤其 Samsung Internet - 加
multiple属性 ❌：几乎所有安卓系统放弃调用摄像头，直进图库
capture 属性已实质废弃，别再当作可靠方案
Chrome 96+ 已彻底移除对 capture 的支持，Safari 也在逐步弱化其作用。当前（2026 年 8 月）真实可用的跨平台方案只剩 navigator.mediaDevices.getUserMedia()：它需要 HTTPS、用户手势触发、明确的权限请求，但能拿到实时流、控制分辨率/帧率、预览、截帧、上传——而 capture 连 preview 都做不到。
如果你的页面仍依赖 capture="user" 实现“一键自拍”，现在就得面对一个现实：它在微信 WebView、iOS PWA 非主屏场景、旧版安卓浏览器里大概率失效，且没有任何错误提示，只会静默 fallback 到相册。
