Best practices in Electron-based desktop development for WebRTCArnaud BudkiewiczSr Director of Video Engineering, W3C Member@ArnaudBud

1. Confidential ©2021 RingCentral
November 18, 2021
async function call_ringout() {
try {
var resp = await
platform.post('/restapi/v1.0/account/~/ex
'from': { 'phoneNumber': RINGCENTRA
'to': { 'phoneNumber': RECIPIENT },
'playPrompt': false
})
var jsonObj = await resp.json()
console.log("Call placed. Call status
jsonObj.status.callStatus)
} catch (e) {
console.log(e.message)
}
}
Best practices in Electron-based
desktop development for WebRTC
Arnaud Budkiewicz
Sr Director of Video Engineering, W3C Member
@ArnaudBud

2. 2 ©2021 RingCentral
ON MOBILE
40
An average person
has 40 apps
installed on his
phone.
18
Out of that 40
apps, 89% of the
time is split
between 18 apps.
People love apps!

3. 3 ©2021 RingCentral
ON DESKTOP
App Stores
even if both Apple
and Microsoft
have their store to
extend users'
appetite for apps,
Businesses
the behavior is
different from
mobile, and
businesses want
full control on
what users install
on their devices.
People love apps!

4. 4 ©2021 RingCentral
WebRTC runs in browsers,
but what if you want to build a desktop app?
PWAs (Progressive Web
Applications)
is a quick and easy way to distribute
your Web app on the Windows Store,
get it “installed” on a PC or a Mac
But the most popular way remains
Electron

5. 5 ©2021 RingCentral
Who are the major apps that are
using Electron?
● Microsoft Visual Studio Code
is a reference
● for RTC applications?
○ Slack
○ Facebook Messenger
○ WhatsApp
○ Skype
○ Microsoft Teams
○ Jitsi powered by 8x8
○ Streamlabs OBS
○ Discord
○ …
○ And RingCentral of course

6. 6 ©2021 RingCentral
The “simplest” way to build from a Web App
a desktop app for Windows, Mac, and linux.
myElectronApp =
f(Electron, myWebApp, myNativeModules)
So what is Electron?
Electron = Chromium (WebRTC) + nodeJS
myDependencyTree is:
● myElectronApp
○ myWebApp
○ myNativeModules
○ Electron
■ Chromium
● WebRTC

7. What can go
wrong with
Electron?

8. 8 ©2021 RingCentral
myWebApp has ONE MORE browser to support: myElectronApp
● Triggers different UX (screen sharing), different portion of code
(myNativeModules), different features
● always older than the latest Chrome or Edge,
● not 100% exactly Chrome
● must be integrated and tested with myNativeModules
myNativeModules expose another API to myWebApp
● but have different implementations Windows, Mac
● and hardware specificities (GPUs)
● usually work with only one given major version of Electron
● to be tested multiple times, as a component, with an integration test app, end-to-
end with multiple versions of myWebApp
What can go wrong with Electron?

9. 9 ©2021 RingCentral
Upgrades!
● Pain points
○ Both myWebApp and myElectronApp can be upgraded separately
○ But they have different methods of deployment (app server upgrade vs IT
package)
○ myElectronApp usually requires a restart, to reload the native modules, and
expose the new API
● So there is a solid upgrade experience to build, to not disrupt the user, but
guiding him through the upgrade
What can go wrong with Electron?

10. 10 ©2021 RingCentral
Dependencies
● S**** happens and this is a complex onion to debug
● Depending on where is your bug you may need to talk to different groups
● Electron
○ GitHub to report the issue
○ Slack and Discord to socialize/discuss it
○ only 3 versions of Electron are supported
● Chromium
○ Electron can cherry pick a few minor releases of the same version of Chromium
○ only 3 versions of Electron are supported
● WebRTC
○ The hardest one as you need to touch all the layers
○ Depending on various factors, your fix maybe back ported, maybe not
○ Understand which minor version(s) of Chromium will contain your fix
○ Push the Electron community to take the minor Chromium release
What can go wrong with Electron?

11. 11 ©2021 RingCentral
Understanding the entire release cycle
Electron Cadence Changed
● 12-week → 8-week release cadence
● Every other Chrome version (even numbers)
● Starting with E15 (M94) on September 21
● Increase in supported Electron versions from
3 → 4 until May’22 (E19)
Why?
● Chromium has moved to a release every 4
weeks, starting with M94 (Sept 21).
● Microsoft Store requires Chromium-based
apps to be no older than 2 major versions.
This policy includes Electron apps.
● More frequent releases = smaller releases
Quicker to get Chrome fixes/feature

12. 12 ©2021 RingCentral
Understanding the entire release cycle
Upcoming Release Plan
Supported Versions Plan

13. 13 ©2021 RingCentral
Bug tracking exemple
WebRTC
For instance, you need this bug fixed:

14. 14 ©2021 RingCentral
How to identify the release train of a commit in
WebRTC/Chromium/Electron/myElectronApp?
WebRTC
1. Find the patch submission:
1. Get the commithash
○ in the patch submission (f288f5b2d41d6810428f6ec9bc646ace8a9edeca)
https://webrtc.googlesource.com/src/+/f288f5b2d41d6810428f6ec9bc646ace8a9edec
a
○ or in the Issue tracker if they have been linked together, you'll find a
comment from bugdroid
https://bugs.chromium.org/p/webrtc/issues/detail?id=11957#c4

15. 15 ©2021 RingCentral
How to identify the release train of a commit in
WebRTC/Chromium/Electron/myElectronApp?
WebRTC
3. Enter it into cdash:
https://chromiumdash.appspot.com
And Voila!

16. 16 ©2021 RingCentral
How to identify the release train of a commit in
WebRTC/Chromium/Electron/myElectronApp?
WebRTC
4. Sometimes there is a backport in the current stable release, like here:
4. Repeating the same steps will give you the minor release in cdash:

17. 17 ©2021 RingCentral
How to identify the release train of a commit in
WebRTC/Chromium/Electron/myElectronApp?
Electron
Now, where this commit landed in Electron?
A quick look at major release notes will tell you which version to look at. In the
current example, E11.
Here you can find the release notes of all the minor releases of E11:
https://www.electronjs.org/releases/stable?version=11
In that case, Electron 11.0.0 already contained the fix we are looking for
https://www.electronjs.org/releases/stable?version=11&page=6 shows Chromium
87.0.4280.47
Sometimes Electron also cherry-pick some Chromium patches, mostly security:
https://www.electronjs.org/releases/stable?version=11&page=2#11.4.8

18. Best Practices

19. 19 ©2021 RingCentral
Test, Test, Test!
● Test all your upgrades, combinations, your backward compatibility
● Test your performance, your media quality, during dev, regression, in production
● Test Electron Betas
Best practices in Electron-based desktop development for WebRTC
Upgrade
● Upgrade as fast as you can on the latest Electron stable version
Custom
● Go with a Custom Electron strategy ONLY if you have the resources, dev and QA

20. 20 ©2021 RingCentral
Contribute back!
python tools/bisect-builds.py -a mac
-g M85 -b M86 --use-local-cache --verify-
range
1
2
3
https://webrtccourse.com
Best practices in Electron-based desktop development for WebRTC
Report issues
How to submit a WebRTC bug >>
● Bisect-builds.py
Where to report:
● github.com -- for Electron
● crbug.com -- for Chromium.
● bugs.webrtc.org -- for WebRTC native code.

21. 21 ©2021 RingCentral
Contribute back!
Best practices in Electron-based desktop development for WebRTC
Test experimental features
Example: RED
RTP Payload for Redundant Audio Data
● Extensive lab testing
● Internal User feedback
Source: RingCentral

22. Need to go
further?

23. 23 ©2021 RingCentral
Build your custom Electron
RC Electron features
● External capturer
Allows another team to develop screen capturer
without rebuilding electron
● Preload script in worker context
Allows to run native modules as audioworklet
● API to direct access to video frame payload
Allows to run native modules to apply video
effect/filters in breakout box
● API to create audio dumps for audio issues
investigation
RCV Web Client “Custom“ WebRTC
MediaStream
RTCPeerConnection
getUserMedia
MediaStream
Promise
Shared Screen
Capturing Library

24. 24 ©2021 RingCentral
Architecture Overview Comparaison
Teams 2.0 Moves Away from Electron to Embrace Edge WebView2

25. 25 ©2021 RingCentral
Architecture Overview Comparaison Electron WebView2
Build Dependency Chromium Edge
Source Available on GitHub Yes No
Shares Edge/Chrome DLLs No Yes (as of Edge 90)
Shared Runtime Between Applications No Optional
Application APIs Yes No
Node.js Yes No
Sandbox Optional Always
Requires an Application Framework No Yes
Supported Platforms Mac, Win, Linux Win (Mac/Linux planned)
Process Sharing Between Apps Never Optional
Framework Updates Managed By Application WebView2

26. 26 ©2021 RingCentral
Questions?
@ArnaudBud
developers.ringcentral.com

27. Confidential
Thank you.
Thank you.
@ringcentraldevs
developers.ringcentral.com
Friday, January 01, 2021
async function call_ringout() {
try {
var resp = await
platform.post('/restapi/v1.0/account/~/ex
'from': { 'phoneNumber': RINGCENTRA
'to': { 'phoneNumber': RECIPIENT },
'playPrompt': false
})
var jsonObj = await resp.json()
console.log("Call placed. Call status
jsonObj.status.callStatus)
} catch (e) {
console.log(e.message)
}
}