capture属性仅对type="file"有效,需同时满足https、静态dom、非隐藏、accept="image/*"且无multiple等条件才能触发原生捕获;非标值被忽略,ios safari 16.4+才支持capture="environment";微信中完全失效,高可靠性场景应改用mediadevices.getusermedia()。

capture 属性只对 type="file" 有效
给 type="text" 或 type="button" 加 capture 完全没用,浏览器会静默忽略。它不是通用功能开关,而是 <input type="file"> 的提示性扩展。必须同时满足三个条件才可能触发原生捕获界面:type="file"、accept 明确指定媒体类型(如 accept="image/*")、capture 属性存在(带值或不带值均可)。
常见错误写法:<input type="file" capture>(漏 accept),或 <input type="file" accept="image/jpeg" capture>(iOS 和部分 Android 会直接退化为图库选择)。
capture="user" 和 capture="environment" 是唯二标准值
W3C 规范只定义了这两个合法字符串值,其他如 "camera"、"microphone" 都是非标写法,主流浏览器已废弃或忽略。它们的语义明确:
-
capture="user":提示优先调用前置摄像头或面向用户的麦克风(自拍/语音输入场景) -
capture="environment":提示优先调用后置摄像头(扫码、远距拍摄)
不写值(即 capture)或写其他字符串,行为由浏览器自行决定;iOS Safari 通常等价于 capture="user"。注意:capture="environment" 在 iOS Safari 16.4+ 才真正支持,旧版本会直接忽略该属性。
为什么点了还是弹图库,而不是相机?
这不是 bug,是浏览器的降级策略——只要条件不满足,就会静默 fallback 到文件选择器,控制台也不会报错。关键硬性条件包括:
一款AI工具,主要用于使用 CodexBar CLI 本地成本使用情况,按模型汇总 Codex 或 Claude 的使用量,包括当前(最新)模型或完整的模型分解,适合需要提升相关任务效率的用户。
- 必须 HTTPS:HTTP 页面下 iOS Safari 直接禁用摄像头入口,连相册都可能不弹
- 必须静态 DOM:不能用
innerHTML、appendChild或 Vue/React 的mounted动态插入,否则 Safari 无视capture - 不能隐藏:
display: none或visibility: hidden会让 Safari 跳过该元素 -
accept必须是通配符形式:accept="image/*"✅;accept="image/jpeg"❌(部分 Android 会禁用相机入口) - 绝对不要加
multiple:<input type="file" accept="image/*" capture="environment" multiple>会导致几乎所有 Android 系统放弃调用摄像头,直进图库
微信内置浏览器中 capture 完全失效,需运行时检测 navigator.userAgent.includes("MicroMessenger") 并移除该属性,改用文字引导。
真要可控拍摄,得切到 MediaDevices.getUserMedia()
capture 属性无法绕过系统相册选项,也无法实现自动拍照、实时预览、镜头切换或滤镜叠加。一旦业务对可靠性有要求,就必须放弃它,改用 JavaScript 媒体 API:
例如:navigator.mediaDevices.getUserMedia({ video: true, facingMode: "user" }) 可精确请求前置镜头,但需自行处理:
- 权限拒绝后的降级提示
- 设备枚举失败时的
facingModefallback 切换 - iOS 上
video.play()必须由用户手势触发的限制 - EXIF 方向丢失问题(需用
exif-js或jpeg-js解析)
最常被忽略的一点:所有这些逻辑,必须在真实移动端环境测试。Chrome DevTools 的 Device Mode 不会触发真实摄像头流,模拟器无效,HTTP 协议下也基本白搭。










