MediaRecorder API 实战：录制音视频流与编码输出

---

title: MediaRecorder API 实战：录制音视频流与编码输出

keywords:

• MediaRecorder
• getUserMedia
• webm
• codecs
• dataavailable

description: 介绍 MediaRecorder 的音视频录制流程、编码类型与分片事件处理，结合 getUserMedia 与保存/上传策略，提供示例与兼容建议。

categories:

• 文章资讯
• 技术教程

---

概述

MediaRecorder 允许将媒体流（摄像头/麦克风/屏幕）录制为可保存的片段（如 WebM）。通过 dataavailable 事件读取分片并合并为 Blob，实现本地保存或上传。需关注编码支持与权限。

示例

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
const rec = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp8,opus' })
const chunks = []

rec.addEventListener('dataavailable', e => { if (e.data.size) chunks.push(e.data) })
rec.addEventListener('stop', () => {
  const blob = new Blob(chunks, { type: 'video/webm' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a'); a.href = url; a.download = 'record.webm'; a.click()
  URL.revokeObjectURL(url)
})

rec.start(1000) // 每秒一个分片
// 停止录制
setTimeout(() => rec.stop(), 5000)

工程建议

• 编码支持：查询 MediaRecorder.isTypeSupported()；根据平台使用不同编码（如 H.264）。
• 权限与 UX：在用户手势下启动；清晰指示录制状态与时长；处理取消。
• 大文件与上传：分片上传与断点续传；记录失败与重试策略。
• 兼容：不支持时回退到 canvas.captureStream() 与 WebM 编码方案或原生应用。

参考与验证

• MDN MediaRecorder 文档：https://developer.mozilla.org/docs/Web/API/MediaRecorder
• web.dev 捕获与录制指南：https://web.dev/articles/media-recording
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/mediarecorder/