不能直接靠 capture 保证调起摄像头——它只是提示浏览器“优先使用摄像头”，但实际行为由浏览器、系统和用户权限共同决定，且现代 android/ios 已普遍弃用或弱化该属性。
capture 属性在 input type="file" 中是否还能调用摄像头？
不能直接靠 capture 保证调起摄像头——它只是提示浏览器“优先使用摄像头”，但实际行为由浏览器、系统和用户权限共同决定，且现代 Android/iOS 已普遍弃用或弱化该属性。
为什么 capture="environment" 有时没反应？
常见原因包括：
-
capture不是标准属性，W3C 已将其从 HTML 规范中移除（仅作为遗留兼容保留），Chrome 84+、Safari 16.4+ 等主流版本不再响应capture="environment"或capture="user" - 未启用 HTTPS：所有媒体设备访问（含摄像头）强制要求安全上下文，HTTP 页面下
getUserMedia会直接拒绝，capture更无从触发 - 用户未授予权限，或之前拒绝过，浏览器可能静默跳过调用（尤其 iOS Safari 默认不弹权限请求）
- 部分安卓厂商浏览器（如华为、小米自带浏览器）完全忽略
capture，只打开文件选择器
真正可靠的摄像头调用方式：用 getUserMedia() + input type="file" 替代方案
绕过 capture 的不可控性，改用显式媒体 API 控制摄像头：
- 用
navigator.mediaDevices.getUserMedia({ video: true })主动请求摄像头权限并获取流 - 将流绑定到
<video></video>实时预览，再用canvas.captureStream()或canvas.toBlob()截图/录屏 - 若仍需走表单提交，可把生成的 Blob 转为
File对象，再赋给隐藏的<input type="file">（注意：必须通过用户手势触发，否则会被浏览器拦截） - 示例关键代码：
const stream = await navigator.mediaDevices.getUserMedia({ video: true });<br>videoEl.srcObject = stream;<br>// 用户点击拍照后<br>canvas.getContext('2d').drawImage(videoEl, 0, 0);<br>canvas.toBlob(blob => {<br> const file = new File([blob], 'photo.jpg', { type: 'image/jpeg' });<br> Object.defineProperty(fileInput, 'files', {<br> value: new DataTransfer().files<br> });<br> const dt = new DataTransfer();<br> dt.items.add(file);<br> fileInput.files = dt.files;<br>});
如果坚持用 input type="file"，哪些写法还有微弱机会？
仅适用于低版本或特定环境，不建议依赖：
-
<input type="file" accept="image/*" capture="environment">：Android Chrome 70–83 可能触发后置摄像头；iOS Safari 14.5–15.4 曾支持，但 16.4+ 彻底失效 -
accept="video/*"+capture：某些安卓机可能唤起录像界面，但无法指定前后置，也无法控制分辨率或自动对焦 - 不要混用
multiple和capture：多数浏览器会直接忽略capture，只打开多选文件界面
真正在意摄像头体验的项目，别卡在 capture 上——它早已不是解决方案，而是兼容性包袱。真正的控制权在 getUserMedia 手里，哪怕多写十几行 JS，也比赌浏览器实现靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
