在搭建線上教育、醫療、視訊會議等場景時，很多中小型公司常常面臨 PC 客戶端和 Web 端二選一的抉擇。Electron 技術的出現解決了這一難題，只需前端開發就能完成一個跨平臺的 PC 端應用。本文主要介紹使用 Electron + WebRTC 搭建跨平臺的視訊會議應用的技術方案。
作者｜ 峻崎
審校｜ 泰一
什麼是 Electron？
Electron 是使用 JavaScript、Html 和 CSS 構建跨平臺的桌面應用程式。（官網連結）
為什麼要使用 Electron？
目前很多中小型公司並不具備 pc 端上的開發能力，普遍只有移動端開發團隊 + 前端開發團隊。而在瀏覽器中使用音視訊會議的限制又非常多。所以如何能夠低成本，快速開發一個 pc 端的應用，就成了很多中小型公司的需求。而 Electron 只需要前端開發就能完成一個跨平臺的 pc 端應用。前端開發可以把原有的頁面迅速移植到 electron 程式中，甚至可以直接在 Electron 中直接載入網頁。
Electron 的架構
首先 Electron 裡面包含了一個 chromium，而 chromium 的架構可以簡單理解為:
因此，Electron 的架構就可以簡單理解為:
Electron 支援平臺
MacOS
對 macOS 提供 64 位版本，並且只支援 macOS 10.10 (Yosemite) 以及更高版本。
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。增加應用的安裝包大小。
「影片雲技術」你最值得關注的音影片技術公眾號，每週推送來自阿里雲一線的實踐技術文章，在這裡與音影片領域一流工程師交流切磋。
本作品採用《CC 協議》，轉載必須註明作者和本文連結