html5调用摄像头需用navigator.mediadevices.getusermedia()获取mediastream，必须在https或localhost下运行；成功后通过video.srcobject绑定预览，用canvas.drawimag截帧拍照，mediarecorder api录制视频，注意兼容性与权限管理。
用 navigator.mediaDevices.getUserMedia() 获取摄像头流
HTML5 调用摄像头的核心是 getUserMedia()，它返回一个 Promise，成功后得到 MediaStream 对象。必须在 HTTPS 或 localhost 环境下运行，否则浏览器会直接拒绝权限请求。
常见错误现象：NotAllowedError（用户拒绝或页面非安全上下文）、NotFoundError（没找到摄像头设备）、SecurityError（HTTP 页面调用）。
- 只开摄像头：传入
{ video: true }；要拍照+录像，通常还需{ audio: false }避免默认开启麦克风 - 指定分辨率可加约束：
{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } }，但不是所有设备都支持 - 记得用
.catch()捕获拒绝情形，不要只写.then()
把视频流绑定到 <video></video> 标签并预览
拿到 MediaStream 后，需用 URL.createObjectURL() 生成可播放的 blob URL，再赋给 <video></video> 的 srcObject 属性（注意不是 src）。
容易踩的坑：src 属性不支持直接设 stream，老写法 createObjectURL + src 已废弃，现代浏览器只认 srcObject。
立即学习“前端免费学习笔记（深入）”；
-
<video autoplay muted playsinline></video>中muted和playsinline是 iOS 必需的，否则无法自动播放 - 预览时别忘了设置
width/height或 CSS，否则可能显示为 300×150 像素小框 - 流用完记得调用
stream.getTracks().forEach(t => t.stop())，否则摄像头灯常亮
用 canvas 拍照：drawImage() 截帧
拍照本质是把当前 <video></video> 画面绘制到 <canvas></canvas>，再用 canvas.toDataURL() 或 canvas.toBlob() 导出图片。
关键点在于时机：不能在 video 加载完成前就调用 drawImage()，否则 canvas 是黑的。
- 监听
video的loadeddata事件后再允许点击拍照按钮 -
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)—— 注意 canvas 尺寸和 drawImage 参数匹配，否则拉伸变形 - 导出 JPEG 更省空间：
canvas.toDataURL('image/jpeg', 0.9)；toBlob()更适合上传，避免 base64 膨胀
录像要用 MediaRecorder API
MediaRecorder 是专为录制设计的 API，接收 MediaStream，输出 Blob。它比 canvas 逐帧截图高效得多，也支持音频（如果 stream 包含 audio track）。
兼容性注意：Chrome、Edge、Firefox 支持良好；Safari 16.4+ 才支持 video 录制（之前仅支持 audio），iOS Safari 仍有限制。
- 创建时指定 mimeType：
new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' })，但最好先用MediaRecorder.isTypeSupported()判断 - 必须监听
dataavailable事件收集event.data（Blob 片段），最后用new Blob(chunks, { type: recorder.mimeType })合成完整视频 - 调用
recorder.start(1000)可设时间片间隔，便于分段处理；stop()触发dataavailable和stop事件
实际项目里最易忽略的是设备兼容性兜底和权限状态管理——比如用户第一次拒绝后，第二次调用 getUserMedia() 不会再弹窗，得引导去设置页手动开启；还有 iOS 上横屏录制时 video 元素旋转了，但 canvas 截图仍是原始方向，得手动翻转矩阵。
