javascript - 无法使用 Firefox 从 navigator.mediaDevices.getUserMedia 获取两个音频流

Question

我需要从我的服务中的另一个音频输入录制视频(带音轨)和另一个音轨。第二个麦克风的录音必须是可选的，并通过复选框进行控制。

请检查它的演示:

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

它在 Chrome 中完美运行，但在 Firefox 中抛出 MediaStreamError AbortError "Starting audio failed"。需要出自 Firefox 的支持服务。

您需要至少两个音频输入进行测试。

任何人都可以帮助在 Firefox 上进行正确的流初始化吗？

Answer 1

Firefox 中存在一个错误(使用 v67.0 测试)，您无法同时接收来自两个不同麦克风的音频流(引用:https://bugzilla.mozilla.org/show_bug.cgi?id=1238038)。这似乎是导致您的问题的原因。

回复原始和@Kaiido 的 fiddle (......我无法评论):他们提供了误导性的结果，因为 getUserMedia promise 并不总是得到解决。错误没有发生，因为 gUM 调用未按预期完成。这似乎是因为同时有两个待处理的 gUM 调用。

为了演示这个，这里有两个 fiddle :

并行:https://jsfiddle.net/6co2eh0d/

Kaiido 的 fiddle ，在调用 gUM 之前有额外的日志。表明正在调用 gUM，但没有解决。

顺序:https://jsfiddle.net/73dqbs1p/

Kaiido 的 fiddle ，但两个 gUM 调用是按顺序完成的。表明，当解决不同音频设备的 gUM 时，会发生错误。

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