Escaping the hall of mirrors
🎻 March 2022 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
- The fiddle: https://jsfiddle.net/fippo/frzk095L/6/ & https://jsfiddle.net/fippo/frzk095L/6/show/
- Better alternative with Capture Handle
Transcription
Tsahi: Hi, and welcome to the Hall of Mirrors, or should we say WebRTC Fiddle of the Month. And this time, we’re stuck in the hall of mirrors, and we’re trying to figure out how we’re going to get out of it. So, Philipp, what exactly is the hall of mirrors?
Philipp: It is a problem that happens with screen sharing, if you display that the things that you’re capturing on your screen and capture the screen or the tab.
Tsahi: So this is something that all of us have seen. And I guess that the best way would be just to share your screen and show that?
Philipp: Yes.
Tsahi: So let me do that.
Philipp: And you can see I’m sharing my screen and we see a small version of my screen here.
Tsahi: Yes. I can count at least four of you on the screen at the moment.
Philipp: Yes, and it can get much worse even. You can see if I move around, it will move around inside. And it’s very confusing for users. So you probably have seen it often or are getting complaints about it. And there is a bit we can do about it. And that’s what we want to show this time.
Tsahi: Okay, let’s start.
Philipp: Yes. Let me switch to the fiddle. So we are using the fiddle in the show mode this time because that is a bit better at showing how the stuff works.
Tsahi: You are going to need to kill it and you can’t do it from there. Now it’s all stuck. Look, I have to have you now!
Philipp: Yes.
Tsahi: This is the best hall of mirrors. Let’s kill the other two.
Philipp: So now we’re back hopefully.
Tsahi: Yes. And we’re back to the hall of mirrors.
Philipp: Yes. So let’s run this fiddle. Select the tab and hope it works this time. Fingers crossed. Perfect.
Tsahi: Okay.
Philipp: It worked. So we have a great hall of mirrors effect, we have one, two, three, four, five, six, seven, eight, nine, let’s say 16 or 20.
Tsahi: Enough to solve it.
Philipp: So there’s enough. But we wouldn’t want to show so we need to make this thing lose focus. And then if we click again on the tab to give it focus, what we’re going to do is we know that the user is interested in this tab and that they are confused by the hall of mirrors so we show them something else and not the screen share in this case.
Tsahi: Something like, “You’re screen sharing” that I see sometimes in apps.
Philipp: Yes, I use the coat lab picture we had because it was freely available.
Tsahi: It was there. Okay.
Philipp: Yes. Okay, I’m going to stop sharing this one, not the screen, and going to make the fiddle larger. And it is pretty simple actually. We have the focus event, which tells us whether the user focused the window or clicked on another window and we lost the focus. If the user is focusing the window, we get the focus event. And in this case, we are setting the display video element so subject to now, here, and we also have a text that explains it. And that means that the post the image is shown in our case.
Tsahi: Okay.
Philipp: What we might do instead is to make that display black and a bit more opaque, which is a very common thing to do that we see services like Google Meet do.
Tsahi: Okay.
Philipp: Yes, and the opposite of that is the blur event where we just restore this thing.
Tsahi: Which means that I’m now not focused on data and I can now go and share the screen there or share whatever I’m sharing from the tab there.
Philipp: Correct.
Tsahi: Now, why would I want to show that anyways?
Philipp: Well, the user wants some feedback about what they are sharing but they just really hate the hall of mirrors effect. And this is one way to at least reduce the impact.
Tsahi: Okay.
Philipp: And the rest of this fiddle is pretty standard – button, onclick, we call getDisplayMedia() and set the display source object to the stream.
Tsahi: Okay.
Philipp: Good. So this is an okay-ish user experience, but there is a better API that’s called Capture Handle that will be allowing to deal with this even more efficiently and avoids this problem even more.
Tsahi: How so?
Philipp: It lets you improve the detection of whether you’re sharing the current tab to the current tab.
Tsahi: Okay.
Philipp: And that is something that is currently in the W3C and there are lots of discussion around it. So it’s sadly not yet available in Chrome by default.
Tsahi: Okay. And you can follow the discussions also in the links that we have for this video this month.
Philipp: Yes.
Tsahi: Okay. So, I guess we’ll leave the hall of mirrors now and we’ll meet next month on a new fiddle.
Philipp: Yes, see you then.
Tsahi: Bye.