如何在使用navigator.mediaDevices.getUserMedia录制音频时解决广泛的回声？

Question

因此，我正在开发一个小型电子桌面应用程序，该应用程序可以捕获桌面屏幕并记录视频和音频。当我尝试向流中添加音频时，它的回声确实很差，我不确定为什么。

我正在使用：

• Windows 10 PRO 18362.778
• Chrome 81.0.4044.113
• 电子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。然后它给了我这个错误：

未捕获（承诺）DOMException：启动屏幕捕获时出错

一个有趣的事实。当我在音频限制条件下转到Mozilla documentation page并使用演示按钮时，它也会给我回声。我尝试在Edge上执行此操作，结果更好，但是仍然有回声。那可以是音频编解码器吗？

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

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

[Here是我的git存储库，如果您想更仔细地查看它。

PS：这是我在这里的第一篇文章。让我知道我在这里做错了什么，可以改善这个职位。谢谢！

Answer 1

我认为这里最简单的解决方法是将静音元素添加到页面上的播放中。

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

在所有浏览器中都可以使用，并且您仍然会录制音频。