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);
}
};
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();