HTML5调用摄像头拍照录像方法详解

本文深入解析了HTML5环境下调用摄像头实现拍照与录像的完整技术路径，涵盖从安全上下文要求（仅限HTTPS或localhost）、`navigator.mediaDevices.getUserMedia()`权限获取与错误处理，到视频流绑定`

用 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()

把视频流绑定到 标签并预览

拿到 MediaStream 后，需用 URL.createObjectURL() 生成可播放的 blob URL，再赋给 的 srcObject 属性（注意不是 src）。

容易踩的坑：src 属性不支持直接设 stream，老写法 createObjectURL + src 已废弃，现代浏览器只认 srcObject。

• 中 muted 和 playsinline 是 iOS 必需的，否则无法自动播放
• 预览时别忘了设置 width/height 或 CSS，否则可能显示为 300×150 像素小框
• 流用完记得调用 stream.getTracks().forEach(t => t.stop())，否则摄像头灯常亮

用 canvas 拍照：drawImage() 截帧

拍照本质是把当前 画面绘制到 ，再用 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 截图仍是原始方向，得手动翻转矩阵。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5调用摄像头拍照录像方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。