最稳定路径是用getUserMedia获取视频流→画到canvas截帧→转Blob上传；需设canvas宽高为video.videoWidth/Height，用FormData传blob而非Base64；iOS/Android需降级input[type=file]并处理方向元数据。
HTML怎么用 getUserMedia 调起摄像头
不能直接“拍照上传”，得先拿到视频流，再画到 <canvas> 上截帧——这是最稳定、兼容性最好的路径。现代浏览器（Chrome 53+、Firefox 64+、Edge 79+）都支持 getUserMedia，但 Safari 在 iOS 14.3+ 才允许非 HTTPS 环境下使用，本地开发务必用 localhost 或 https://。
常见错误：NotAllowedError（用户拒绝授权）、NotFoundError（没找到摄像头）、SecurityError（HTTP 页面调用）。必须确保页面是安全上下文，且显式请求权限：
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
const video = document.getElementById('video');
video.srcObject = stream;
})
.catch(err => console.error('获取摄像头失败：', err));
怎么把视频画面转成图片 Base64 或 Blob
<canvas> 是关键中转站：它能按当前 <video> 的尺寸绘制一帧，再用 toDataURL() 或 toBlob() 输出。别直接用 video.captureStream().getTracks()[0] 录制——那是为录像设计的，拍照要的是单帧精度。
注意点：
立即学习“前端免费学习笔记（深入）”；
-
canvas.width/canvas.height必须显式设置，不能靠 CSS 缩放，否则截图模糊 - 用
video.videoWidth/video.videoHeight获取真实分辨率，避免拉伸失真 -
toBlob()比toDataURL()更适合上传：体积小、不占主线程、可直接传给FormData
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const video = document.getElementById('video');
// 设置 canvas 尺寸匹配视频实际分辨率
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.toBlob(blob => {
// blob 就是拍照生成的文件对象，可直接上传
}, 'image/jpeg', 0.8); // 质量 0.8，避免过大
怎么用 FormData 上传照片到后端
别拼接 Base64 字符串发 POST——服务端解析麻烦、传输体积大、还容易触发 JSON 字段长度限制。用 FormData 是标准做法，后端收到的就是普通 multipart 文件字段。
关键细节：
- 字段名（如
'photo'）必须和服务端约定一致，Python Flask 用request.files.get('photo')，Node.js Express 需配multer中间件 - 上传前检查
blob是否有效（!blob || blob.size === 0），否则可能静默失败 - 建议加
fetch的signal支持超时，避免用户以为卡死
const formData = new FormData();
formData.append('photo', blob, 'selfie.jpg'); // 第三个参数是文件名，影响 Content-Disposition
fetch('/upload', {
method: 'POST',
body: formData,
})
.then(res => res.json())
.then(data => console.log('上传成功', data))
.catch(err => console.error('上传失败', err));
移动端拍照常见坑：iOS Safari 和 Android WebView
iOS Safari 对 getUserMedia 的限制最多：横屏时 videoWidth/videoHeight 可能反着来；部分旧版 WebView（比如微信内置）根本不支持，得降级为 <input type="file" accept="image/*" capture="environment"> ——这个原生调起系统相机，但无法预览、无法控制分辨率、拍完不能二次编辑。
实操建议：
- 先尝试
getUserMedia，失败则自动 fallback 到input[type=file] - Android Chrome 一般没问题，但某些厂商定制 WebView（如华为、小米）会禁用
mediaDevices，需 UA 检测 + 提示 - 不要依赖
video.readyState === 4判断是否就绪，改用loadeddata事件更可靠
真正难的不是调用 API，而是处理各种设备返回的宽高比、镜像翻转、方向元数据（EXIF Orientation）——这些不修，用户上传的照片可能是倒的或左右颠倒的。
