Getting No audio tracks in MediaStream issue in firefox

Question

I am capturing user screen and audio using getDisplayMedia and getUserMedia and able to record the complete screen capture. But this works only on Chrome and not on Firefox. When I run my application on Firefox it throws error 'DOMException: AudioContext.createMediaStreamSource: No audio tracks in MediaStream'. Below is my code snippet. I have latest version of both browsers installed. Any help would be appreciated. Thanks in advance.

Note:- Its throwing error on line context.createMediaStreamSource(desktopStream)

async function captureScreen() {
    desktopStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
    microPhoneStream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });

    const tracks = [
        ...desktopStream.getVideoTracks(),
        ...mergeAudioStreams(desktopStream,microPhoneStream)
    ];
    stream = new MediaStream(tracks);
    var options = { mimeType: "video/webm; codecs=opus,vp8" };
    startRecording(stream, options);
    ....
    ....
    ....
}


//merges two audio streams into one
const mergeAudioStreams = (desktopStream, microPhoneStream) => {
    const context = new AudioContext();
    try {
        const source1 = context.createMediaStreamSource(desktopStream);
        const source2 = context.createMediaStreamSource(microPhoneStream);
        const destination = context.createMediaStreamDestination();

        const desktopGain = context.createGain();
        const voiceGain = context.createGain();

        desktopGain.gain.value = 0.7;
        voiceGain.gain.value = 0.7;

        source1.connect(desktopGain).connect(destination);
        source2.connect(voiceGain).connect(destination);
        return destination.stream.getAudioTracks();
    }
    catch (err) {
    console.log(err);
    }
};

Answer 1

Firefox doesn't currently support capturing audio using getDisplayMedia. There's a feature request for it.

What you could do is check whether your streams have any audio tracks before creating the audio node, like this:

const destination = context.createMediaStreamDestination();

if (desktopStream.getAudioTracks().length) {
    const source1 = context.createMediaStreamSource(desktopStream);
    const desktopGain = context.createGain();
    desktopGain.gain.value = 0.7;
    source1.connect(desktopGain).connect(destination);
}

if (microPhoneStream.getAudioTracks().length) {
    const source2 = context.createMediaStreamSource(microPhoneStream);
    const voiceGain = context.createGain();
    voiceGain.gain.value = 0.7;
    source2.connect(voiceGain).connect(destination);
}

return destination.stream.getAudioTracks();