本文详解在浏览器中使用 javascript 同时捕获系统桌面音频（如播放的音乐、网页声音）和本地麦克风输入的可行方案，重点解决耳机接入时桌面音频丢失的问题，并提供基于 web audio api 与 recordrtc 的稳定实现。
在现代 Web 应用中，仅录制麦克风已无法满足会议记录、教学回放、游戏解说等场景需求——用户往往需要同步捕获自身语音（麦克风）与系统播放的声音（桌面音频）。但 navigator.mediaDevices.getUserMedia({ audio: true }) 默认仅获取麦克风流，无法直接获取桌面音频；而 getDisplayMedia({ audio: true }) 虽可捕获屏幕+系统音频，却不包含麦克风，且在多数浏览器中（Chrome ≥ 92）对 audio: true 的支持仍受限于操作系统权限（如 macOS 需手动开启“屏幕录制”+“麦克风”双重授权，Windows 则需“音频输入”权限）。
更关键的是：你遇到的「插耳机后桌面音频消失」问题，本质是 音频设备路由冲突——当耳机插入时，系统默认将 default 音频输出设备切换为耳机，而 getDisplayMedia 捕获的“桌面音频”实际依赖当前默认播放设备的混音输出（即“扬声器/耳机输出流”），但该流在 Web 端不可直接访问；getUserMedia 又无法订阅该输出流。因此单纯依赖 MediaRecorder + getUserMedia 或 getDisplayMedia 均无法可靠实现双源混录。
✅ 正确解法是：分离采集 + Web Audio 混音 + 统一录制
即分别获取两个独立音频流（麦克风流 + 桌面音频流），通过 AudioContext 将其混合为单一流，再交由 RecordRTC 或原生 MediaRecorder 录制：
✅ 推荐方案：RecordRTC + AudioContext 混音（兼容性好、开箱即用）
import { RecordRTC, StereoAudioRecorder } from 'recordrtc';
const startDualAudioRecording = async () => {
try {
// 1. 获取麦克风流（必须显式请求）
const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
// 2. 获取桌面音频流（注意：需用户主动选择“音频标签页”或“整个屏幕”）
// ⚠️ Chrome/Edge 支持 { audio: true }；Firefox 仅支持捕获屏幕（无纯音频选项）
const screenStream = await navigator.mediaDevices.getDisplayMedia({
video: false,
audio: true // 关键：启用桌面音频捕获
});
// 3. 创建 AudioContext 进行混音
const ac = new AudioContext();
const sources = [
ac.createMediaStreamSource(micStream),
ac.createMediaStreamSource(screenStream)
];
const dest = ac.createMediaStreamDestination();
// 连接两个源到同一目的地（自动混音）
sources.forEach(source => source.connect(dest));
// 4. 使用 RecordRTC 录制混音后的流（优于原生 MediaRecorder 的 WAV 支持与稳定性）
const recorder = new RecordRTC(dest.stream, {
type: 'audio',
mimeType: 'audio/wav',
recorderType: StereoAudioRecorder,
numberOfAudioChannels: 2, // 保留立体声（左=麦克风，右=桌面音频，便于后期分离）
timeSlice: 5000, // 每5秒触发 ondataavailable
ondataavailable: (blob) => {
console.log('录音分片生成:', blob.size, 'bytes');
// 上传分片或暂存
}
});
recorder.startRecording();
return recorder;
} catch (err) {
console.error('双音频录制失败:', err.name, err.message);
if (err.name === 'NotAllowedError') {
alert('请允许麦克风和屏幕共享权限（含音频）');
}
}
};
// 停止录制示例
const stopRecording = async (recorder) => {
if (!recorder) return;
recorder.stopRecording(() => {
const blob = recorder.getBlob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'dual-audio-recording.wav';
a.click();
});
};⚠️ 重要注意事项
- 权限要求严格：需同时获得 microphone 和 display-capture（含音频）权限。Chrome 中用户必须在弹窗中手动勾选“音频”复选框（若未显示，请检查浏览器版本及系统设置）。
-
操作系统限制：
- macOS：需在「系统设置 → 隐私与安全性 → 屏幕录制」中允许浏览器，并确保「麦克风」权限也已开启。
- Windows：需开启「设置 → 隐私 → 麦克风」和「设置 → 隐私 → 屏幕录制」。
- Firefox 差异：目前不支持 getDisplayMedia({ audio: true })，仅能捕获屏幕视频（无音频），故该方案在 Firefox 中不可用。
- 耳机问题根源：插耳机后桌面音频“消失”，实为 getDisplayMedia 捕获的是当前默认播放设备的输出音频，而部分系统/驱动在耳机插入时未正确暴露该混音流。RecordRTC 方案通过 AudioContext 显式混音，绕过此路由缺陷，显著提升稳定性。
-
替代轻量方案（无第三方库）：若不想引入 RecordRTC，可用原生 MediaRecorder，但需自行处理 WAV 头封装（MediaRecorder 输出 webm 或 ogg，非标准 WAV）：
const mediaRecorder = new MediaRecorder(dest.stream, { mimeType: 'audio/webm' });
✅ 总结
要稳定实现桌面音频 + 麦克风双轨录制，请放弃单一 getUserMedia 方案，采用 getDisplayMedia({ audio: true }) + getUserMedia({ audio: true }) + AudioContext 混音 + RecordRTC 录制 的组合路径。它不仅规避了耳机导致的音频路由异常，还提供了高质量 WAV 输出、分片录制、跨浏览器（Chrome/Edge）兼容性保障。务必引导用户正确授予权限，并在 macOS/Windows 上完成系统级隐私设置。
