While browsers have greatly improved the user experience for screen sharing, plenty of tips remain to make for a unique experience. Eliminating the famed “hall of mirrors”, improved tab/application sharing and better presenter tools will be discussed here. Video: https://www.youtube.com/watch?v=l2e_Bh55C9s&list=PL4_h-ulX5eNeIL4yLojsBm8PgjomoW62E&index=5

1. Screensharing made easier
Arnaud Budkiewicz, Sr Director of Video Engineering, W3C Member

2. “Can everyone see my screen?”

3. “Screen sharing is broken”

4. How to make screen sharing great again?
1. Enhance your Desktop experience, that you control 100%
2. Work hard on Performance
3. Contribute: W3C, WebRTC, Chromium, Firefox, Webkit

5. Bring
confidence
before sharing

6. What do you want to share today?
Browser experience:
UX is too complex for most common use cases
● Tabs are non-discoverable
● 2 extra clicks are required
○ No selection by default
○ “Share” button not in focus by default
● Hitting “ENTER” make the picker window
disappear

7. What do you want to share today?
Desktop experience:
Screens and Applications listed in ONE screen
● No tabs
● No extra click is required
○ Screen #1 selected by default
○ “Share” button in focus by default
● Hitting “ENTER” starts sharing
Screen 1 Screen 2 Screen 3

8. Bring
confidence
while sharing

9. What are you really sharing?
Browser experience:
Non-customizable notification bar
● Moveable but in the way by default,
blocking presentation materials
● Is part of what is shared
● If you click “hide”, it’s difficult to get it back
“Hall of mirror” if the preview is too big

10. Desktop experience:
Halo around the shared screen/application
● Easy-to-find notch at the top of the screen
● Halo and notch removed from the video stream
No “hall of mirror”
● Application is automatically resized
in a small form factor
● and removed from the video stream
What are you really sharing?

11. Bring control
while sharing

12. Take control of the viewer experience
Browser experience:
With one screen,
It’s very complex to share screen,
see other participants,
and control your experience
at the same time:
1. Use tab sharing
2. Start slides presenter view
3. Exit the full screen mode
4. Adjust windows manually
No annotation on a full-screen

13. Take control of the viewer experience
Desktop experience:
Use the Presenter Mode from your favorite
Presentation application
The meeting window is removed from what
you share, so you can place it anywhere on the
screen and keep control of your experience
Annotate when you share your entire screen
or an application

14. Implementation

15. Vanilla Electron
Electron (Chromium + Node.js)
● Native Electron modules (C++)
● Part of the code is inside Web Application
Electron
Chromium
Node.js
Web App.
WebRTC
Capturer
Native
Module
Canvas
Frame
Frame

16. PROS:
● No Electron/WebRTC/Chromium patches
● Easy to switch to next Electron version
Vanilla Electron
CONS:
● A lot of unneeded code:
○ JS Wrappers
○ JS Callbacks
○ JS Timers
● Logic is scattered between JS and C++
● Executed in renderer process
○ JS processes throttled
Electron
Chromium
Node.js
Web App.
WebRTC
Capturer
Native
Module
Canvas
Frame
Frame

17. Modified Electron
Modify WebRTC, Chromium, Electron
● Implement custom features by
direct changes in WebRTC lib.
Electron
Chromium
Node.js
Web App.
JS
WebRTC
Capturer
Native
Module
Capturer
Native
Module

18. Electron
Chromium
Node.js
Web App.
JS
Modified Electron
PROS:
● Fully native implementation
● Executed in Main process
○ No JS engine
○ No throttling
● Better image quality
● Cutting-edge contributions from community
CONS:
● Maintenance of WebRTC patches
● Custom Electron builds
WebRTC
Capturer
Native
Module
Capturer
Native
Module

19. Performance

20. Performance on Windows
Power Consumption
● Native Capturer in Vanilla Electron
● Custom Electron is up to 2x better
● Close from WebRTC M87
Dell Precision 5510: i7-6820HQ @ 2.80GHz + Intel HD Graphic 530 + NVIDIA Quadro M1000M

21. Performance on Mac
MacBook Pro 15” Mid 2015: i7-4980HQ @ 2.80GHz + Intel Iris Pro
Power Consumption
● Native Capturer in Vanilla Electron
● Custom Electron is 2x better
● Close from WebRTC M87

22. What’s next?

23. In Major Browsers
● AV1 in M90+
● Share a portion of the screen
● And more to come...

24. RingCentral Overlay Mode
Web and Desktop experience
“Weather person” visual effect
● helps the presenter hold the audience’s
attention
● allows the audience to keep an eye on the
presenter while following the material
being presented

25. Questions?
@RingCentralDevs
developers.ringcentral.com

26. Thank You.