Sharing screen + microphone together

🎻 July 2020 fiddle

Source: https://jsfiddle.net/fippo/v8s3upyf/9/

Want to learn more about WebRTC?

Look us up here for the WebRTC Fiddle of the Month, created… once a month.

Or just enroll to one of our excellent WebRTC training courses.

Transcription

Tsahi: Hi, everyone, and welcome to the WebRTC course and what we’re going to do now is the “Fiddle of the month” where we are going to share a question and an answer once a month with jsFiddle. This time, what we want to do is to talk about how can we do screen sharing with audio only, OK? It’s great that we’re doing video calls Fippo and record this, but I know how you look like and I’m tired of seeing people over video all the time.

And sometimes the only thing that I want is to be able to share my screen and share my voice. And we don’t need to see each other. And for that reason, I want screen sharing, plus my microphone. How do I do that?

Philipp: Let me show you.

So we are using today jsFiddle for these things because it’s very easy to run stuff in there. Very limited. You just get HTML, a box, a JavaScript box and an output box.

Tsahi: And by the way, below the recording, you’ll see the link to this jsFiddle so you can play with it and also copy the code.

Philipp: Right. So we’re doing just a single button here, which is has an ID start, the text of the button is “share” and you can see the button down here.

Tsahi: OK

Philipp: So we’re adding an onclick handler to this button, which is an asynchronous function so we can use await. And we’re getting a steam there by calling our getScreenshareWithMicrophone helper.

Tsahi: OK. So this is the function that I would need to copy+paste.

Philipp: Let’s look at what this gets controller’s microphone does.

So it calls first navigator.mediaDevices.getDisplayMedia. With video, set to True. That will shows the screen sharing picker in the browser that lets to user choose a “thing” to share, which might be either a screen, a window or a tab. And then we call navigator.mediaDevices.getUserMedia with just audio. And we get another stream from that.

Tsahi: OK, so now have two streams and I somehow need to combine them so that they are on the same peer connection at the end of the day.

Philipp: Yes. In the past this was a bit more confusing because we used to use getUserMedia with screen sharing as well. But now we have getDisplayMedia so it’s a bit easier to understand that we’re doing different things and getting different kind of streams from that.

Tsahi: OK.

Philipp: So we combined these by just creating a new MediaStream object. And that is created from the first audio track of our audio stream. This one. And then the first track of our videos. Or Screen sharing stream.

Tsahi: So then I have a new media stream with audio and video and can go and latch on to my peer connection to start that connection.

Philipp: Exactly.

Tsahi: OK. And what happens if you click the share button?

Philipp: Well, let’s try.

Tsahi: OK. So I got this popup in the wrong language that I can’t really read.

Philipp: Yes. You can share your whole screen, share a window or share a Chrome tab.

Tsahi: OK, can we pick one of these? While we’re actually sharing your screen with me on something else for this recording?

Philipp: That works because it’s not like anything else is using That. So now we have two. Oh. Interesting. There should have been a way to do that against this thing that we see at the bottom here.

Tsahi: There is one of the top for the tab.

Philipp: Oh, right. Top sharing has a different UI.

Tsahi: OK.

Then I guess that it didn’t pop up the “Allow audio” because you were already sharing that for jsFiddle from stuff that you’ve done before.

Philipp: Yes.

Tsahi: OK. So we should have had two pop ups, one for screen sharing and then one for the audio. OK.

Philipp: And we see got a news media stream. There’s two tracks.

Tsahi: OK. Great! Thank you Philipp and see you next month, in “fiddle of the month.”

Philipp: Yeah. See you.