Sharing your own tab

🎻 June 2021 fiddle

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.

Resources

• Code: https://jsfiddle.net/fippo/hqnoj63e/10/
• webrtcHacks’ Using getDisplayMedia for local recording with audio on Jitsi
• How things are currently implemented
• How things will eventually be implemented

Transcription

Tsahi: Hi and welcome to the WebRTC Fiddle of the Month. This time we’re going to enjoy ourselves and we’re going to talk about sharing your own tab.

Why we’re going to enjoy ourselves? Because part of this fiddle of the month is going to be how standard bodies can make weird decisions. So in order to start, Philip, can you share a screen and let’s see what you’ve got for us today?

Philipp: Yes, today we have an experimental API. So the first thing you need to do if you want to play with that API is you need to go to chrome://flags and enable the “Experimental Web Platform features”. You can search for it on the top. And then you get this API call, getCurrentBrowsingContextMedia().

Tsahi: That’s a mouthful.

Philipp: Yes, it has changed the name at least once.

Tsahi: OK, and what does that API do?

Philipp: It allows you to share your own tab. So if you want to do things like record the meeting locally, using the MediaRecorder API

Tsahi: I see that we’ve got a button here – GetDisplayMedia. Can you click that one?

Philipp: Yes, so GetDisplayMedia is a standard, getDisplayMedia() API.

Tsahi: Oh, I’ve got a picker here. Go to Chrome tab.

Philipp: Yes, well, let’s first talk about what we see, we see 3 choices: screen, window and chrome tab, which lists a bunch of tabs.

Tsahi: OK, the first one here in this case is, well, this tab. So now we’ve added a new API, which does the same.

Philipp: Almost: You can control what is in this picker using the title attribute of the HTML page.

Tsahi: OK, so go GetCurrentBrowsingContextMedia button.

Philipp: You’ll notice we get a slightly different picker.

Tsahi: OK, so we’ve got this tab, other tab which will show all the tabs, again, the same as chrome tabs on the other API.

Then we’ve got window and entire screen.

Philipp: Yes but the order is basically reverse – right to left instead of left to right.

Tsahi: They added a new API to do the same thing with reverse order and just take this tab and put it on its own picker just to make things more confusing.

Philipp: Yes. The problem is that if you look at statistics for what users choose with getDisplayMedia(), most of the time they choose the entire screen.

Tsahi: It’s easiest. Less headaches.

Philipp: Apparently you can do a double click on this one because “security”.

Tsahi: And you need to select it.

Philipp: Yes, so you you just can’t “Share”. You need to click it and then click “Share”.

Tsahi: OK, so now that we are happy. And what does getCurrentBrowsingContextMedia() can do besides just having a different set of windows in the picker?

Philipp: Well, it’s mostly about the different setup of windows in the picker are choices.

We can also do audio sharing, which we can try now so we are going to run the fiddle again.

Tsahi: OK, but that works also with getDisplayMedia().

Philipp: Yes. And if you include audio, you get this checkbox here where the user can choose whether to share audio or not. The user can unselect it.

Tsahi: It’s funny, here sharing audio is opt out, not opt in.

Philipp: Yes.

Tsahi: And I cannot do opt in of sharing audio.

Philipp: Not really, because that’s what the application asks for.

Philipp: You can’t share audio only. Which is weird, and if we go to the other tab you can share your audio as well and I am on Linux, so on this operating system, I can’t share the audio from a window or the entire screen, which means the option is not available here.

Tsahi: Simply because they’re not using the correct device drivers or security on Linux or whatever.

Philipp: Yes. Which gets confusing. I mean, if you’re a user and get asked to share your audio and you get a screen, you would be like, where do I share my audio? Oh, oh, oh. There I can share my audio. And here sharing audio is off by default.

Tsahi: Oh, that’s great. So let’s see, we’ve got we’ve got the following. I am building an application. I can put my share screen button anywhere I want. Let’s say a green button at the middle bottom center of the screen. I don’t know, like some kind of an application does. I can make it blue to the left side. I can call it “Present” and put it somewhere at the top like another vendor does. So the first thing I need to do as a user is search the sharing button of the application on the screen.

Once I’ve done that, if I click that there is not going to be an obvious selection for me of what to choose, because if the developer decided to use getDisplayMedia() it will start with sharing the screen – the entire screen. But even then, I will need to pick that. So that’s three clicks away. But if the developer was “adventurous”, then I would end up with this picker, which starts with a tab and ends with the entire screen.

Philipp: Yes, and note that you need to select this tab before you can share it.

Tsahi: Obviously, that you can’t give users too many things to make this easy for them. And then if the developer use getDisplayMedia(), then audio sharing is opt in. And if I mean, if the developers getCurrentBrowsingContextMedia(), then audio sharing is opt out

To sum things up: if anyone in the standardization bodies wanted to make something complicated, they successfully done that with these APIs.

Philipp: Yes.

Tsahi: If you are a developer and you want to use sharing, you need to decide if you want to use getDisplayMedia() or getCurrentBrowsingContextMedia() or whatever the name will be half a year from now and see what works best for your users.

Philipp: Yes, and typically you want to measure what the users choose and you can actually do that quite easily because we see in the JS console, which might not be shared. You can see the label here. You can see, oh, this is a current WebRTC content, whereas if we go for a window and it typically includes that. We have a “window, something, something, something”

Tsahi: So that will be a different label for the MediaStreamTrack object.

Philipp: Yes. OK, and for the entire screen, we have “screen”. So you can do some kind of analytics on what users are sharing and I’ve seen that with getDisplayMedia(), most of users were sharing this entire screen.

Tsahi: That’s the easiest – you don’t need to think a lot. But you still need to have three clicks in order to do that.

Philipp: Yes.

Tsahi: OK, so thank you. And soon, our next fiddle!