不能完全保证。capture="user"仅是提示浏览器优先调用前置摄像头，实际行为受ios safari兼容性差、android机型差异、https缺失、权限未授权及webview限制等影响，常降级为相册选择或后置摄像头；可靠方案应使用getusermedia({video:{facingmode:"user"}})。
capture="user" 在移动端是否真能默认调用前置摄像头？
不能完全保证。虽然 capture="user" 是 HTML 标准中声明“优先使用用户-facing 摄像头”的方式，但实际行为由浏览器和操作系统共同决定，尤其在 iOS Safari 上几乎无效——它会忽略该属性，始终弹出摄像头选择界面或默认后置。
常见错误现象：<input type="file" accept="image/*" capture="user"> 在 iPhone 上点击后仍调起后置摄像头，或直接跳转到相册/文件选择器，而非前置预览。
- iOS 16.4+ 的 Safari 开始部分支持
capture="user"，但仅限于某些机型（如 iPhone 12 及更新）且需配合accept="image/*;capture=user"写法（注意分号） - Android Chrome 一般能识别，但若系统级相机权限未授、或 WebView 环境（如微信内置浏览器）可能完全忽略该属性
- 不写
accept或写成accept="image/jpeg"会导致capture失效
替代方案：用 MediaDevices.getUserMedia 强制指定 facingMode
真正可控的方式是绕过 <input>，改用 JavaScript 主动请求媒体流，并显式设置 facingMode: "user"。这是目前最可靠、跨平台兼容性最好的做法。
关键点在于：必须在用户手势（如 click/tap）触发的上下文中调用，否则会被浏览器拒绝；且需处理 NotReadableError（摄像头被占用）和 NotFoundError（无前置设备）等异常。
- 不要只传
{ video: true }，必须写成{ video: { facingMode: "user" } } - Android 部分旧机型（如三星 S8）可能把
"user"解析为"environment"，可 fallback 到{ video: { facingMode: { ideal: "user" } } } - iOS Safari 要求 HTTPS 环境，HTTP 页面下
getUserMedia直接抛NotAllowedError
button.addEventListener('click', async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "user" }
});
videoElement.srcObject = stream;
} catch (err) {
console.error(err.name); // 如 "NotFoundError", "NotReadableError"
}
});
为什么 capture 属性在移动端如此不可靠？
根本原因在于：HTML 的 capture 是一个提示性（hint）属性，不是强制指令。浏览器厂商实现时有极大自由度，尤其在移动系统上，相机硬件抽象层（HAL）、系统权限模型、WebView 封装逻辑都会干预最终行为。
典型场景差异：
- 微信内置浏览器（X5 内核）：无视
capture，一律走相册选择 - QQ 浏览器 Android 版：支持
capture="user"，但仅限于accept="image/*"且页面无 iframe 嵌套 - PWA 安装后（iOS）：即使加了 manifest，Safari 仍不提升
capture权限级别
生产环境建议的最小可行组合
别只押注单一方案。上线前必须同时满足三件事才能让前置摄像头大概率唤起：
- HTML 层保留
<input type="file" accept="image/*;capture=user" capture="user">（双保险写法，适配老版本 Android） - JS 层监听 input change，若未触发或返回空文件，则自动 fallback 到
getUserMedia流式采集 - 对 iOS 用户显示明确引导文案：“请在弹出窗口中选择‘前置摄像头’”，因为系统级选择器无法绕过
最容易被忽略的是：很多团队测试只用 Chrome 模拟器，却没在真机（特别是 iPhone）上验证相机权限弹窗是否出现、以及弹窗选项顺序——有些系统会把“前置”放在第二页，用户根本看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
