capture="environment" 不可靠，因属建议性属性，iOS Safari≤16.4、桌面浏览器及微信X5内核普遍忽略或失效；应改用 getUserMedia({video: {facingMode: "environment"}}) 并处理权限与设备回退。
capture="environment" 在 input type="file" 中是否可靠
不可靠。原生 input type="file" 的 capture="environment" 仅是提示，浏览器可忽略，且在多数桌面端、部分安卓 WebView 和旧版 iOS Safari 中完全无效。它不保证调用后置摄像头，甚至不保证打开摄像头——很多情况下仍弹出文件选择器。
为什么 capture="environment" 经常失效
根本原因在于规范层级太弱：capture 是 HTML 媒体捕获规范中的“建议性属性”，不是强制指令。浏览器实现差异极大：
- iOS Safari（≤16.4）：无视
capture，始终调起相册或前置摄像头（取决于系统设置） - Chrome Android：较新版本支持
capture="environment"，但需同时满足accept="image/*"且页面为 HTTPS - 桌面 Chrome/Firefox：直接跳过摄像头，只打开文件选择框
- 微信内置浏览器（X5 内核）：基本不支持
capture，返回空或报错NotAllowedError
真正可控的替代方案：MediaDevices.getUserMedia()
要用后置摄像头，必须绕过 input，改用 getUserMedia() 手动请求视频流，并显式指定 deviceId 或 facingMode: "environment"：
navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" },
audio: false
}).then(stream => {
const video = document.querySelector('video');
video.srcObject = stream;
}).catch(err => {
console.error("获取后置摄像头失败:", err.name); // 常见：NotAllowedError、NotFoundError
});
注意点：
-
facingMode: "environment"是首选，但某些设备（如部分 iPad）可能不识别该约束，需 fallback 到枚举设备并匹配 label 含 "back" 或 "rear" - 必须在用户手势（如 click）触发后调用，否则会被浏览器静默拒绝
- 首次调用会弹出权限请求，用户选“拒绝”后，后续调用会直接 reject，需检查
err.name === "NotAllowedError" - 不要依赖
stream.getVideoTracks()[0].getSettings().facingMode判断是否成功——它可能返回undefined或"user"即使你传了"environment"
想拍照并上传？别拼 input + capture
若目标是“点击拍照 → 获取图片 → 上传”，硬套 input capture="environment" 会导致体验断裂（比如拍完还要再选一次文件）。正确链路是：
- 用
getUserMedia()拉起后置预览 - 用
canvas.getContext('2d').drawImage(video, ...)截帧 - 用
canvas.toBlob()或toDataURL()转成二进制数据 - 构造
new File([blob], "photo.jpg", {type:"image/jpeg"})，再 append 到FormData提交
这个流程完全可控，且规避了所有 capture 的兼容性黑洞。唯一真实限制是：iOS Safari 要求用户手动开启“相机”权限，且不能自动切换前后置——如果 facingMode: "environment" 失败，只能提示用户去系统设置里检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
