javascript - 如何在使用 navigator.mediaDevices.getUserMedia 录制音频时修复广泛的回声？

Question

所以，我正在开发一个小型 Electron 桌面应用程序，它可以捕获桌面屏幕并记录视频和音频。
当我尝试向流中添加音频时，它开始回显非常糟糕，我不知道为什么。

我在用:

Windows 10 专业版 18362.778

Chrome 81.0.4044.113

Electron 8.2.3

这是一些代码。

当我只想捕获和录制视频时，我会创建这些约束:

const constraints = {
        audio: false,
        video: {
            mandatory: {
                chromeMediaSource: 'desktop',
                chromeMediaSourceId: source.id
            }
        }
    }

然后我像这样传递给流:
const stream = await navigator.mediaDevices.getUserMedia(constraints)
它就像一个魅力。但是，当我开始添加音频时，它会给我回声:

const constraints = {
        audio: {
            mandatory: {
                chromeMediaSource: 'desktop',
            }
        },
        video: {
            mandatory: {
                chromeMediaSource: 'desktop',
            }
        }
    }

另外，我不能只将音频设置为 true。然后它给了我这个错误:

Uncaught (in promise) DOMException: Error starting screen capture

一个有趣的事实。当我去 Mozilla documentation page关于音频限制并使用演示按钮，它也给了我回声。我尝试在 Edge 上进行，结果更好，但仍然有回声。那么它可以是音频编解码器吗？

Here它表示支持 echoCancellation 约束，并且默认情况下从 Chrome 版本 62 开始。

Here是我试图找到解决方案但失败的 Github 上的分支。

Here如果您想更仔细地查看它，这是我的 git repo。

PS:这是我在这里的第一篇文章。如果我在这里做错了什么并且可以改进帖子，请告诉我。谢谢!

Answer 1

问题来自尝试同时启动麦克风音频和计算机屏幕视频的单个流。要解决此问题，您需要先创建音频流，然后单独创建捕获计算机屏幕的视频流，最后将流合并为一个。

// create audio and video constraints
const constraintsVideo = {
    audio: false,
    video: {
        mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: source.id
        }
    }
}
const constraintsAudio = {audio: true}

// create audio and video streams separately
const audioStream = await navigator.mediaDevices.getUserMedia(constraintsAudio)
const videoStream = await navigator.mediaDevices.getUserMedia(constraintsVideo)

// combine the streams 
const combinedStream = new MediaStream([...videoStream.getVideoTracks(), ...audioStream.getAudioTracks()])

合并流后，您可以使用 combinedStream好像它起源于一个单一的流。