When setting up online education, medical care, and video conferencing scenarios, many small and medium-sized companies often have to choose between the PC client and the Web. The Electron technology solves this problem by allowing a cross-platform PC application with only front-end development. This paper mainly introduces the technical scheme of building a cross-platform video conference application using Electron + WebRTC.

By Jun Qi

Proofread | tai one

What is Electron?

Electron is a cross-platform desktop application built using JavaScript, Html, and CSS. (Link to official website)

Why use Electron?

At present, many small and medium-sized companies do not have the development capability on the PC end, and generally only have mobile terminal development team + front-end development team. The limitations of using audio and video conferencing in a browser are enormous. So how can low cost, rapid development of a PC application, has become a lot of small and medium-sized companies. Electron requires only front-end development to make a cross-platform PC application. Front-end development can quickly transplant the original page to the electron program, or even directly load the web page in electron.

Architecture of Electron

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

Therefore, the architecture of Electron can be simply understood as:

Electron support platform

MacOS

A 64-bit version of macOS is available, and only macOS 10.10 (Yosemite) and later are supported.

Windows

The binary ia32 (x86) and X64 (AMD64) versions are available only for Windows 7 or later.

Linux

Electron’s precompiled ia32 (I686) and X64 (AMD64) versions are both compiled under Ubuntu 12.04, and the precompiled versions work properly depending on whether they include the linked libraries for the compilation platform. So only Ubuntu 12.04 is guaranteed to work, and the following platforms have been proven to work properly with the precompiled version of Electron:

  • Ubuntu 12.04 or later
  • Fedora 21
  • Debian 8

Two solutions were used in Electron

Use WebRTC based on the browser API

Since Electron contains Chromium, Electron can use all of the browser apis. If you already have a browser-based WebRTC application, you can use it directly in Electron without any modifications (desktop sharing is a little different and requires a little modification).

Use WebRTC based on native SDK

Because nodeJS is running in Electron, there is a solution using the Native SDK in Electron.

The user only needs to connect to the javascript API. Regardless of the internal Native SDK’s apis and usage. The same is a set of front-end code, while the PC side can generate three platform applications.

The difference between the two schemes at the front end

At the access level, there is little difference. Only the H5 SDK uses the VIDEO element in HTML to display the video. The Electron SDK uses native SDK, so it needs to do the drawing work in Electron SDK by itself, so it needs to pass in canvas instead of video. In terms of the quality of audio and video calls, the quality of native SDK is obviously higher. It does not rely on the browser kernel and can avoid many browser restrictions. At the same time, some optimizations on the Native side can also be used.

Considerations for using the Native SDK in Electron

Addon version problem

Using the Native SDK in Electron requires the use of NodeJS Addon. The specific nodeJS addon is directly linked to the official website, the most important is that the Electron has a nodeJS, which brings the problem is the developer’s native nodeJS version and the difference in the Electron. The result is that addon that is normally running in the local node environment is always reporting errors in Electron, mainly version incompatibilities. So a recompile is required before Electron can be used. How to use the Node native module in Electron

HOME = ~ /. Electron - gyp node - gyp rebuild -- target = 6.0.10 - arch = x64 - dist - url=https://electronjs.org/headersCopy the code

Where target is the version of Electron. You can see your own version in the Electron project package.json.

Native SDK download

Electron already comes with Chromium and NodeJS since Electron will pack all the dependencies used in the project into the installation package. Therefore, a library for downloading native SDK is generally added to automatically determine the current platform, and then download the SDK of the corresponding platform. At the same time, the DOWNLOADED SDK version can be controlled. Avoid downloading SDKS for all platforms at once. Increase the size of the application installation package.

“Video cloud Technology” is your most noteworthy audio and video technology public account. It pushes practical technical articles from ali Cloud every week, and communicates with first-class engineers in the field of audio and video.