RecordRTC：浏览器端录音/录屏的靠谱工具（项目概览与上手）

如果你在做网页端录音/录屏，或者要抓摄像头画面导出成文件，RecordRTC 是个挺省心的选择。它把底层的 MediaRecorder、WebRTC 这堆 API 做了个更顺手的封装，API 比较直白，上手也不难。

项目地址

• GitHub：https://github.com/muaz-khan/RecordRTC
• NPM：recordrtc

能做什么

• 音频录制（麦克风）
• 视频录制（摄像头、屏幕共享）
• 同时录制音视频
• 支持多种容器/编码（浏览器能力决定，常见 WebM/Opus/VP8/VP9 等）
• 提供 Blob、URL、下载等多种导出方式

快速上手

下面的两段代码直接来自官方 README，分别演示 Promise 风格与常规写法：

// 使用 Promise 风格的示例（来自官方 README）
let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
let recorder = new RecordRTCPromisesHandler(stream, {
  type: 'video'
});
recorder.startRecording();

const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);

await recorder.stopRecording();
let blob = await recorder.getBlob();
invokeSaveAsDialog(blob);

// 常规写法示例（来自官方 README）
navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
}).then(async function(stream) {
  let recorder = RecordRTC(stream, {
    type: 'video'
  });
  recorder.startRecording();

  const sleep = m => new Promise(r => setTimeout(r, m));
  await sleep(3000);

  recorder.stopRecording(function() {
    let blob = recorder.getBlob();
    invokeSaveAsDialog(blob);
  });
});

说明：invokeSaveAsDialog 为示例中的保存方法（RecordRTC 提供的下载工具），你也可以改为自定义下载/上传逻辑。

使用小贴士

• 权限与兼容性：录音/录屏都需要 HTTPS 环境与用户授权；Safari 的 MediaRecorder 支持相对弱，必要时考虑降级策略。
• 容器与编码：mimeType 尽量和浏览器支持对齐，video/webm;codecs=vp8、audio/webm;codecs=opus 是常见组合。
• 音频双声道：只在确有需求时开启，多数语音场景单声道更省带宽/体积。
• 录制时长与内存：长时间录制建议分段写出，避免大 Blob 挤爆内存。
• 上传后端：后端可直接收 Blob（multipart/form-data），存储为 WebM/MP4 等；如需转码可用 FFmpeg。

配置说明（常用 Options）

下面列一些在实际项目里最常用、也最容易搞混的配置项（不同记录器支持的字段会略有差异）：

• type：整体录制类型提示，常见有 audio、video、canvas、gif。
• mimeType：容器与编码，比如：
  • 音频常用：audio/webm;codecs=opus、audio/ogg;codecs=opus（取决于浏览器）。
  • 视频常用：video/webm;codecs=vp8 或 vp9。
• bitsPerSecond / videoBitsPerSecond / audioBitsPerSecond：码率，影响文件体积与清晰度。
• numberOfAudioChannels：1 或 2。语音类建议 1。
• sampleRate / desiredSampRate：采样率，常见 44100/48000。
• timeSlice：按固定间隔抛出数据块（配合 ondataavailable），适合“边录制边上传”。
• disableLogs：关闭库内日志。

RecordRTC 支持多种“记录器（Recorder）”，可以显式选择，也可以让库自动挑：

• StereoAudioRecorder：基于 WebAudio，适合音频录制；
• MediaStreamRecorder：基于 MediaRecorder，音视频通用；
• WhammyRecorder：用 Whammy 将帧拼成 WebM（更像兼容兜底方案）；
• CanvasRecorder：录制 <canvas> 内容；
• GifRecorder：导出 GIF（体积通常较大）。

示例：分段录制并上传（更抗内存占用，也方便断点续传）：

const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
const recorder = new RecordRTC(stream, {
  type: 'audio',
  mimeType: 'audio/webm;codecs=opus',
  numberOfAudioChannels: 1,
  timeSlice: 5000, // 每 5s 产出一段
  ondataavailable: async (blob) => {
    // 直接把分片往后端推
    const form = new FormData();
    form.append('chunk', blob, `part-${Date.now()}.webm`);
    await fetch('/upload', { method: 'POST', body: form });
  }
});
recorder.startRecording();
// ... 结束录制
recorder.stopRecording(() => {
  // 可选：处理最后一段，或合并标记
  stream.getTracks().forEach(t => t.stop());
});

如果你要手动选择 Recorder 实现，也可以这样：

const r = new RecordRTC.StereoAudioRecorder(stream, {
  mimeType: 'audio/webm',
  numberOfAudioChannels: 1
});
r.record();
r.stop((blob) => { /* ... */ });

浏览器兼容性（精炼总结）

• HTTPS 与权限：getUserMedia/getDisplayMedia 需要安全上下文（HTTPS）与用户授权。
• Chrome / Edge（Chromium）：对 MediaRecorder、WebM/Opus/VP8 支持好；系统音频的屏幕录制支持依赖平台版本。
• Firefox：整体兼容不错，但某些 mimeType 或码率组合会与 Chromium 略有差异。
• Safari（含 iOS）：MediaRecorder 支持相对保守，容器/编码选择更受限；iOS 的系统限制更多（例如后台录制、文件大小、自动播放策略）。
• 屏幕录制：getDisplayMedia 在主流现代浏览器已支持，但系统音频采集是否可用与 OS/浏览器版本相关。
• 下载/播放：部分移动端对 blob: URL、自动播放策略较敏感，实践中建议点击触发播放。

小建议：兼容策略里加一个 canRecord(mimeType) 的探测步骤，按浏览器能力回退。例如：

function pickSupportedMime(candidates) {
  const m = window.MediaRecorder;
  if (!m) return '';
  return candidates.find(t => m.isTypeSupported?.(t)) || '';
}
const mime = pickSupportedMime([
  'audio/webm;codecs=opus',
  'audio/ogg;codecs=opus',
  'audio/webm',
]);
const recorder = new RecordRTC(stream, { type: 'audio', mimeType: mime || undefined });

适用场景

• 在线课程/面试系统里的“录音答题/录屏作业”
• 客服或表单内的“语音留言/视频留言”
• 团队内“快速录屏说明问题”的小工具
• Web 端 Demo、Bug 复现录像

小结

RecordRTC 的定位很务实：把浏览器已有的录制能力封装得更顺手。对于常见的录音/录屏需求，它能让你少踩坑、快落地。如果你后续要做更复杂的采集/推流（比如和 RTC 实时互动结合、服务端录制、云端转码等），也可以在此基础上再扩展方案。