html 媒体录制API使用

2026-04-22 20:00:09 342阅读 0评论

用 HTML MediaRecorder 实现本地音视频录制：从点击到导出的落地步骤

在网页里让浏览器直接处理音视频录制，不用依赖第三方库，是很多轻量交互的首选。MediaRecorder API 提供了从点击开始录制到导出保存的完整链路，下面用贴近项目的思路，把关键步骤说清楚，让你能马上用起来。

为什么选择原生录制

大多数场景不需要复杂的云端处理或大型框架，网页内直接生成 Blob 或本地文件，既节省链路，也更可控。适用于录音、小视频拍摄、课堂片段记录、运动轨迹回放等，关键点在于“本地、低延迟、可导出”。

准备：权限与设备检测

在正式开始前，先确认浏览器支持与用户授权，以及设备可用性。

<input type="file" id="fileInput" accept="audio/*,video/*" hidden>
<canvas id="canvas" style="display:none;"></canvas>

检测是否支持 MediaRecorder：

if ('MediaRecorder' in window) {
  console.log('浏览器支持 MediaRecorder');
  // 继续后续步骤
} else {
  console.error('当前环境不支持 MediaRecorder');
}

捕获源与开始录制

根据需求选择麦克风或摄像头，或使用画布、Canvas、UserMedia 等输入源。以音频为例：

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);

mediaRecorder.ondataavailable = function(event) {
  const blob = new Blob([event.data], { type: 'audio/webm; codecs=vp9' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recording.webm';
  a.click();
  URL.revokeObjectURL(url);
};

mediaRecorder.onstop = function() {
  console.log('录制已停止，文件已保存');
};

// 开始录制与触发
document.getElementById('start').addEventListener('click', () => {
  mediaRecorder.start();
});

如需视频，可将 canvas 作为录制源或使用 video 元素的 stream。

进阶：分段录制与暂停

大量数据一次性写入可能导致性能问题，分段更稳：

let chunks = [];

mediaRecorder.ondataavailable = function(event) {
  chunks.push(event.data);
};

mediaRecorder.onstop = function() {
  const blob = new Blob(chunks, { type: 'audio/webm; codecs=vp9' });
  // 保存或进一步处理
};

暂停与恢复也能灵活管理：

mediaRecorder.pause();
setTimeout(() => {
  mediaRecorder.resume();
}, 5000);

保存与导出：多端可用的格式

Web 端常以 Blob 保存为本地文件，移动端也可通过文件系统 API 访问。根据用途选择编码：

WebM (vp9/vorbis)：网页播放流畅，兼容性好
MP4 (H.264)：更广泛兼容，适合导出
FLAC：高保真音频的本地保存选项

// 保存为本地文件
const blob = new Blob(chunks, { type: 'audio/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'recording.webm';
a.click();
URL.revokeObjectURL(url);

优化：体积与清晰度的取舍

在移动设备上，为保证流畅，需要在清晰度与大小间权衡。可通过调整帧率、分辨率、编码参数与压缩来优化。

const options = {
  mimeType: 'video/webm; codecs=vp9',
  video: { width: 640, height: 480, frameRate: 30 },
  audio: true
};

// 生成时再写入
const blob = new Blob(chunks, options);