Javascript 如何修复使用navigator.mediaDevices.getUserMedia录制音频时出现的大量回音？

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

我正在使用：

• Windows 10 PRO 18362.778
• 铬81.0.4044.113
• 电子8.2.3

下面是一些代码

当我只想捕获和录制视频时，我会创建以下约束：

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

然后我就这样穿过小溪：

const stream=wait navigator.mediaDevices.getUserMedia（约束）

它就像一个符咒。但是，当我开始添加音频时，它会给我回音：

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

而且，我不能只是将音频设置为真。然后它给了我这个错误：

未捕获（承诺中）DomeException:启动屏幕捕获时出错

一个有趣的事实。当我转到on audio constraints并使用demo按钮时，它也会给我回音。我试着在边缘做，结果更好，但仍然有回声。那么它可以是音频编解码器吗

它说EchoCancellationConstraint在Chrome版本62的默认情况下被支持和启用

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

如果你想更仔细地看，这就是我的git回购

---

这是我在这里的第一篇文章。如果我在这里做错了什么，请告诉我，这样可以提高职位。谢谢大家!

我认为简单的解决方法是在页面的播放中添加一个静音元素

 // Preview the source in a video element
    videoElement.srcObject = stream
    videoElement.muted = true
    videoElement.play()

---

这将适用于所有浏览器，您仍将录制音频。

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

// 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

，就好像它源于单个流一样。

我刚刚尝试了该解决方案，应用程序将不会使用静音元素录制声音。嘿，道格。由于你的答案有一部分是正确的，所以我也会增加你的答案。但是，我只能录制系统音频，而不能录制mic.Update。Chrome版本是80.0.3987.163Thanks，Alex。这真的很有效。我希望有更好的关于使用WebRTC和示例的文档。回答很好，Alex，谢谢。你能详细说明一下为什么这样做，区别在哪里？