How to develop a cross platform video conference application with electron + webrtc

Time:2021-7-20

Many small and medium-sized companies often face the choice between PC client and web client when setting up online education, medical treatment, video conference and other scenes. The emergence of electron technology solves this problem, and only the front-end development can complete a cross platform PC application. This paper mainly introduces the technical scheme of building cross platform video conference application with electron + webrtc.

Author Jun Qi

Proofread Taiyi

What is electron?

Electron uses JavaScript, HTML and CSS to build cross platform desktop applications(Link to official website

Why use electron?

At present, many small and medium-sized companies do not have the ability to develop on PC, generally only mobile development team + front-end development team. There are many restrictions on using audio and video conference in browser. So how to develop a PC application with low cost and fast becomes the demand of many small and medium-sized companies. While electron only needs front-end development to complete a cross platform PC application. The front-end development can quickly transplant the original page to the electron program, and even directly load the web page in electron.

The architecture of electron

First of all, electron contains a chromium, and the architecture of chromium can be simply understood as:

How to develop a cross platform video conference application with electron + webrtc

Therefore, the architecture of electron can be simply understood as:
How to develop a cross platform video conference application with electron + webrtc

Electron support platform

MacOS

Provide 64 bit version for MacOS, and only support MacOS 10.10 (Yosemite) and later.

Windows

Only Windows 7 or higher is supported. IA32 (x86) and x64 (AMD64) binary versions are provided for Windows system.

Linux

The pre compiled versions of IA32 (i686) and x64 (AMD64) of electron are compiled under Ubuntu 12.04. Whether the pre compiled version can work normally depends on whether it contains the link library of the compilation platform. Therefore, only Ubuntu 12.04 can guarantee its normal operation, and the following platforms have been proved to be able to run the precompiled version of electron normally:

  • Ubuntu 12.04 or later
  • Fedora 21
  • Debian 8

    Two schemes of using webrtc in electron

    Using webrtc based on browser API

    Because chromium is included in electron, electron can use all the APIs of the browser. If the webrtc application based on browser has been completed, it can be used directly in electron without any modification (desktop sharing is slightly different, a little modification is needed).

    Using webrtc based on native SDK

    Because nodejs runs in electron, there is a solution to use native SDK in electron.

How to develop a cross platform video conference application with electron + webrtc

The access side only needs to interface with JavaScript API. You don’t have to care about the API and usage of internal native SDK. It is also a set of front-end code, which can generate applications of three platforms on PC side.

The difference between the two schemes in the front end

At the access level, there is basically no difference. The H5 SDK uses the video element in HTML to display videos. Because the electron SDK uses the native SDK, it needs to draw on the electron SDK itself, so it needs to pass in canvas instead of video. In terms of the quality of audio and video calls, it is obvious that the quality of using native SDK will be higher. It does not need to rely on the browser kernel and can avoid many browser restrictions. At the same time, some optimization of native end can also be used.

Notes on using native SDK in electron

Addon version problem

Nodejs addon is needed to use native SDK in electron. The specific usage of nodejs addon is directly related to theLink to official websiteAmong them, the most important one is that electron has a nodejs. The problem is that the nodejs version of the developer’s local machine is different from that of electron. As a result, addon, which runs normally in the local node environment, always reports errors in electron, mainly because of incompatible versions. So we need to do a recompilation before using electron.How to use node native module in electron

HOME=~/.electron-gyp node-gyp rebuild --target=6.0.10 --arch=x64 --dist
-url=https://electronjs.org/headers

Where target is the version of electron. You can see your version in package. JSON of the electron project.

Download native SDK

Because electron will package all the dependencies used in the project into the installation package, electron has already brought chromium and nodejs. Therefore, a library for downloading native SDK will be added to automatically determine the current platform, and then download the corresponding platform’s SDK. At the same time, the version of the downloaded SDK can be controlled. Avoid downloading all platforms’ SDKs at once. Increase the installation package size of the app.

“Video cloud technology”, the official account of your most noteworthy audio and video technology, is pushing practical technical articles from Ali cloud every week.