capture属性仅对有效，需配合accept和正确mime类型使用；ios safari 16.4+仅支持image/和video/且强制弹出选择器；android chrome稳定支持但其他浏览器兼容性差；https环境、accept匹配、元素可见性及权限状态是关键排查点；稳定方案应使用getusermedia() api。
capture 属性只在 <input type="file"> 中有效
它不是全局属性，也不能用在 <input type="text"> 或其他表单控件上。想调起摄像头或麦克风，必须搭配 accept 和正确的 MIME 类型 —— 否则即使写了 capture，浏览器也大概率忽略它。
-
accept="image/*"+capture="environment"：优先调后置摄像头（但实际行为取决于系统，iOS Safari 仍可能弹出选择器） -
accept="video/*"+capture：触发视频录制，capture="user"建议前置，但兼容性差，多数安卓浏览器不识别值，只认存在与否 -
accept="audio/*"+capture：唤起录音界面，注意 Android Chrome 117+ 才稳定支持，旧版本可能静默失败
移动端浏览器对 capture 的支持差异极大
iOS Safari 从 16.4 开始支持 capture，但仅限 image/* 和 video/*，且强制弹出系统相册/相机选择页 —— 它不会跳过选择直接打开摄像头。Android 方面，Chrome 稳定支持，但 Samsung Internet 和 Firefox for Android 基本忽略该属性。
- 测试时别只看 Chrome，务必在真机上用 Safari、Samsung Browser 验证
-
capture="user"和capture="environment"在 iOS 上无效，写上去也没用；Android Chrome 会尝试响应，但不保证成功 - 若用户点击后没反应，先检查是否在 HTTPS 环境下运行（HTTP 下 iOS/Safari 直接禁用媒体设备访问）
替代方案：用 MediaDevices.getUserMedia() 更可控
如果需要绕过文件选择器、直接流式采集音视频，capture 不是可靠路径。真正能精准控制设备的是 JavaScript API：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
- 可指定
deviceId、facingMode（"user"/"environment"），比 HTML 属性精细得多 - 需用户主动授权，首次调用会触发权限弹窗；后续可复用 stream，避免重复请求
- 注意错误处理：
NotAllowedError（用户拒权）、NotFoundError（无可用设备）、NotReadableError（设备被占用） - 配合
<video autoplay muted></video>显示预览，再用canvas.captureStream()或MediaRecorder录制
常见失败现象和排查点
写了 capture 却没反应？大概率卡在这几个地方：
- 页面未部署在 HTTPS（本地
localhost除外），Safari 和 Chrome 都会拒绝激活媒体设备 -
accept值不匹配：比如写accept="image/png"但没加通配符，iOS 会退回到文件选择器 - 标签被包裹在
<label></label>或display: none/visibility: hidden下，某些安卓 WebView 无法触发 - 用户已拒绝过摄像头权限，后续即使刷新页面也不会再提示 —— 得去系统设置里手动重开
真实项目里，capture 更适合作为“快捷入口”的降级补充，而不是主逻辑依赖。真要稳定调用硬件，得靠 getUserMedia + 权限状态管理 + fallback UI。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
