Capturing System Audio Through Microphone Input in a Next.js App Without Headphones

Question

I am currently developing a Next.js application that utilizes the MediaRecorder API for audio capture via the microphone. At present, the microphone successfully captures ambient environmental sounds from the computer. I also get the system audio in the classic way of asking the user to share the screen but it is not a great fit for us.

My objective is to enable users to record their video calls without the inconvenience of screen sharing but by capturing it via the mic (Record what you hear) , as I believe it detracts from the user experience. I understand the limitations, such as the inability to capture audio when the output volume is low or when headphones are used, and I am willing to accept these constraints.

I would greatly appreciate any guidance, resources, or insights you could provide to help us achieve this capability.

I know i can get the system audio by asking the user to share screen but this is not what i am aiming for.

Answer 1

To record what the user hears, use the default audio output device (e.g. speakers, headphones) instead of using an input device (e.g. mic).

Example code:

// 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)
...