'Preventing echo when using getDisplayMedia() to capture system audio
I am building a JavaScript app to display a screen share and a camera input together on a single page. The intent is that share that browser tab into other applications (Zoom, etc) using those applications' own sharing facility (so I am not using WebRTC myself). All is working well, except for the audio.
The audio I am interested in comes from a single (non-web-based) application, so the only way I know to capture it is by capturing the entire screen & system audio. But then, if I assign this media to a video object (the whole point of the exercise), I'm stuck between a rock and a hard place. If I mute the video object, it sounds fine, but then, sharing the tab to external applications sends no audio, since the. If I don't mute the video object, I get echo - not from my microphone, but simply because the sound from the video object is now part of the system audio, which then gets fed back into the screen share.
The problem is clear to me, the solution is not. In principle, the echoCancellation setting would seem tailor-made to deal with this, but it has no effect. Or else I'm not using it correctly. I'm applying it as a constraint on the getDisplayMedia() call:
var displayMediaOptions = {
video: {
cursor: "always"
},
audio: {
autoGainControl: false,
echoCancellation: true,
noiseSuppression: false
}
};
and calling:
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
Is there something I'm missing about how this works? Or some trick I could use to make the output of my app available as "tab audio" to programs wanting to share the tab, but somehow not include it in system audio?
I tried reading about the Web Audio API to see if that could help, and it seems promising, but it's also pretty overwhelming. I'm really a newbie at all this.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
