capture 属性在移动端可调用摄像头，但仅限特定场景且高度依赖浏览器实现；现代 android chrome、safari（ios 16.4+）支持 capture="environment" 或 capture="user" 触发原生相机界面，而旧版 ios、微信内置浏览器等多数不支持。
capture 属性在移动端是否真能调用摄像头
能，但仅限特定场景且高度依赖浏览器实现。现代 Android Chrome、Safari（iOS 16.4+）支持 capture="environment" 或 capture="user" 触发原生相机界面，但不是所有 WebView、PWA 或低版本 iOS 都生效。它本质是给 <input type="file"> 的提示，而非强制指令。
为什么加了 capture 却还是弹相册或文件选择器
常见原因有这几个：
- iOS Safari 早于 16.4 不支持
capture，只认accept="image/*"，此时必须配合webkit-playsinline等 hack 才可能唤起相机（实际成功率极低） - 使用了不兼容的
accept值，比如accept="image/jpeg"会禁用相机入口；应改用accept="image/*" - 页面未运行在 HTTPS 下（iOS 强制要求，Android Chrome 某些版本也拒绝非安全上下文调用摄像头）
- 包裹
<input>的标签用了display: none或visibility: hidden—— Safari 会直接忽略该 input 的 capture 行为
正确写法与最小可用示例
以下代码在 iOS 16.4+ 和 Android Chrome 110+ 上可稳定唤起后置摄像头：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<input type="file" accept="image/*" capture="environment" onchange="handlePhoto(this.files[0])">
关键点：
-
capture="environment"：优先调用后置摄像头；capture="user"尝试前置（但部分 Android 厂商固件会忽略该值） - 不能同时设
multiple—— 多数系统会退回到文件选择器 - 不要用 JS 动态设置
capture属性，必须初始 HTML 中声明 - 建议加
style="position: absolute; left: -9999px;"隐藏而非display: none
替代方案：当 capture 不工作时怎么办
如果目标用户覆盖较广（尤其含旧版 iOS），别强依赖 capture。更稳妥的方式是：
- 用
MediaDevices.getUserMedia()手动拉起视频流，再通过<canvas></canvas>截图 —— 完全可控，但需额外处理权限、横竖屏、对焦等细节 - 检测用户代理 +
navigator.userAgent.includes("iPhone") && /OS [1-9][0-5]_/.test(navigator.userAgent)，对老 iOS 直接提示“请手动打开相机App拍照后上传” - 避免在微信内置浏览器尝试
capture—— 微信 iOS 版长期禁用该行为，连getUserMedia也受限
真正难的不是写对那一行 capture="environment"，而是判断当前环境到底支不支持、用户正在用什么壳、以及 fallback 路径有没有真正测试过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
