如果你在做网页端录音/录屏，或者要抓摄像头画面导出成文件，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：录制
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 实时互动结合、服务端录制、云端转码等），也可以在此基础上再扩展方案。