结论:input type="file" 配合 accept="image/*" 与 capture="user"/"environment" 是最轻量兼容的纯 html 调起摄像头方式;capture="camera" 非标准且已失效,ios 会禁用相册、android 行为不一,需 ua 检测动态设置;漏写 accept 则 capture 无效;上传后需处理 exif 方向。

直接说结论:用 input type="file" 配合 accept 和 capture 是目前最轻量、兼容性最好的纯 HTML 调起手机摄像头的方式,但不能“强制”只开相机——iOS 会弹选项,Android 多数直启,且 capture 在桌面端基本无效。
为什么 capture="camera" 不总生效?
这个值其实不是标准值(HTML 规范里没定义 capture="camera"),属于早期 Android 厂商的私有扩展。现在主流浏览器已转向更规范的取值:
-
capture="user"或capture="environment"才是 W3C 推荐写法,搭配accept="image/*"明确语义 -
capture="camera"在部分旧版安卓(如 Android 4.x)可能有效,但在 iOS Safari 和新版 Chrome 中会被忽略或降级为默认行为 - 如果只写
capture(无值),浏览器按自身策略决定设备,通常倾向后置摄像头
iOS 和 Android 行为差异必须处理
iOS Safari 对 capture 更敏感:加了就禁用相册入口,用户无法退选;而老版安卓不加 capture 就打不开相机,只能进图库。
- 不要硬写死
capture="user"然后全端部署 - 推荐运行时检测:用
navigator.userAgent判断是否 iOS,动态移除或设置capture - 示例逻辑:
const input = document.querySelector('input[type="file"]');<br>if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {<br> input.removeAttribute('capture');<br>} else {<br> input.setAttribute('capture', 'environment');<br>} - 注意:微信内置浏览器(WKWebView)在 iOS 上行为和 Safari 一致,也要走同样逻辑
accept 属性不是可选项,而是前提条件
capture 单独存在几乎没用——它只是“建议”,浏览器只在 accept 明确限定媒体类型时才考虑启用对应硬件。
-
accept="image/*"→ 才可能触发摄像头(配合capture="user"或capture="environment") -
accept="video/*"→ 触发录像界面,capture值仍影响前后置选择 -
accept="audio/*"→ 触发录音,此时capture="microphone"有效,user/environment被忽略 - 漏写
accept,iOS 下capture直接失效,Android 可能回退到普通文件选择
上传前预览与方向修正容易被忽略
拿到 File 对象后直接 URL.createObjectURL() 显示,大概率出现旋转错位(尤其 iOS 拍照后 EXIF Orientation 未处理)。
- 不要依赖
<img>自动旋转:多数浏览器不解析 EXIF - 简单方案:用
exifr库读取 Orientation,再用 canvas 绘制修正后的图像 - 更轻量做法:CSS 强制
transform: rotate(90deg)+transform-origin临时适配,但仅适用于已知固定朝向场景 - 后端接收时也需检查
Content-Type,因为用户仍可通过调试工具绕过accept上传非图片文件










