使用 capture="camcorder" 可在部分安卓浏览器中直接唤起摄像机录像，但 iOS 支持弱且不稳定；需配合 type="file"、accept="video/*" 使用，并统一通过 input.files 获取文件上传。
在 H5 页面中，使用 capture="camcorder" 可以在部分安卓和 iOS 设备上直接唤起系统摄像机进行录像，但实际效果受浏览器、系统版本和权限限制较大，不能保证全平台兼容。关键在于正确组合 <input> 的属性，并处理好后续的文件上传逻辑。
基础写法：正确声明录像输入控件
必须同时满足以下条件才能提高唤起成功率：
- 使用
type="file"，且accept明确指定视频 MIME 类型，如"video/*"或更具体的"video/mp4" - 添加
capture="camcorder"（注意不是capture="camera"，后者只打开拍照） - 建议加上
webkit-playsinline和controls等属性便于后续预览（非必需，但实用）
示例代码：
<input type="file" accept="video/*" capture="camcorder" id="videoInput">iOS 和安卓的实际表现差异
苹果设备（iOS Safari）对 capture="camcorder" 支持较弱，多数情况下会忽略该属性，仅弹出相册/文件选择器；而较新版本的 Chrome（Android）、Samsung Internet 等浏览器支持较好，点击后可直接进入录像界面。
- iOS 16.4+ 在某些场景下开始有限支持，但仍不稳定，建议降级为引导用户手动选择“录制视频”选项
- 部分国产厂商浏览器（如华为、小米自带浏览器）可能屏蔽或自定义行为，需实测
- 微信内置浏览器（X5 内核）基本不支持
capture，会回退到本地文件选择
获取并上传视频文件的通用流程
无论是否成功唤起摄像头，都应统一通过 input.files 获取用户选中的视频文件，再用 FormData 提交：
- 监听
change事件，检查e.target.files[0]是否存在且类型为video/xxx - 可选：用
URL.createObjectURL()创建临时 URL 预览视频（注意用完后调用URL.revokeObjectURL()释放内存） - 构造
FormData，append 视频文件，通过fetch或Axios发送到后端接口
简单上传示例：
const input = document.getElementById('videoInput');input.addEventListener('change', async e => {
const file = e.target.files[0];
if (!file || !file.type.startsWith('video/')) return;
const formData = new FormData();
formData.append('video', file);
await fetch('/upload', { method: 'POST', body: formData });
});
增强体验的补充建议
因原生 capture 兼容性有限，可考虑以下优化：
- 在按钮旁加文字提示：“点击拍摄视频”或“从相册选择视频”，降低用户预期偏差
- 检测 UA 判断是否为 iOS，若为真，可隐藏
capture属性或改用更明确的文案引导 - 对大视频做前端校验（如限制时长、大小），避免上传失败：用
file.size和URL.createObjectURL + <video>.duration（需加载元数据） - 上传中显示进度条，完成后清空 input 的
value（input.value = ''），避免重复提交同一文件
