electron: `desktopCapturer` Electron Client Screenshare with Audio Causes Participants to Hear Echo

I am using the desktop sharing feature of the Electron desktopCapturer on our demos. Some of our demos require to share audio of our application. When we share the desktop with audio on desktopCapturer electron client participants start to hear their own voice.

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

Current behavior:

When screen share enabled with audio participant sounds echoing back to themselves.

Expected Behavior:

Only system sounds should be broadcasted to the conference.

Expected Solution:

Behaviour should be converted as same as chrome web client.

Steps:

1- Using desktopCapturer Electron 2- Share screen with audio 3- Another participant starts to talk. (As a result, hears themself)

Environment:

Windows 10 Electron ^9.2.1 desktopCapturer Electron

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 11
Comments: 63 (12 by maintainers)

Most upvoted comments

@dx200010 If possible, can you please provide your code snippet or repo with working example.

Firstly, please make sure you have downloaded full source codes of electron by following official build instruction.

Find the UserMediaProcessor::CreateAudioSource() in third_party/blink/renderer/modules/mediastream/user_media_processor.cc and change below if-block

  if (blink::IsScreenCaptureMediaType(device.type) ||
      !blink::MediaStreamAudioProcessor::WouldModifyAudio(
          audio_processing_properties)) {

  if (//blink::IsScreenCaptureMediaType(device.type) ||
      !blink::MediaStreamAudioProcessor::WouldModifyAudio(
          audio_processing_properties)) {

Then build a modified electron from source, and use this modified electron to build your own application.

Now, you can enable echo cancellation by inserting the constraint like below.

navigator.mediaDevices.getUserMedia({
    audio : {
        mandatory: {
            echoCancellation: true,
            chromeMediaSource: 'desktop'
          }
    },
    video :
    {
        mandatory :
        {
            chromeMediaSource : 'desktop'
        }
    }
})

dx200010 on Jul 30, 2021

I’d like to add that this is something that already works in some popular Electron apps (eg. Discord, Teams). It would be nice to have it implemented properly upstream as well.

asineth0 on Oct 13, 2021

I’ve just built Electron by myself with the proposed patch and I can confirm that it works like a charm with the demo app from @Apak00! Thanks for your great effort to discover this @Apak00 !

Guys, it would really help so much if you could implement this in the officially build. I’d suggest to simply evaluate the (in this case unused) echoCancellation: true constraint.

@codebytere, I could try to build a pull request, if you want me to, but I guess you guys will be 100 times faster than me. I have no experience in contributing to the Electron code base.

berkon on Jun 14, 2022

If we definitely can’t switch to getDisplayMedia(), wouldn’t it be possible to add a temporary method to enable the workaround proposed by @dx200010 explicitly until a final solution is implemented? I could think of a:

command line switch
getUserMedia() constraint
environment variable
etc.

This would be very helpful!

berkon on Apr 22, 2022

Would be great to get this merged in

kiritnarain on Dec 2, 2021

@berkon Could you provide an adapted demo?

bukharin on Nov 3, 2022

You were absolutely right @nornagon! I adapted @Apak00 's demo and it works fine now. As you said, it is important to add the handler in Main. So I guess this issue can be closed once Electron 22 is released.

berkon on Nov 3, 2022

@nornagon, I tried to use getDisplayMedia() with Electron 22.0.0-beta.1. But I’m getting Uncaught (in promise) DOMException: Not supported

berkon on Nov 2, 2022

I guess you are looking for ‘electronDist’ property on electron-builder configs, here; https://www.electron.build/configuration/configuration.html

Apak00 on Jun 16, 2022