在搭建在線教育、醫療、視頻會議等場景時，不少中小型公司經常面臨 PC 客戶端和 Web 端二選一的抉擇。Electron 技術的出現解決了這一難題，只需前端開發就能完成一個跨平臺的 PC 端應用。本文主要介紹使用 Electron + WebRTC 搭建跨平臺的視頻會議應用的技術方案。javascript
做者｜ 峻崎html
審校｜ 泰一前端
什麼是 Electron？
Electron 是使用 JavaScript、Html 和 CSS 構建跨平臺的桌面應用程序。（官網連接）java
爲何要使用 Electron？
目前不少中小型公司並不具有 pc 端上的開發能力，廣泛只有移動端開發團隊 + 前端開發團隊。而在瀏覽器中使用音視頻會議的限制又很是多。因此如何可以低成本，快速開發一個 pc 端的應用，就成了不少中小型公司的需求。而 Electron 只須要前端開發就能完成一個跨平臺的 pc 端應用。前端開發能夠把原有的頁面迅速移植到 electron 程序中，甚至能夠直接在 Electron 中直接加載網頁。node
Electron 的架構
首先 Electron 裏面包含了一個 chromium，而 chromium 的架構能夠簡單理解爲:json
所以，Electron 的架構就能夠簡單理解爲: canvas
Electron 支持平臺
MacOS
對 macOS 提供 64 位版本，而且只支持 macOS 10.10 (Yosemite) 以及更高版本。api
Windows
僅支持 Windows 7 或更高版本爲 Windows 系統提供 ia32 (x86) 和 x64 (amd64) 兩種二進制版本。瀏覽器
Linux
Electron 的 ia32 (i686) 和 x64 (amd64) 預編譯版本均是在 Ubuntu 12.04 下編譯的，預編譯版本是否可以正常運行，取決於其中是否包含了編譯平臺的連接庫。因此只有 Ubuntu 12.04 是能夠保證能正常運行的，而且如下平臺也被證明能夠正常運行 Electron 的預編譯版本：架構
- Ubuntu 12.04 或更高版本
- Fedora 21
- Debian 8
Electron 中使用 WebRTC 兩種方案
基於瀏覽器 API 使用 WebRTC
由於 Electron 中包含了 chromium，因此 Electron 可使用瀏覽器的全部 api。若是已經完成了基於瀏覽器的 WebRTC 應用，在 Electron 中也是不須要任何修改就能夠直接使用的 (桌面共享略微不一樣，須要作一點點修改)。
基於 native sdk 使用 WebRTC
由於 Electron 中運行了 nodejs，因此在 Electron 中就有了使用 native sdk 的解決方案。
接入方只須要對接 javascript 的 api。而沒必要關心內部 native sdk 的 api 和使用方式。一樣是一套前端的代碼，同時能夠生成 pc 端三個平臺的應用程序。
兩種方案在前端的區別
在接入層面，基本不存在區別。只是 H5 SDK 使用 html 中的 video 元素進行視頻的顯示。而 Electron SDK 因爲使用了 native sdk，因此須要在 Electron SDK 本身進行繪製工做，因此須要傳入的是 canvas 而不是 video。在音視頻通話的質量方面，明顯使用 native sdk 的質量會更高，不須要依賴瀏覽器內核，能夠避開不少瀏覽器的限制，同時 native 端的一些優化也均可以使用。
Electron 中使用 native sdk 的注意事項
addon 版本問題
在 Electron 中使用 native sdk 須要用到 nodejs addon。具體 nodejs addon 的使用方式直接上官網連接，其中最最主要的就是 Electron 中自帶了一個 nodejs，帶來的問題就是開發者本機的 nodejs 版本和 Electron 中的不一樣，結果就是在本機 node 環境中運行正常的 addon 在 Electron 老是報錯，主要是版本不兼容的錯誤。因此在 Electron 使用以前須要作一次從新編譯。Electron 中如何使用 Node 原生模塊
HOME=~/.electron-gyp node-gyp rebuild --target=6.0.10 --arch=x64 --dist -url=https://electronjs.org/headers
其中 target 是 Electron 的版本。能夠在 Electron 項目的 package.json 中看到本身的版本。
native sdk 下載
因爲 Electron 會將項目中使用到的依賴都打包到安裝包中，而 Electron 自己就已經帶了 chromium 和 nodejs。因此通常會增長一個用於下載 native sdk 的庫，自動判斷當前的平臺，而後下載對應平臺的 sdk，同時也能夠控制下載的 sdk 版本。避免一次下載全部平臺的 sdk。增長應用的安裝包大小。
「視頻雲技術」你最值得關注的音視頻技術公衆號，每週推送來自阿里雲一線的實踐技術文章，在這裏與音視頻領域一流工程師交流切磋。