本文详解在 web 环境中通过 `mediastream` 与 `web audio api` 融合多路音频源（如系统桌面音频 + 本地麦克风），并借助 `recordrtc` 实现高质量同步录音的完整方案，解决耳机电流干扰导致桌面音频丢失等常见兼容性问题。
在现代浏览器中，原生 MediaRecorder API 无法直接捕获桌面音频（即系统播放声音），它仅支持来自 getUserMedia() 的媒体流——而该 API 默认只提供麦克风（audio: true）或屏幕（displayMedia），且桌面音频（system audio）在标准 Web API 中始终不可访问，这是出于严格的安全与隐私限制（Chrome、Edge 等均不开放此能力）。因此，你遇到的“插耳机后桌面音频消失”现象，并非代码缺陷，而是根本性限制：当耳机插入时，系统音频输出路径变更，navigator.mediaDevices.getUserMedia({ audio: true }) 仍只采集麦克风，完全不包含任何桌面声音。
✅ 正确解法是：分离采集 + 混音合成
你需要分别获取两个独立音频流（麦克风 + 桌面音频），再通过 Web Audio API 在内存中实时混音，最后将混合后的 MediaStream 交由录音器处理。但关键前提：桌面音频必须来自合法可获取的源头——目前唯一可行路径是：
- 用户主动共享桌面（含系统音频）：调用 navigator.mediaDevices.getDisplayMedia({ audio: true })（需 Chrome 72+ / Edge 79+，且用户手动勾选「共享音频」选项）；
- 麦克风流单独获取：navigator.mediaDevices.getUserMedia({ audio: true })；
- 混音处理：用 AudioContext 将两路 MediaStreamTrack 接入同一上下文，合并为单一流。
以下是生产级实现示例（基于 RecordRTC 封装，兼容性更优）：
import RecordRTC, { StereoAudioRecorder } from 'recordrtc';
const startDualAudioRecording = async () => {
let micStream, screenStream;
const ac = new AudioContext();
try {
// 步骤1：获取麦克风流（禁用降噪/回声抑制以保真）
micStream = await navigator.mediaDevices.getUserMedia({
audio: {
echoCancellation: false,
noiseSuppression: false,
autoGainControl: false
}
});
// 步骤2：获取桌面流（含系统音频）→ 用户必须手动授权并勾选"共享音频"
screenStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true // ⚠️ 关键：启用此选项才能捕获系统声音
});
// 步骤3：创建混音流
const destination = ac.createMediaStreamDestination();
const micSource = ac.createMediaStreamSource(new MediaStream([micStream.getAudioTracks()[0]]));
const screenSource = ac.createMediaStreamSource(new MediaStream([screenStream.getAudioTracks()[0]]));
micSource.connect(destination);
screenSource.connect(destination);
// 步骤4：使用 RecordRTC 录制混音后流（优于原生 MediaRecorder 的 WAV 支持与稳定性）
const recorder = new RecordRTC(destination.stream, {
type: 'audio',
mimeType: 'audio/wav',
recorderType: StereoAudioRecorder,
numberOfAudioChannels: 2, // 保留立体声
timeSlice: 4000,
ondataavailable: (blob) => {
// 处理分片：上传、拼接或转 Base64
console.log('录音分片生成:', blob.size, 'bytes');
}
});
recorder.startRecording();
return recorder;
} catch (err) {
console.error('录音初始化失败:', err.name === 'NotAllowedError'
? '用户未授权麦克风或桌面音频共享'
: err.message);
throw err;
}
};
// 停止录制示例
const stopRecording = async (recorder) => {
if (!recorder) return;
recorder.stopRecording(() => {
const blob = recorder.getBlob();
const url = URL.createObjectURL(blob);
// 保存或上传 blob...
console.log('完整录音完成:', url);
});
};⚠️ 重要注意事项：
- getDisplayMedia({ audio: true }) 仅在安全上下文（HTTPS）下可用，HTTP 协议将静默失败；
- 用户必须手动在弹窗中勾选「共享音频」复选框，否则 screenStream 不含音频轨道；
- 部分旧版 Chrome（
- RecordRTC 内部封装了 Web Audio API 混音逻辑，比手写 MediaRecorder 更可靠，尤其在多源同步、采样率对齐方面；
- 若需更高保真（如 48kHz），可在 AudioContext 构造时指定：new AudioContext({ sampleRate: 48000 })（需浏览器支持）。
? 替代方案提示：
若业务场景允许桌面端部署，可考虑 Electron + node-record-lpcm16 或 ffmpeg.wasm 进行深度音频捕获；纯 Web 场景下，上述 getDisplayMedia + Web Audio + RecordRTC 是当前最合规、兼容性最佳的方案。
总结：不要尝试用 getUserMedia 直接“偷取”系统音频——这是不可能的。正确路径是引导用户主动共享桌面（含音频），再与麦克风流科学混音。代码健壮性取决于权限处理、错误降级与用户引导，而非单纯替换库。
立即学习“Java免费学习笔记（深入）”；
