如何用 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

相关文章
|
9天前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
|
3月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
72 2
|
28天前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
44 0
|
1月前
|
JavaScript 开发工具
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
|
2月前
|
前端开发
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
|
2月前
|
Rust 前端开发 JavaScript
IM跨平台技术学习(十三):从理论到实践,详细对比Electron和Tauri的优劣
本文主要介绍了目前比较流行的桌面应用跨平台开发技术及其架构,并以实战的方式对比了 Electron 和 Tauri 的优势和劣势,以及桌面跨平台应用开发的技术趋势。
49 0
|
4月前
|
移动开发 开发框架 JavaScript
Vue3 Vite electron 开发桌面程序
Vue3 Vite electron 开发桌面程序
297 0
|
4月前
|
前端开发 数据可视化 iOS开发
基于electron快速将任意网站打包成跨平台的桌面端软件
基于electron快速将任意网站打包成跨平台的桌面端软件
123 1
|
4月前
|
Rust 前端开发 JavaScript
IM跨平台技术学习(十):快速对比跨平台框架Electron、Flutter、Tauri、React Native等
在本文中,我们将比较五种流行的桌面应用程序开发框架:Electron、Flutter、Tauri、React Native 和 Qt,希望可以帮助你根据项目需求做出明智的技术选型决策。
408 2
|
10月前
|
Web App开发 前端开发 JavaScript
用electron打包前端应用初体验
用electron打包开发桌面应用遇到的各种问题和解决办法
153 1