capture属性仅对type="file"有效，需配合accept使用，本质是提示移动端优先调起摄像头或麦克风，但非强制指令，实际效果受accept值、系统版本及浏览器实现影响。
capture 属性只对 type="file" 有效，且必须配合 accept
直接给 type="text" 或 type="button" 加 capture 完全没用。它本质是 <input type="file"> 的扩展属性，作用是「提示移动端系统优先调起摄像头或麦克风」。但这个提示是否生效，取决于：accept 值是否匹配、系统版本、浏览器实现（比如 iOS Safari 对 capture="user" 支持更严格）。
常见错误现象：
– 页面点击无反应，或仍弹出文件选择器而非摄像头
– Android Chrome 调起相册而非相机
– iOS Safari 忽略 capture，始终走相册
-
accept="image/*"+capture是最通用的组合，兼容性最好 -
accept="video/*"+capture可尝试调起录像，但部分 Android 厂商定制系统会降级为拍照 -
accept="audio/*"+capture在部分 Chrome for Android 上可调起录音，iOS Safari 不支持 - 不要写
capture="camera"—— 这是无效值；合法值只有"user"（前置）或"environment"（后置），但实际支持度极低，建议省略
为什么加了 capture 还是打开相册？
核心原因是：浏览器把 capture 当作可选提示，不是强制指令。尤其当 accept 值太宽泛（如 accept="*"）或缺失时，系统默认回退到通用文件选择器。
- 必须显式写
accept="image/*"，不能省略或写成accept="" - 避免同时设置
multiple—— 多数系统在multiple存在时会禁用capture - 某些 Android WebView（如微信内置浏览器）完全忽略
capture，只能靠 JS 检测 UA 后引导用户手动切换 - iOS 16.4+ 开始支持
capture="environment"，但需 HTTPS 环境，HTTP 下静默失效
实操推荐写法与 fallback 处理
最稳妥的写法是聚焦「单张图片拍摄」场景，不依赖厂商扩展值：
<input type="file" accept="image/*" capture>
但仅靠 HTML 不够。需要 JS 配合检测和降级：
- 监听
change事件，用event.target.files[0]获取 Blob，立刻用URL.createObjectURL()预览 - 若用户选的是本地相册图片，也应正常处理 —— 不要假设一定来自摄像头
- 可加 CSS 样式隐藏原生 input，用按钮触发
.click()，提升点击体验 - 对 iOS 旧版本或微信环境，可在点击后弹提示：“请在弹出菜单中选择‘拍摄照片’”
安全限制与常见报错
所有调用摄像头的操作都受浏览器安全策略约束。非 HTTPS 页面在 Chrome、Safari 中会直接禁用 capture，控制台可能不报错，但行为静默失效。
- 错误信息
NotAllowedError: Permission denied通常意味着页面未通过用户手势（如 click）触发，或用户此前拒绝过媒体权限 - 没有单独的「摄像头权限请求」弹窗 ——
capture不触发getUserMedia，它只是文件输入流程的快捷入口 - 如果后续需要对图像做实时处理（如扫码、滤镜），必须另起
getUserMedia流，capture无法提供实时视频流
真正麻烦的不是怎么写，而是不同机型对同一段 HTML 的响应差异太大。建议把 capture 当作优化项，而不是功能前提；关键路径永远以「能选图」为底线，再叠加「尽量唤起摄像头」的体验增强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
