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
What is electron?
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:
Therefore, the architecture of electron can be simply understood as:
Electron support platform
Provide 64 bit version for MacOS, and only support MacOS 10.10 (Yosemite) and later.
Only Windows 7 or higher is supported. IA32 (x86) and x64 (AMD64) binary versions are provided for Windows system.
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
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.
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.