Create a Linux desktop app for the RingCentral Video web app with Electron.js

For most apps, they only provide web apps for Linux based OS, not desktop apps. But web apps are not as convenient as the desktop. So how can we transform a web app into a linux desktop app quickly? In this article, I will show you how to create a linux desktop app for the RingCentral Video web app with Electron.js.

Prerequisites

1. RingCentral Video web app: https://app.ringcentral.com/
2. Electron.js
3. NPM or Yarn (We assume you have installed node.js > 10)

Init Electron project

Follow Electron.js quick start to have a blank project:

Init project:

$ yarn init
$ yarn add electron --dev

Add start script in `package.json`:

{
  "scripts": {
     "start": "electron ."
   }
}

And create blank file: main.js and preload.js.

We will have these three files:

electron-app-with-rc-video/
├── package.json
├── main.js
└── preload.js

Load RingCentral Video web app

We will create a `BrowserWindow` instance to load RingCentral Video web app:

We create a session from partition to persist local data in RingCentral Video web app, and setup preload.js into the window, so we can inject some code into the web application.

Now we can start electron app:

$ yarn start

After login, we now have the messages feature working.

Show unread message count at dock icon

As a desktop app, we can now show the unread messages count on the dock icon.

First, we use `preload.js` to get the unread count from the page title. Then send the count to the main process.

In the main process the app receives the message and sets the badge:

const { ipcMain } = require('electron');
ipcMain.on('show-notifications-count', (_, count) => {
  app.setBadgeCount(count);
});

Open link in default browser

Add the following code in `main.js` createMainWindow function:

With this the app will open link in the message with the system default browser.

Customize browser user agent string:

In the RingCentral Video web app, it checks the User-Agent string, and has some special behaviors when there is anElectron string at the User-Agent. But it makes our apps’ meeting feature break.

So we need to customize the User-Agent.

So now we can have the video meeting feature working in the app as well:

Support screen sharing

Electron doesn’t implement `navigator.mediaDevices.getDisplayMedia` as Chrome. So we need to implement it — some instructions are here.

So now we can have the screen sharing feature at meetings.

Package app with electron builder

After development, we need to package this app, so users can install it easily.

We use electron-builder to package it:

$ yarn add electron-builder --dev

Create `electron-builder.yml`:

Add scripts command into `package.json`:

{
  "scripts": {
    "start": "electron .",
    "package-linux": "electron-builder --linux"
  },
}

To package for a linux platform:

$ yarn package-linux

More Information

You can get the full source code here. I have also packaged this app for Linux users, you can go here to download and try it out. Please let us know what you think by leaving your questions and comments below. To learn even more about other features we have make sure to visit our developer site and if you’re ever stuck make sure to go to our developer forum.

Want to stay up to date and in the know about new APIs and features? Join our Game Changer Program and earn great rewards for building your skills and learning more about RingCentral!