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

简介: 在搭建在线教育、医疗、视频会议等场景时,很多中小型公司常常面临 PC 客户端和 Web 端二选一的抉择。Electron 技术的出现解决了这一难题,只需前端开发就能完成一个跨平台的 PC 端应用。本文主要介绍使用 Electron + WebRTC 搭建跨平台的视频会议应用的技术方案。

作者| 峻崎

审校| 泰一


什么是 Electron?

Electron是使用 JavaScript、Html 和 CSS 构建跨平台的桌面应用程序。(官网链接

为什么要使用 Electron

目前很多中小型公司并不具备 pc 端上的开发能力,普遍只有移动端开发团队 + 前端开发团队。而在浏览器中使用音视频会议的限制又非常多。所以如何能够低成本,快速开发一个 pc 端的应用,就成了很多中小型公司的需求。而 Electron 只需要前端开发就能完成一个跨平台的 pc 端应用。前端开发可以把原有的页面迅速移植到 electron 程序中,甚至可以直接在 Electron 中直接加载网页。

Electron 的架构

首先 Electron 里面包含了一个 chromium,而 chromium 的架构可以简单理解为:image.png

因此,Electron 的架构就可以简单理解为:image.png

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 的解决方案。

image.png

接入方只需要对接 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。增加应用的安装包大小。


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

image.png

相关文章
|
30天前
|
Web App开发 编解码 安全
视频会议技术 入门探究:WebRTC、Qt与FFmpeg在视频编解码中的应用
视频会议技术 入门探究:WebRTC、Qt与FFmpeg在视频编解码中的应用
166 4
|
8月前
|
前端开发 Linux iOS开发
IM跨平台技术学习(八):新QQ桌面版为何选择Electron作为跨端框架
在瞬息万变的互联网行业中,年过二十四的即时通讯IM应用 QQ 堪称超长寿的产品,见证了中国互联网崛起的完整历程。 然而,如今这个元老级产品经历了一次从内到外彻底的重构。在这次重构中,QQ 选择了 Electron 作为 UI 跨平台开发框架。 尽管 Electron 被 Slack、Visual Studio Code 和 Discord 等大型产品广泛使用,但也引发了一些网友的担忧,例如内存占用、安装包体积和启动速度等方面的问题。本文内容整理自 QQ 技术团队的采访,我们一起来看看QQ团队选择Electron作为桌面版跨端框架背后的决策与思考。
248 0
|
8月前
|
编解码 API 开发者
HarmonyOS学习路之开发篇—多媒体开发(音频开发 二)
音频采集的主要工作是通过输入设备将声音采集并转码为音频数据,同时对采集任务进行管理。
|
8月前
|
编解码 算法 内存技术
HarmonyOS学习路之开发篇—多媒体开发(音频开发 一)
HarmonyOS音频模块支持音频业务的开发,提供音频相关的功能,主要包括音频播放、音频采集、音量管理和短音播放等。
|
监控 算法 数据可视化
跨平台多媒体渲染引擎OPR简介
跨平台多媒体渲染引擎OPR简介
359 0
跨平台多媒体渲染引擎OPR简介
|
移动开发 JavaScript 语音技术
开源:ReactNative集成百度语音开源库
开源:ReactNative集成百度语音开源库
327 0
|
监控 算法 Java
跨平台多媒体渲染引擎的设计与实践
在当前直播和短视频领域,各家公司为了吸引用户和提升用户体验都在创新各种视频玩法, 例如美颜、美妆、虚拟形象等。这些酷炫的效果背后其实是强大的渲染技术。优酷和来疯也在 布局这一领域,我们亟需一个底层渲染框架来高效地支撑我们的业务迭代。于是,自主开发一个跨平台、可扩展、高性能的渲染引擎就被提上了日程。
跨平台多媒体渲染引擎的设计与实践
|
Web App开发 JavaScript 安全
|
安全 Android开发 编解码
|
移动开发 开发框架 前端开发