在搭建在线教育、医疗、视频会议等场景时，不少中小型公司经常面临 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。增长应用的安装包大小。
「视频云技术」你最值得关注的音视频技术公众号，每周推送来自阿里云一线的实践技术文章，在这里与音视频领域一流工程师交流切磋。