html表单中需用强制调起摄像头，但须https环境、用户授权且ios仅支持capture不区分前后置；获取file对象后应通过formdata上传，注意exif旋转问题。
HTML 表单里怎么直接调用摄像头
不能直接用 <input type="file"> 就完事——它默认只打开文件选择器，不自动触发摄像头。必须显式告诉浏览器“我要的是摄像头”，靠 capture 属性 + accept 类型限定才能走设备直连。
-
accept="image/*"是基础，但不够：它仍可能弹出图库或相册选项 - 加
capture="environment"（后置）或capture="user"（前置）才能强制调起摄像头，多数安卓和 Chrome 桌面版支持 - iOS Safari 只认
capture（不区分 user/environment），且必须配合accept="image/*"，单独写capture无效 - 别用
accept="video/*"配capture来“录视频”——<input>不支持视频流上传，只会拍一帧快照
为什么点了没反应？常见权限与兼容性卡点
不是代码写错，大概率是环境拦住了。摄像头访问受制于协议、上下文和用户授权状态。
- 必须运行在
https://或localhost下，http://域名下capture会被静默忽略（Chrome 47+ 起强制） - 页面未获得摄像头权限时，首次点击会弹系统授权框；若用户点“拒绝”，后续再点也不会重试——得手动进浏览器设置里开
- Safari 在 iOS 16.4+ 才支持
capture，旧版本直接退化为普通文件选择 - 某些 Android 定制 ROM（如华为 EMUI）会拦截
capture，表现就是点击无响应，换 Chrome 或 Firefox 可能正常
拿到图片后怎么传给后端
<input type="file"> 选中后，你拿到的是一个 File 对象，不是 base64 或 blob URL。别急着 URL.createObjectURL() 预览就以为能直接发了。
- 上传必须用
FormData包装：formData.append("image", fileInput.files[0])，后端按 multipart/form-data 解析 - 如果后端只认 base64，得自己读取：
const reader = new FileReader(); reader.readAsDataURL(file);，但注意大图（>5MB）可能卡 UI - 不要把
fileInput.files[0].webkitRelativePath当路径用——它为空或不可靠，只是兼容遗留字段 - 移动端拍完图常带 EXIF 旋转信息，后端解析时若没处理 Orientation，图片会横/倒，前端可先用
canvas矫正再传
替代方案：用 MediaDevices.getUserMedia() 更可控
当 capture 不够用（比如要实时预览、自定义拍照按钮、加滤镜），就得绕过表单，直接操作媒体流。
立即学习“前端免费学习笔记（深入）”；
-
navigator.mediaDevices.getUserMedia({ video: true })返回 Promise，成功后得到MediaStream - 把流赋给
<video></video>的srcObject实现实时画面，再用canvas.captureStream().getVideoTracks()[0]录制（需额外逻辑） - 截图用
canvas.getContext('2d').drawImage(video, 0, 0)，再转canvas.toBlob()得到可上传的Blob - 这个方案不依赖
capture，兼容性更好（IE 除外），但需手动处理权限拒绝、设备切换、流停止等边界
真正麻烦的从来不是调起摄像头，而是权限状态不可见、iOS 和安卓行为不一致、还有那些藏在 EXIF 里的旋转角度——它们不会报错，只会默默让你的图片歪着上线。
