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

相关文章
|
3月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
160 3
|
1月前
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理,重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本,通过初始化、检查更新、下载更新、验证签名和安装更新等步骤,确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理,确保更新高效且安全。
36 4
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
|
1月前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
开发桌面程序-Electron入门
|
6月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
105 2
|
2月前
|
安全 前端开发 iOS开发
揭秘 electron-builder:macOS 应用打包背后到底发生了什么?
本文详细介绍了 Electron 应用在 macOS 平台上的打包流程,涵盖配置文件、打包步骤、签名及 notarization 等关键环节。通过剖析 `electron-builder` 的源码,展示了如何处理多架构应用、执行签名,并解决常见问题。适合希望深入了解 macOS 打包细节的开发者。
100 2
|
2月前
|
监控 前端开发 安全
谈谈我做 Electron 应用的这一两年
本文首发于微信公众号“前端徐徐”,作者徐徐分享了过去一两年间开发Electron桌面应用的经验与心得。文章详细介绍了从项目启动、技术选型到具体实施的过程,并探讨了桌面端开发面临的挑战及解决方案,如软件更新、任务队列设计、性能优化等。此外,还列举了一些特殊需求的实现方法,如静默安装、进程禁用等。作者认为,尽管桌面端开发有其独特性,但通过不断探索与实践,仍能显著提升用户体验和技术水平。
174 0
谈谈我做 Electron 应用的这一两年
|
2月前
|
开发框架 JavaScript 前端开发
Electron技术深度解析:构建跨平台桌面应用的利器
【10月更文挑战第13天】Electron技术深度解析:构建跨平台桌面应用的利器
216 0
|
2月前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的?
本文首发于微信公众号“前端徐徐”,作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件,涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容,并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容,读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
176 0
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
184 0
|
4月前
|
前端开发 JavaScript API
强强联手打造桌面应用新标杆:Angular与Electron的完美融合——从环境搭建到通信机制,全面解析构建跨平台应用的最佳实践与技巧
【8月更文挑战第31天】随着Web技术的进步,开发者们越来越多地采用Web技术来构建桌面应用程序。通过结合使用开源框架Electron及前沿的前端框架Angular,开发者能充分利用JavaScript、HTML和CSS打造出高性能且易维护的跨平台桌面应用。本文将详细介绍如何搭建基于Angular与Electron的开发环境,包括创建Angular项目、安装Electron及相关依赖、配置Electron主进程以及实现Angular应用与Electron间的通信等关键步骤,并最终将应用打包成多平台可执行文件,为读者提供了一套完整的解决方案以快速入门并实践这一强大技术组合。
142 0