# mediasoup screen sharing with audio

**URL:** <https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461>\
**Category:** mediasoup libraries\
**Created:** [August 30, 2023, 3:42pm UTC](https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461 "2023-08-30T15:42:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lrdevelop](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/lrdevelop/32/2249_2.png) [@lrdevelop](https://mediasoup.discourse.group/u/lrdevelop)\
**Post date:** [August 30, 2023, 3:42pm UTC](https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461/1 "2023-08-30T15:42:44Z")

</div>

I can share the screen normally.  
But how do I share the screen and capture audio from the shared screen?  
For example, I share a youtube tab playing a playlist, and for users who enter the room to be able to hear the audio coming from that share

I tried this approach below but to no avail. Do I need to define any other parameters?

 ![image](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/2X/1/192604f29efcca2259a3ab6b82979ccd96c06422.png)

 ![image](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/2X/7/7eefc2f17de533316678d4685465cda765b0a92e.png)

Could someone please advise me on this.  
Thank you very much in advance!

---

<div class="post-metadata">

**Author:** ![zaidiqbal](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/zaidiqbal/32/1498_2.png) [@zaidiqbal](https://mediasoup.discourse.group/u/zaidiqbal)\
**Post date:** [August 31, 2023, 5:35am UTC](https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461/2 "2023-08-31T05:35:15Z")

</div>

It should be the same as simple video/audio. First thing to get is the share screen stream with audio which I think you are getting.

After that you will have 2 tracks first is the share screen video track and second one is share screen audio track. You will have to produce these 2 tracks instead of one track (which happens normally in share screen without audio).

After that consume both tracks on other side. Done.

---

<div class="post-metadata">

**Author:** ![snnz](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/snnz/32/693_2.png) [@snnz](https://mediasoup.discourse.group/u/snnz)\
**Post date:** [August 31, 2023, 6:51am UTC](https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461/3 "2023-08-31T06:51:59Z")

</div>

Capturing audio with `getDisplayMedia` is only supported by some browsers. And what is captured depends on browser and OS. So, forget it and just use `getUserMedia` to get an audio track, unless you have some very specific task in mind.

---

<div class="post-metadata">

**Author:** ![zaidiqbal](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/zaidiqbal/32/1498_2.png) [@zaidiqbal](https://mediasoup.discourse.group/u/zaidiqbal)\
**Post date:** [August 31, 2023, 6:54am UTC](https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461/4 "2023-08-31T06:54:42Z")

</div>

Good point. But with getUserMedia he will not be able to capture the audio of that specific screen, i.e youtube tab, he wants to capture using getDisplayMedia.

He will have to do this only on supported browser and leave those which don’t support it.

---

<div class="post-metadata">

**Author:** ![snnz](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/snnz/32/693_2.png) [@snnz](https://mediasoup.discourse.group/u/snnz)\
**Post date:** [August 31, 2023, 12:32pm UTC](https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461/5 "2023-08-31T12:32:41Z")

</div>

Well, even with the browsers that support the feature, it’s not necessarily the audio of specific screen that is captured.

> **[MediaDevices API: \`getDisplayMedia()\`: Audio capture support | Can I use......](https://caniuse.com/mdn-api_mediadevices_getdisplaymedia_audio_capture_support)**
>
> "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

---

<div class="post-metadata">

**Author:** ![zaidiqbal](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/zaidiqbal/32/1498_2.png) [@zaidiqbal](https://mediasoup.discourse.group/u/zaidiqbal)\
**Post date:** [August 31, 2023, 2:32pm UTC](https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461/6 "2023-08-31T14:32:11Z")

</div>

I see, just read that. Quite unexpected feature. I hope in coming years it will get even support on browsers.

---

<div class="post-metadata">

**Author:** ![BronzedBroth](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@BronzedBroth](https://mediasoup.discourse.group/u/BronzedBroth)\
**Post date:** [August 31, 2023, 9:07pm UTC](https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461/7 "2023-08-31T21:07:46Z")

</div>

Mobile browsers don’t really support screen share, so we can probably disable that for most part there. For desktop users the browsers all vary with how they work, it’s preference base but they all work the same way for acquiring the video/audio track.

Essentially when you get the stream from a screen-share it will always contain video, audio is optional so we just perform a getAudioTracks check and if it’s valid we produce that as well.

Here’s an example, may not be correct…

```auto
const startScreenSharing = async () => {
  const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
  
  const transport = await createTransport();
  const videoProducer = await transport.produce({ track: stream.getVideoTracks()[0] });
  
  // Check if an audio track is available before creating an audio producer
  const audioTrack = stream.getAudioTracks()[0];
  if (audioTrack) {
    const audioProducer = await transport.produce({ track: audioTrack });
    // Send producer information to the server
    socket.emit('newProducer', { videoProducerId: videoProducer.id, audioProducerId: audioProducer.id });
  } else {
    // Send producer information to the server without an audio producer
    socket.emit('newProducer', { videoProducerId: videoProducer.id });
  }
};

```

I’d avoid itinerary conditions and simplify the functions till you sort this fully.

---

<div class="post-metadata">

**Author:** ![lrdevelop](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/lrdevelop/32/2249_2.png) [@lrdevelop](https://mediasoup.discourse.group/u/lrdevelop)\
**Post date:** [October 10, 2023, 10:26pm UTC](https://mediasoup.discourse.group/t/mediasoup-screen-sharing-with-audio/5461/8 "2023-10-10T22:26:28Z")

</div>

I solved the problem like this:

 ![image](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/2X/0/01b79205e6579ccae8a2a4054e336f217af616ca.png)  
Thank you very much for everyone’s response!