WebRTC, getDisplayMedia() does not capture sound from the remote stream

Andrew — Sun, 21 Feb 2021 13:17:16 +0000

Hi,everyone!

I have a web application, which is based on the peersjs library (It is a video conference).

I'm trying to make a recording with 'MediaRecorder', but I'm facing a very unpleasant case.

The code for capturing my desktop stream is the following:

let chooseScreen = document.querySelector('.chooseScreenBtn')
chooseScreen.onclick = async () => {
    let desktopStream = await navigator.mediaDevices.getDisplayMedia({ video:true, audio: true });
}

I then successfully apply my received desktopStream to videoElement in DOM:

const videoElement = doc.querySelector('.videoElement')
  videoElement.srcObject = desktopStream 
  videoElement.muted = false;
  videoElement.onloadedmetadata = ()=>{videoElement.play();}

For example, I get desktopStream on the page with an active conference where everyone hears and sees each other.

To check the video and audio in desktopStream I play some video on the video player on the desktop. I can hear any audio from my desktop but audio from any participant cannot be heard. Of course, when I put the desktopStream in MediaRecorder I get a video file with no sound from anyone except my desktop.It happens when I get desktopStream on the same page with conference, When I take out this functionality to another page, it works fine. Any ideas on how to solve it?

DEV Community: Andrew

WebRTC, getDisplayMedia() does not capture sound from the remote stream