capture属性可快速唤起移动端摄像头拍照，仅适用于HTTPS下的移动设备，需配合accept="image/*"使用，支持capture="user"（前置）和capture="environment"（后置），但存在兼容性差异。
在移动端网页中，使用 input 标签的 capture 属性可快速唤起设备摄像头拍照，无需额外权限申请或复杂 API 调用，但需注意兼容性与使用限制。
capture 属性的基本用法
capture 是 <input type="file"> 的布尔属性，仅对 accept 值为图像（如 "image/*"）或视频（"video/*"）时生效。它提示浏览器优先调用原生摄像头/麦克风，而非文件选择器。
最简示例：
<input type="file" accept="image/*" capture>指定摄像头方向（前置/后置）
单纯写 capture 无法控制使用前置还是后置摄像头。可通过 capture 的值显式指定：
立即学习“前端免费学习笔记（深入）”；
-
capture="user"：强制调用前置摄像头（自拍模式） -
capture="environment"：强制调用后置摄像头（环境模式）
例如：
<input type="file" accept="image/*" capture="environment">注意：部分 Android 浏览器（如旧版 Chrome）可能忽略 environment，仍默认打开前置；iOS Safari 支持较好。
配合 JavaScript 获取拍摄结果
用户拍照后，文件会以 FileList 形式存在 input.files 中。可通过监听 change 事件读取：
<img id="preview" alt="预览">
<script>
document.getElementById('cameraInput').addEventListener('change', function(e) {
if (e.target.files.length > 0) {
const file = e.target.files[0];
const url = URL.createObjectURL(file);
document.getElementById('preview').src = url;
}
});
</script>
注意事项与兼容性提醒
- 仅适用于移动设备（iOS Safari、Android Chrome 等），桌面端浏览器通常忽略
capture - 必须通过 HTTPS 部署（HTTP 下 iOS Safari 会禁用摄像头，部分 Android 浏览器也会拒绝）
- 不能直接访问摄像头流（如
getUserMedia那样实时预览），仅支持“拍照→选中文件”单次操作 - 若同时设置
multiple，可能绕过摄像头直接进入图库选择，建议避免混用
