在没有耳机的情况下通过 Next.js 应用程序中的麦克风输入捕获系统音频

Question

我目前正在开发一个 Next.js 应用程序，该应用程序利用 MediaRecorder API 通过麦克风捕获音频。目前，麦克风已成功捕获电脑周围的环境声音。我还以要求用户共享屏幕的经典方式获取系统音频，但这不太适合我们。

我的目标是使用户能够录制他们的视频通话，而无需屏幕共享带来的不便，而是通过麦克风捕获（录制您听到的内容），因为我认为这会降低用户体验。我了解这些限制，例如输出音量较低或使用耳机时无法捕获音频，并且我愿意接受这些限制。

我非常感谢您提供的任何指导、资源或见解来帮助我们实现这一能力。

我知道我可以通过要求用户共享屏幕来获取系统音频，但这不是我的目标。

Answer 1

要录制系统音频，请使用默认的音频输出设备。示例代码：

// ask for permission to use audio devices
await navigator.mediaDevices.getUserMedia({ audio: true })

// get a list of available devices
const mediaDevices = await navigator.mediaDevices.enumerateDevices()

// find the default audio output
const defaultAudioOutputDevice = mediaDevices.find((device) => {
  return (
    device.kind === "audiooutput" &&
    // Chromium
    (device.deviceId === "default" ||
      // Firefox
      device.label === "Default audio output device")
  )
})

if (!defaultAudioOutputDevice) {
  throw new Error("No default audio output device found")
}

// access the audio stream
const stream = await navigator.mediaDevices.getUserMedia({
  audio: {
    deviceId: defaultAudioOutputDevice.deviceId,
  },
})

// record audio
const mediaRecorder = new MediaRecorder(stream)
...