在H5中使用capture="camera"可提示唤起原生相机，但非强制生效，需type="file"、accept指定图片类型，iOS支持较好，安卓受厂商和浏览器影响大，需配合JS监听、HTTPS、权限配置及降级方案。
在 H5 页面中使用 capture="camera" 可以在部分安卓和 iOS 设备上快速唤起原生相机，实现“点击即拍、拍完即传”的体验。但要注意：它只是提示浏览器优先调用摄像头，并非强制，实际行为受系统、浏览器、HTML 结构和权限策略共同影响。
基础写法与关键属性
最简可用的 input 标签如下：
<input type="file" accept="image/*" capture="camera" />
必须同时满足以下条件才更可能生效：
-
type 必须是
file，且accept明确指定为图片类型（如image/*、image/jpeg） -
capture 值推荐用
"camera"（字符串），不要写成capture或capture="user"（后者倾向前置摄像头） - 避免与其他 capture 值混用（如
capture="user" capture="environment"无效）
iOS 和安卓的实际表现差异
iOS（Safari）支持较好，点击后通常直接打开相机；安卓则因厂商定制和 WebView 差异较大：
- Chrome for Android 8.0+ 多数能触发相机，但部分国产浏览器（如 QQ 浏览器、UC）可能降级为文件选择器
- 微信内置浏览器（X5 内核）对
capture支持不稳定，常需配合weixinjsbridge或服务端直传方案 - 部分安卓设备会先弹出“选择来源”菜单（相机/相册），此时
capture仅作为默认选项提示，无法跳过
提升成功率的实用技巧
单纯依赖 capture 不够可靠，建议组合以下方式：
-
添加
id和 JS 监听，拍完立刻读取并上传：document.getElementById('cameraInput').addEventListener('change', e => {<br> const file = e.target.files[0];<br> if (file) uploadImage(file); // 自定义上传逻辑<br>}); -
禁用用户手动切换来源（有限效果）：某些场景可尝试加
webkit-playsinline等属性，但无标准方案；更稳妥的是前端检测 UA 后，对微信环境显示引导文案或调用 JSSDK - fallback 设计：即使唤起相册，也要确保图片能正常上传，不阻断流程
注意权限与安全限制
现代浏览器要求页面必须是 HTTPS 协议，否则 Safari 和新版 Chrome 会拒绝访问摄像头；同时，首次使用时会弹出系统级权限申请框，用户拒绝后需手动在系统设置中开启。
若页面嵌入在 WebView 中（如 App 内），还需确认宿主是否授予了 android.permission.CAMERA（安卓）或 NSCameraUsageDescription（iOS）权限。
