I’m building a Next.js/React screen-recorder with react-media-recorder.Screen video and mic audio record fine.System / tab audio (e.g., AI voice, music) is never captured.

What I’ve tried

useReactMediaRecorder({ screen: true, audio: true, …screenMediaConstraints }) with the usual Chrome hints (chromeMediaSource: 'desktop', etc.).

Latest Chrome on Windows/macOS.

In Chrome’s “Choose what to share” dialog:

Entire Screen → no “Share system audio” checkbox appears.

Chrome Tab → checkbox shows up inconsistently and still doesn’t give me desktop sound.

Ask
Has anyone actually managed to record system audio (not just mic) alongside screen in a React/Next.js app—either via react-media-recorder or plain getDisplayMedia()? Any Chrome/Edge/Firefox flags, better constraints, or OS settings I’m missing? Need a reliable way for the final recording to include every sound the user hears. Thanks!

here is my code
import { useReactMediaRecorder } from 'react-media-recorder';
const {
status,
startRecording,
stopRecording,
mediaBlobUrl,
} = useReactMediaRecorder({
screen: true, // Request screen capture
audio: true, // Request audio capture alongside screen
video: false, // Not capturing a separate camera feed with react-media-recorder
askPermissionOnMount: false
screenMediaConstraints: {
video: {
displaySurface: 'browser',
},
audio: {
mandatory: {
chromeMediaSource: 'desktop',
// Disabling typical microphone audio processing, hoping it helps with system audio
echoCancellation: false,
noiseSuppression: false,
autoGainControl: false,
}
},
},
onStart: () => {
console.log("Screen recording started with system audio constraints.");
// ...
},
onStop: (blobUrl, blob) => {
console.log("Screen recording stopped. Blob URL:", blobUrl);
}
});