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></label> 包裹或显式 click() 触发，避免样式隐藏导致的兼容问题。
替代方案：用 MediaDevices.getUserMedia() 更可控
当 capture 行为不稳定（尤其需要实时预览、切换镜头、加滤镜等），应改用 JavaScript 媒体 API：
-
navigator.mediaDevices.getUserMedia({ video: true })可精确请求前后置（通过{ facingMode: "environment" }） - 支持错误处理：
NotAllowedError（权限拒绝）、NotFoundError（无可用设备） - 可绑定到
<video></video>实时预览，再用canvas.captureStream()或canvas.toBlob()截图
capture 属性本质是快捷入口，适合简单拍照上传场景；一旦涉及交互控制、多帧处理或 fallback 逻辑，就得切到 getUserMedia 路线。
真正容易被忽略的是：capture 不提供任何 JS 回调或状态通知——它只是告诉浏览器“请尽量用摄像头打开文件选择器”。你无法知道用户最终是拍了照、选了相册图，还是点了取消。需要这类反馈，就必须放弃 capture，自己接管媒体流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
