Screen Share Mediasoup

Hello. I wanted to make a feature adding screen share, the problem I have at the moment is that Im saving producers and consumers in arrays when someone joins in room, so basically when u join in a room a producer and a consumer will be created. My goal is to add screen share. After I make a new producer how can I make such that others consume this media, I want to keep local video + screen share video. Thanks.

Both screenshare and normal broadcast are seen the same, a simple video and audio item. You will need to adjust your code to be okay with this.

1 Like

thanks for reply. Do you think I need to create a new producer for screen share first ? As I don’t see any other solution. Im creating producer when you join in a room like i mentioned , but when you click start screen share what should the logic be behind this ? Create new producer ? if yes how to add other peers to consume this media ? and peers that joins after I started screen share ? if you can give me any idea, thanks.

You will ideally want to open a new transport and produce to it the audio and video each and every time. Now when a user does join room you shouldn’t assume they will be producing; you should allow a user to later open transport and produce.

A tip, though you could produce two video and two audio to a single transport, you may want further server support so running more transports can be of benefit.

So to be clear, most people will want to handle this as such:

When you join a room, for each viewer you create a unique transport and consume audio and video to it. When you’re ready to broadcast whether it’s normal casting or screen-share you create your transports then. If you run screenshare and normal casting that should be two transports and a up-to 4 produces.

1 Like

thats correct , for each one that joins in room I create a producer and then if there is already one producer create consumer , basically each one joining in a room is a producer and a consumer, can I somehow use any part of this code to add screen share ? if not then I think I need to make everything from the begin , create transport for producing screen share and creating transport for consuming this media, thanks.

For camera stream you will need separate consumer and for share screen you need separate consumer, they both can be on same transport or you can create separate transport for each consumer streams. That all depends on your app. But what I have noticed is consuming all streams on one transport causes video lag related issues on struggling networks so you can go with creating separate transport for each consumer streams. Or you can go with creating one transport per user, so for one user’s camera, share screen stream there will be 1 transport that way there will be 9 consumer transports if there are 10 users in call.

For the producer streams it is recommended that you produce all of them on one transport for better bandwidth handling, so no need to create separate transport for producing camera stream and share screen stream.

Plus you don’t need to create producer whenever someone joins the room, it only needs to be created when someone joins with either video, audio on. There will be scenario when someone joins without audio, video both and in that case no producer need to be created on join.

Get your camera stream related stuff in full working then share screen consumption is no different from camera stream consumption in-fact server doesn’t care what type of stream it is, it just knows someone is sending some stream and someone is getting some stream. that is it.

You can go through the mediasoup demo app, it is available on github, you will find everything there. If I remember share screen was also there.

Hi thanks a lot for reply. Actually our idea is that you should have camera and audio if you want to join in the room otherwise you wont see anyone. So basically from what I understood when in room are 3 users and one of them clicks share screen I should create a producer if I shouldn’t then how to pass track of video screen share without showing browser capture permission ? Like I said you join in the room web asks you to capture audio video , screen share will happen after you are in the room with your video and audio. Take as example Google Meet , your video + screen share video

These should be the steps then:

On Join Call

  • Produce Video Track
  • Produce Audio Track
  • Consume video tracks of other users
  • Consume audio tracks of other users

During the call:

  • Consume any new producers during the call ( like someone joined in the middle of the call or someone shared the screen or someone turned off video camera and turned it back on etc)

Share Screen:

  1. For who is sharing screen:
  • Produce share screen track
  • Notify others that someone shared screen via socket etc
  1. For those who want to see shared screen:
  • They will get the event from server that someone shared screen
  • Then you can consume that track from server. This is same as “During the call” steps mentioned above.
1 Like

good explanation thanks man.

Glad it helped

1 Like

I would strongly suggest against forcing users to produce, this should always be optional when joining session. Handling the two types of stream a separate transport for both the audio/video. So if we have webcam+mic and screenchare + audio that’d be two transports and for each viewer another two (each).

With some platforms like iOS, there’s the need to request audio/video persmissions through GUM atleast once to be able to auto-play each video when you subscribe. So for that, I would say before user joins room to do a permission check of their devices quickly whether they use the devices or not and explain to user this is required for auto-play.

2 Likes

I appreciate your advices. For IOS I may have to try something like you mentioned because I have noticed that problem recently , thanks :slight_smile:

I recently faced this issue on ios devices for audio auto-play specifically. For ios, mac I show popup alert which have a button which says “Join using system audio”. On click on that button I play the audios and it works. Same like zoom, I think zoom have this thing for this purpose.

It’s hacky, if you guys still struggling with auto-play let me know, I got it down to a science right now but just know browsers can destroy this ability.

Interesting, my solution is working good so far, the issue was only with audio, not video. If you can share it here that will be great otherwise will ping you in new topic for this if needed, thanks.

Start a new topic featuring auto-play to go in-depth. There’s a lot of tactics from JavaScript/HTML fixes.
(auto-play is the problem and ensure you keyword that to help all).

Thanks