capture="camera" 无效，ios 16.4+ 已移除支持；正确写法是 ，仅 capture（无值）加 accept 才可能触发相机；multiple 会禁用相机调用；稳定方案是使用 mediadevices.getusermedia()。

capture 属性在移动端调用相机失败的常见原因

直接写 capture="camera" 在多数现代浏览器（尤其是 iOS Safari）上根本不会触发拍照，而是弹出文件选择器甚至直接忽略该属性。这不是你代码写错了，是规范和实现早已变化。

• iOS 16.4+ 彻底移除了对 capture="camera" 的支持，仅保留 capture（无值）作为提示，实际行为由 UA 自行决定
• Android Chrome 虽仍响应 capture="user" 或 capture="environment"，但必须配合 accept="image/*"，缺一不可
• capture 是非标准遗留属性，W3C 已标记为“deprecated”，MDN 明确建议用 capture + accept 组合替代硬编码值

正确写法：只用 capture（无值） + accept 控制媒体类型

真正起作用的是 accept 类型约束，capture 仅作为辅助提示。浏览器根据 accept 值判断是否唤起相机，而不是看 capture 后面跟了什么字符串。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

<input type="file" accept="image/*" capture>

• 想优先调用前置摄像头？用 capture="user" —— 但注意：这在 iOS 上无效，在部分 Android 上可能 fallback 到相册
• 想强制后置？capture="environment" 同样不保证生效，Chrome for Android 支持，Safari 忽略
• 不要写 capture="camera"，这个值从未被任何主流浏览器正式支持过，纯属历史误传

为什么加 multiple 会让 capture 失效

一旦给 input 加上 multiple，几乎所有移动端浏览器都会禁用原生相机调用，直接跳转到图库多选界面。这是有意为之的安全与体验限制。

• <input type="file" accept="image/*" capture multiple> → 永远不会打开相机
• 若需单张拍照 + 后续可选多图，得拆成两个独立 input：一个带 capture（无 multiple），一个不带 capture 但带 multiple
• Web App 中想模拟“连拍”？不能靠 HTML 属性，得用 MediaDevices.getUserMedia() + canvas 手动捕获帧

真要稳定调用相机？绕过 input，用 MediaDevices

当 capture 行为不可控时，唯一可靠路径是放弃 input[type=file]，改用 WebRTC API 主动请求摄像头权限并控制画面。

• 调用 navigator.mediaDevices.getUserMedia({ video: true }) 可明确获得视频流，兼容 iOS 11+ 和所有 Android 主流浏览器
• 配合 <video></video> + <canvas></canvas> 实现截图，比依赖 input 更可控、无平台差异
• 注意权限拒绝后的降级处理：若用户拒掉摄像头，getUserMedia 会抛出 NotAllowedError，不能假设它总能成功

capture 属性现在只是个弱提示，不是开关。真正在意拍照体验的项目，迟早得切到 MediaDevices —— 不是因为它更高级，而是因为 input 的 capture 已经没得选了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！