在Next.js应用中无需耳机通过麦克风捕获系统音频

核心限制说明 #

浏览器原生的MediaRecorder API没有直接提供“不通过屏幕共享捕获系统音频”的能力——这涉及系统级音频路由权限，浏览器出于安全与隐私考量做了限制。你要实现的“通过麦克风捕获系统音频”，本质是让系统把播放音频输出到麦克风输入，得依赖系统设置或浏览器扩展辅助。

可行方案 #

1. 系统级音频路由设置（用户端操作） #

引导用户在系统层面配置音频回路：

• Windows：在声音设置中启用“立体声混音”设备，让用户选择该设备作为麦克风输入，此时麦克风会捕获系统播放的音频。
• macOS：通过“音频MIDI设置”创建“多输出设备”，合并系统音频输出与麦克风输入；或借助第三方工具（如Soundflower）实现内录。
• Linux：用PulseAudio的module-null-sink和module-loopback模块搭建音频回路，将系统输出路由到麦克风输入。
  这种方案无需修改代码，但需要用户手动配置，你可以在应用内给出清晰的步骤指引。

2. 浏览器扩展辅助（代码+扩展配合） #

开发轻量浏览器扩展，利用Chrome/Firefox的tabCaptureAPI捕获当前标签页音频，再通过扩展与Next.js应用通信传递音频流：

• 扩展后台脚本捕获音频：

// 扩展后台脚本
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.type === 'captureTabAudio') {
    const stream = await chrome.tabCapture.capture({ audio: true, video: false });
    const port = sender.tab.connect();
    port.postMessage({ streamId: stream.id });
  }
});

• Next.js页面接收流并录制：

// 页面组件内
useEffect(() => {
  chrome.runtime.sendMessage({ type: 'captureTabAudio' }, () => {
    const port = chrome.runtime.connect();
    port.onMessage.addListener(async (msg) => {
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: {
          mandatory: {
            chromeMediaSource: 'tab',
            chromeMediaSourceId: msg.streamId
          }
        }
      });
      const recorder = new MediaRecorder(stream);
      // 后续录制逻辑...
    });
  });
}, []);

注意：该方案需要用户安装扩展，且仅能捕获当前标签页的音频，适合视频通话在当前标签页的场景。

3. WebRTC音频混合（针对视频通话场景） #

如果你的应用基于WebRTC实现视频通话，可直接获取远程音频流与本地麦克风流，通过AudioContext混合后录制：

// 混合本地麦克风和远程通话音频
const audioContext = new AudioContext();
const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
const remoteStream = peerConnection.getRemoteStreams()[0];

const micSource = audioContext.createMediaStreamSource(micStream);
const remoteSource = audioContext.createMediaStreamSource(remoteStream);
const destination = audioContext.createMediaStreamDestination();

micSource.connect(destination);
remoteSource.connect(destination);

// 混合后的流用于录制
const recorder = new MediaRecorder(destination.stream);

这种方案无需额外系统设置或扩展，直接在应用内处理，完美适配视频通话录制需求，前提是你能获取到通话的音频流。

关键注意事项 #

• 所有方案都需要用户授权音频捕获权限，应用内权限请求流程要清晰。
• 系统级方案受限于用户操作系统与硬件配置，部分设备可能没有立体声混音选项。
• 浏览器扩展方案需遵循各浏览器的扩展发布规则，面向普通用户时要提供安装指引。

内容的提问来源于stack exchange，提问作者Yuval Gal