Can't get two audio streams from navigator.mediaDevices.getUserMedia with Firefox

Question

I need to record video (with audiotrack) and another audiotrack from another audio input in my service. The recording from second microphone must be optional and controlled with checkbox.

Please, check it demo:

jsfiddle.net/x45h6cg3

 function getMediaWithConstraints(audioSource, videoSource) { // webrtc does supports only fixed sizes for firefox 16:9 ratio. let w = 640; let h = 360; let constraints = { audio: { deviceId: audioSource ? { exact: audioSource } : undefined }, video: { deviceId: videoSource ? { exact: videoSource } : undefined, aspectRatio: 1.7777777778, width: { min: w, max: w, ideal: w }, height: { min: h, max: h, ideal: h } } }; navigator.mediaDevices.getUserMedia(constraints) .then(gotStream).catch(errorCallback); } function getSecondMediaWithConstraints(secondAudioSource) { let audioConstraints = { video: false, audio: { deviceId: secondAudioSource ? { exact: secondAudioSource } : undefined } }; navigator.mediaDevices.getUserMedia(audioConstraints) .then(gotSecondStream) .catch(errorCallback); } 

It works perfectly in Chrome, but throw MediaStreamError AbortError "Starting audio failed" in Firefox. Supporting service by Firefox is necessary.

You need at least two audio inputs to test.

Anybody can help with correct stream initialization on Firefox?

Answer 1

There is a bug in Firefox (tested with v67.0) where you can't have audio streams from two different microphones at the same time (reference: https://bugzilla.mozilla.org/show_bug.cgi?id=1238038 ). This seems to be what is causing your issue.

---

In reply to the original and @Kaiido's fiddles (...I can't comment): They are providing misleading results because the getUserMedia promises are not always being resolved. The error isn't happening because the gUM call is not fulfilling as expected. This seems to be because there are two pending gUM calls at the same time.

To demo this, here are two fiddles:

1. Parallel: https://jsfiddle.net/6co2eh0d/

   • Kaiido's fiddle, with extra logs before gUM is being called. Shows that gUM is being called, but it is not resolving.

2. Sequential: https://jsfiddle.net/73dqbs1p/

   • Kaiido's fiddle, but with the two gUM calls being done in sequence. Shows that, when gUM for a different audio device resolves, the error occurs.

    // Call gUM one after the other, rather than having them done in parallel. getMediaWithConstraints(audioDeviceSelected, videoDeviceSelected) .then(() => { getSecondMediaWithConstraints(audioSecondDeviceSelected); })