Browser-based audio/video solutions are always easy to conduct meetings, seminars, and webinars. Participants can quickly join these meetings using just the browser on their devices.
This works well for most companies that need an audio/video solution. Still, there comes a time when companies want even more functionalities that require low-level control of a participant's machine, such as remote control of a participant's device, to fulfill their use cases.
Browsers do not natively allow such controls because of security constraints. It will unleash chaos if browsers start allowing such a thing without security constraints and the proper mechanism of granting access. So far, browsers do not ship any such solution out of the box, and even with browser extensions, you cannot achieve the same completely. On top of that, it would become complex to maintain.
We at Dyte believe in simplicity and giving full customization to our clients, and we don't want to be too intrusive as a video SDK.
In such a case, we realized that a desktop app would be the best solution for us and our clients. Such an app can go beyond just the remote control and accommodate many more functionalities, use cases, and even more sectors.
There are a lot of sectors that could benefit from such a solution. An EdTech firm that mentors students in their interview preparations and problem-solving can make their sessions smooth using such a solution. A technical support provider firm can discuss and fix the issue on the same call/meeting without asking non-tech people to install a lot of additional software — executives can perform installations of additional software as needed.
Many technologies allow you to build desktop apps, but one stands tall and allows you to reuse nearly all the content of your website without having to rewrite it from scratch. That is Electron.
Electron is a free and open-source software framework developed and maintained by GitHub. The framework is designed to create desktop applications using web technologies that are rendered using a version of the Chromium browser engine and a back end using the Node.js runtime environment.
The beauty of Electron is that it uses Chromium (Similar to Google Chrome, Brave, and Edge) and NodeJS runtime. This means that any new functionality introduced on a web-based solution could efficiently work out of the box without having to rewrite it for a desktop app. Devs no longer have to switch languages; hiring an additional team just for a desktop app is unnecessary.
In Electron's own words:
Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience is required.
This saves a lot of development time for us as well as for our clients. Our clients now don't have to test their solutions on various browsers; a single solution could work on all sorts of PCs.
Dyte's Electron SDK
To integrate Electron SDK, the first thing that we need to have is an Electron app for your product. If you have it, then well and excellent. If you are new to Electron, please head over here to see how you can have a desktop app without much of a business logic change. Once done, please continue.
We assume that you are done with your Electron app for your product, which has no Dyte integration yet. The next step would be to have a Dyte meeting with a participant token. If you already have the Dyte integration but without Electron SDK integration, then please skip most of this section.
If you don't have the usual web-core & ui-kit Dyte integration, Make sure you've read the Getting Started with Dyte topic and completed the following steps:
- Create a Dyte Developer Account
- Create Presets
- Create a Dyte Meeting
- Add Participants to the meeting
Now pick the frontend web-core & ui-kit SDKs of your choice out of https://docs.dyte.io/react-ui-kit, https://docs.dyte.io/angular-ui-kit, or https://docs.dyte.io/ui-kit. All this code would need to be added to your renderer process's code. Please refer to this for the sample to integrate the same if you use React.
Once done, you will have the integration in which audio and video calls will work. However, you might be seeing that the screen share is not working. This is where the Electron SDK comes into play. Once you integrate Electron SDK, it will also start working.
Let's dive deep into Dyte's Electron SDK.
Our Electron SDKs are binding on top of our existing fully customizable web-core & ui-kits.
With Electron's multi-process architecture Electron Process Model, you would have three sections that we most care about:
- Main process
- Preload scripts
- Renderer process
The main process is the one that is close to the underlying operating system, thus giving us the ability to control the peripherals and operating system resources. For simplicity's sake, the code that gets executed in the main process can control the mouse and keyboard on the user's behalf.
The renderer process is similar to the browser process that you usually have. This has the least control available to it. However, it is responsible for showing your desktop app's UI.
Preload scripts are the ones that create a bridge between the renderer and the main process to allow the browser to do stuff that they were earlier not capable of, such as moving the actual mouse cursor using JS code.
With Dyte SDKs, we already handle the renderer side of changes in web-core for you to avoid complexity on your side. However, main and preload require minor changes on your side to integrate the Dyte Meetings.
You can now integrate our Electron SDK into your Electron app with just a few extra lines.
First and foremost, install the Dyte Electron SDK in your existing electron project.
npm install @dytesdk/electron-main
npm install @dytesdk/electron-preload
Now that you have the packages let's start with the code change.
Required changes on the Main process's code
In your electron app setup, you would have at least an electron import in the main, such as
import { ... } from 'electron';
Change it to import ipcMain and desktopCapturer as well.
import { app, BrowserWindow, desktopCapturer, ipcMain, shell, Menu, session } from 'electron';
Now add the below two lines to initialize Dyte's main Electron SDK. That's it.
import { DyteElectron } from '@dytesdk/electron-main';
DyteElectron.init(ipcMain, desktopCapturer);
Required changes on the preload scripts
In your Electron app setup, you would have at least an electron import in the preload, such as
import { ... } from 'electron';
Import ipcRenderer and contextBridge as well, if not imported already.
import { contextBridge, ipcRenderer, shell } from 'electron';
Now add the below two lines to enhance the renderer using Dyte's preload SDK. That's it.
import { DyteElectronRenderer } from '@dytesdk/electron-preload';
DyteElectronRenderer.init(contextBridge, ipcRenderer);
That's all you have to do to integrate our Electron SDK.
NPM Package Links
Here are the NPM Links for our SDKs:
https://www.npmjs.com/package/@dytesdk/electron-main
https://www.npmjs.com/package/@dytesdk/electron-preload
Samples
To showcase full-fledged integration with Dyte SDKs, including web-core & ui-kit, we have created a few sample apps that you can find at Dyte Electron Samples. We keep updating these with new samples periodically.
If you haven't heard about Dyte yet, head over to dyte.io to learn how we are revolutionizing live video calling through our SDKs and libraries and how you can get started quickly on your 10,000 free minutes, which renew every month. If you have any questions, you can reach us at support@dyte.io or ask our developer community.
