capture属性是HTML5中提示浏览器优先调用原生摄像头或麦克风的布尔属性，仅在且accept="image/*"、video/*或audio/*时生效；它非强制指令，实际行为受HTTPS、用户手势触发、iOS PWA限制及浏览器兼容性制约，常fallback至文件选择器。
在 HTML5 中，capture 属性用于告诉浏览器在 `` 元素中优先调用设备的原生摄像头或麦克风，特别适用于移动端快速拍照或录像。它本身不直接“打开摄像头”，而是作为提示（hint）配合 accept 使用，由浏览器和系统决定是否生效及如何响应。
基本用法：指定媒体类型 + capture
要触发摄像头，必须同时设置 accept 和 capture，否则 capture 会被忽略：
-
拍照：
accept="image/*" capture -
录像：
accept="video/*" capture -
录音：
accept="audio/*" capture（调用麦克风）
示例：
capture 的可选值：front 还是 back 摄像头？
capture 属性可以是布尔值（如 capture），也可以是字符串值，用于建议使用哪颗摄像头：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
capture（无值）：由系统默认决定（多数 Android 默认后置，iOS 默认前置） -
capture="user"：建议使用前置摄像头（自拍镜头） -
capture="environment"：建议使用后置摄像头（主摄）
⚠️ 注意：这不是强制指令，实际行为取决于浏览器支持与系统策略。例如 Safari 在 iOS 上对 environment 支持有限，可能仍打开前置；Chrome for Android 通常能较好响应。
兼容性与注意事项
该特性在主流移动浏览器中支持良好（Chrome、Safari、Edge on iOS/Android），但存在几个关键限制：
- 仅在 HTTPS 环境下可靠工作（HTTP 页面中 Safari 可能完全禁用摄像头）
- 必须是用户手势触发（如点击按钮），不能自动调起
- 不支持桌面端（即使有摄像头，浏览器通常忽略
capture） - 无法实时预览画面——
capture是一次性选择流程（拍完/录完才返回文件），如需预览需用MediaDevices.getUserMedia()配合<video></video>
进阶建议：增强体验的小技巧
为了让用户操作更明确、容错更强，可结合以下实践：
- 添加
id和隐藏样式，用自定义按钮触发：<button onclick="document.getElementById('cam').click()">拍照</button><input id="cam" type="file" accept="image/*" capture style="display:none"> - 监听
change事件获取拍摄后的文件：input.addEventListener('change', e => { const file = e.target.files[0]; }) - 上传前可用
FileReader预览图片，或用URL.createObjectURL(file)快速显示缩略图 - 对 iOS 用户，可提示“点击‘拍照’后，在弹出菜单中选择‘拍摄照片’”——因为 Safari 常把
capture渲染为相册/拍照双选项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
