capture属性仅是提示浏览器优先启用原生摄像头的布尔属性，需配合type="file"和accept="image/*"等媒体类型才可能生效，实际调用受HTTPS、用户授权、浏览器兼容性等多重限制。
capture 属性本身不直接调用摄像头
capture 不是独立 API，它只是 <input type="file"> 的一个布尔属性，作用是**提示浏览器优先启用原生捕获设备**（如摄像头或麦克风），而非从图库选择。它不触发权限请求，也不保证一定能打开摄像头——最终行为由浏览器、OS 和用户设置共同决定。
常见错误现象：capture 加了但点击后仍弹出相册；或者在桌面 Chrome 上完全无效（桌面端通常忽略该属性）。
- 只对
type="file"有效，且需配合accept明确媒体类型，例如accept="image/*"或accept="video/*" - Android Chrome 通常响应良好；iOS Safari 支持但要求 HTTPS（HTTP 下静默失效）
- 不能替代
MediaDevices.getUserMedia()，后者才是真正的“主动调用摄像头”方案
正确写法：input + capture + accept 缺一不可
单独写 <input type="file" capture> 几乎无效，必须指定 accept 告诉浏览器你要什么类型的数据。
<input type="file" accept="image/*" capture="environment">
capture="environment" 是可选值，表示优先使用后置摄像头；capture="user" 表示前置。不写值（即 capture）时由系统自动选择，但兼容性略好。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
accept="image/*"→ 触发拍照界面（非图库） -
accept="video/*"→ 触发录像界面 -
accept="audio/*"+capture→ 可能唤起录音，但支持度差，不推荐 - 不要混用
multiple—— 多数手机会禁用capture逻辑
为什么有时 capture 不生效？常见坑点
不是代码写错了，而是环境或配置卡住了。最常被忽略的几个条件：
- 页面未部署在 HTTPS 下（iOS Safari 强制要求，HTTP 下
capture被静默忽略） - 用户之前拒绝过摄像头权限，且浏览器缓存了该拒绝状态（此时即使重载页面也不会再弹提示）
- WebView 场景（如 Cordova、微信内置浏览器）中，
capture基本不工作，需用原生桥接或getUserMedia配合canvas截帧 - Chrome for Android 某些版本对
capture="user"支持不稳定，建议先用无值的capture做兜底
需要真正控制摄像头？用 getUserMedia 替代
如果需求是实时预览、自定义按钮、连续扫码、美颜或滤镜，capture 完全不够用。必须走标准媒体流 API：
navigator.mediaDevices.getUserMedia({ video: true })<br> .then(stream => {<br> const video = document.getElementById('video');<br> video.srcObject = stream;<br> })<br> .catch(err => console.error('摄像头访问失败:', err));
注意：getUserMedia 必须在用户手势（如 click）后调用，否则会被浏览器拦截；且同样依赖 HTTPS 和用户授权。
复杂点在于：不同机型对分辨率、帧率、前后置切换的支持差异极大，constraints 里硬设 width/height 很容易 fallback 到默认值甚至报错。真要稳定，得做设备能力探测 + 降级策略。
