chrome.desktopCapture - can't record both system audio and microphone?

Question

I've built a Chrome extension that captures screen activity and microphone input and outputs a video file. Since chrome.desktopCapture can't record audio input alongside screen capture, I'm getting the mic in its own, separate stream. So:

//get screen stream
chrome.desktopCapture.chooseDesktopMedia(['screen'], null, (stream_id, opts) => {
    let constraints = {video: mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: stream_id
    }};
    navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
        video_stream = stream;
    });
});

//get mic stream
navigator.mediaDevices.getUserMedia({audio: true}).then((stream) => {
    audio_stream = stream;
});

Then, later, when I've got both streams, before I start recording I merge them by creating a master stream and add the respective tracks from the separate video and audio streams to it.

let master_stream = new MediaStream(video_stream);
master_stream.addTrack(audio_stream.getTracks()[0]);

And ultimately, when I end up with a video file, this works GREAT. I get screen and mic.

Question: Why does this technique NOT work if I ask Chrome to ALSO record system sound?

So if I change ['screen'] to ['screen', 'audio'], with everything else the same, I end up with no mic in the resultant video.

If I output getTracks() on master_stream, here's what I get:

Array(3)
    0: MediaStreamTrack {kind: "audio", id: "9ee3ee33-73ee-41e4-957c-d6fd3aaada43", label: "System Audio", enabled: true, muted: false, …}
    1: MediaStreamTrack {kind: "audio", id: "ab2429a1-7f75-48f2-9ee1-6a4bfd7ca942", label: "Default - Microphone (Samson Meteor Mic) (17a0:0310)", enabled: true, muted: false, …}
    2: MediaStreamTrack {kind: "video", id: "4ecb1929-31d0-4a79-8cbc-1a8759323c3b", label: "screen:0:0", enabled: true, muted: false, …}

I can't see an obvious cause as to why adding system audio kills mic audio in the resultant output. Anyone any ideas?

Answer 1

// add two buttons startrecording and stoprecording
let desktopStream; // variable to hold the desktop stream
let microphoneStream; // variable to hold the microphone stream
let recordedChunks = []; // array to store recorded chunks
let mediaRecorder; // variable to hold the MediaRecorder instance

const startRecording = async () => {
    try {
        desktopStream = await navigator.mediaDevices.getDisplayMedia({
            audio: true,
            video: true
        });
        microphoneStream = await navigator.mediaDevices.getUserMedia({
            audio: true
        });

        const audioContext = new AudioContext();
        const microphoneSource = audioContext.createMediaStreamSource(microphoneStream);

        // Create a MediaStreamAudioDestinationNode
        const destination = audioContext.createMediaStreamDestination();
        const desktopAudioSource = audioContext.createMediaStreamSource(desktopStream);
        desktopAudioSource.connect(destination);
        microphoneSource.connect(destination);

        // Combine the audio streams
        const combinedAudioStream = destination.stream;

        // Merge the audio and video streams
        const combinedStream = new MediaStream();
        combinedStream.addTrack(combinedAudioStream.getAudioTracks()[0]);
        combinedStream.addTrack(desktopStream.getVideoTracks()[0]);

        // Create a MediaRecorder to record the combined stream
        mediaRecorder = new MediaRecorder(combinedStream);

        mediaRecorder.ondataavailable = (event) => {
            recordedChunks.push(event.data);
        };

        mediaRecorder.onstop = () => {
            const blob = new Blob(recordedChunks, {
                type: 'video/webm'
            });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            document.body.appendChild(a);
            a.style = 'display: none';
            a.href = url;
            a.download = 'recorded-video.webm';
            a.click();
            window.URL.revokeObjectURL(url);
            recordedChunks = [];
        };

        mediaRecorder.start();
    } catch (error) {console.error('Error starting recording:', error);
    }
};

const stopRecording = () => {
    if (desktopStream) {
        desktopStream.getTracks().forEach((track) => track.stop());
    }

    if (microphoneStream) {
        microphoneStream.getTracks().forEach((track) => track.stop());
    }

    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
    }
};