如何用 Electron + WebRTC 开发一个跨平台的视频会议应用

在搭建在线教育、医疗、视频会议等场景时，很多中小型公司常常面临 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/headersCopy

其中 target 是 Electron 的版本。可以在 Electron 项目的 package.json 中看到自己的版本。

native sdk 下载#

由于 Electron 会将项目中使用到的依赖都打包到安装包中，而 Electron 本身就已经带了 chromium 和 nodejs。所以一般会增加一个用于下载 native sdk 的库，自动判断当前的平台，然后下载对应平台的 sdk，同时也可以控制下载的 sdk 版本。避免一次下载所有平台的 sdk。增加应用的安装包大小。

「视频云技术」你最值得关注的音视频技术公众号，每周推送来自阿里云一线的实践技术文章，在这里与音视频领域一流工程师交流切磋。

本作品采用《CC 协议》，转载必须注明作者和本文链接