HTML中input标签的capture属性调用摄像头

capture属性仅在type="file"且accept指定image/或video/时生效，支持capture="user"/"environment"指定镜头，但兼容性差；真机需HTTPS、授权及可见input；复杂需求应改用getUserMedia()。

capture 属性只在特定 input type 下生效

capture 是 <input> 的布尔属性，但它不会在任意类型上触发摄像头。只有当 type="file" 且 accept 明确指定图像或视频 MIME 类型时，浏览器才可能启用原生捕获界面：

• ✅ 有效： <input type="file" accept="image/*" capture>
• ✅ 有效： <input type="file" accept="video/*" capture>
• ❌ 无效： <input type="file" accept="<em>/</em>" capture>（部分 Android 浏览器忽略）
• ❌ 无效： <input type="text" capture>（直接被忽略，无报错）

iOS Safari 要求 accept 必须是 image/<em></em> 或 video/，不能带参数如 image/jpeg；Android Chrome 则相对宽松，但 accept="image/png" 仍可能回退到文件选择器。

capture 值为 "user" 或 "environment" 才能指定镜头

capture 属性本身支持字符串值，不只是布尔用法：

• capture="user"：优先调用前置摄像头（自拍模式）
• capture="environment"：优先调用后置摄像头（扫码/拍摄场景）
• capture（无值）：由系统决定，默认行为因设备而异

注意：这个值不保证 100% 生效。例如 iOS Safari 在某些版本中会忽略 capture="environment"，始终打开前置；而部分国产安卓 WebView（如微信内置浏览器）完全不支持该值，仅响应布尔形式。

立即学习“前端免费学习笔记（深入）”；

真机调试时常见失败原因

capture 在桌面浏览器（包括 Chrome 模拟移动设备）中基本不工作——它依赖原生系统相机 API，必须在真实移动端环境测试：

• ❌ 在 Chrome DevTools 的 Device Mode 下点击 <input>，只会弹出文件选择器，不会启动摄像头
• ❌ 使用 http:// 协议访问页面（非 https:// 或 localhost），iOS 和新版 Android 会静默禁用摄像头权限
• ❌ 页面未获得用户授权（首次使用会弹 prompt，但若用户点“拒绝”，后续需手动进系统设置开启）
• ❌ input 被设为 display: none 或通过 opacity: 0 隐藏但未正确绑定 click 触发（部分 WebView 对不可见 input 的 capture 行为异常）

建议实操时用 <label> 包裹或显式 click() 触发，避免样式隐藏导致的兼容问题。

替代方案：用 MediaDevices.getUserMedia() 更可控

当 capture 行为不稳定（尤其需要实时预览、切换镜头、加滤镜等），应改用 JavaScript 媒体 API：

• navigator.mediaDevices.getUserMedia({ video: true }) 可精确请求前后置（通过 { facingMode: "environment" }）
• 支持错误处理：NotAllowedError（权限拒绝）、NotFoundError（无可用设备）
• 可绑定到 <video> 实时预览，再用 canvas.captureStream() 或 canvas.toBlob() 截图

capture 属性本质是快捷入口，适合简单拍照上传场景；一旦涉及交互控制、多帧处理或 fallback 逻辑，就得切到 getUserMedia 路线。

真正容易被忽略的是：capture 不提供任何 JS 回调或状态通知——它只是告诉浏览器“请尽量用摄像头打开文件选择器”。你无法知道用户最终是拍了照、选了相册图，还是点了取消。需要这类反馈，就必须放弃 capture，自己接管媒体流。