实例解析：如何利用Electron实现跨平台视频会议
本文将为您深入解析如何利用Electron实现跨平台视频会议功能，并结合实例，码e码分为您展示如何利用Electron与声网Agora Web SDK构建视频会议应用。例源
Electron以其支持跨平台开发的码e码分修改源码导出apk优势，成为构建桌面应用的例源热门选择。它基于Node.js和Chromium开源项目，码e码分允许前端开发者使用JavaScript、例源HTML和CSS构建跨平台的码e码分桌面应用程序。
要实现视频会议功能，例源主要有两种技术路径：第一种使用C++ SDK，码e码分通过NodeJS插件将C++库编译成NodeJS可直接使用的例源文件，界面部分使用Web实现，码e码分最后通过编译插件调用C++接口。例源这种方式在性能和稳定性上具有优势，但Native模块与Web模块的交互较为复杂。第二种思路是使用WebRTC，界面和RTC业务均通过Web实现，集成和调试相对简单。然而，WebRTC在服务器设计和部署方面存在挑战，通过与开源项目如Janus结合，可解决服务器部署、NAT穿透等问题。Agora Web SDK的使用可大大简化RTC部分的开发，提供网页端多方音视频通讯功能，优化公网传输质量，并实现丢包、丢帧重传和动态码率调整策略，以确保良好的多方通话体验。
为了演示如何集成Agora Web SDK实现视频通话功能，我们提供了一个开源的Demo项目。首先，在Electron环境中创建名为web-app的目录，然后快速实现视频通话功能。初始化APPID并加入频道，创建本地流并推送。完成这些步骤后，应能看到自己的视频画面。为了在Electron的App容器中运行代码，创建BrowserWindow实例并加载web-app目录中的内容。最后，使用npm start启动Electron即可。源码资本邵
如果您对如何利用Electron与Agora Web SDK构建视频会议应用感兴趣，欢迎访问我们的开源Demo项目，深入了解详细步骤和源代码：[github.com/AgoraIO/Agor...]
开发Electron，不小心接触到C++，经过一周多的时间终于摸索出
研究开发Electron过程中，发现程序在Windows环境下运行无误，但在Linux和macOS系统中遇到问题，主要源于依赖的第三方插件只提供exe程序。为了解决这一问题，开始探索如何使用C++等源码编译出适用于Windows、Linux、macOS的二进制应用程序。
经过一周的学习与实践，终于掌握如何编译Linux和Windows应用程序，但尚未精通在单一系统环境下编译出Windows、Linux、macOS兼容的程序。当前主要涉及交叉编译技术，正深入研究以期获得完整流程，以便后续发布相关教程。
开始准备工具，包括Windows 操作系统、CMake、Visual Studio 等。学习过程分为几个步骤：下载并解压libpng-1.6.源码，查看依赖zlib的版本信息，下载zlib-1.2.8源码，编译生成debug和release版本的静态链接库，并复制zlib-1.2.8/build/zconf.h文件到zlib-1.2.8目录下。随后，使用CMake编译libpng-1.6.，并生成适用于Windows和Linux的静态链接库。同样，遵循上述流程完成mozjpeg-4.0.3的编译。
对于使用MinGW编译的疑问，通过CMake GUI选择“MinGW Makefile”进行配置，等待配置完成并生成Makefile后，在命令行中执行相应的make命令。如果编译出的exe文件无法单独使用，需确保程序依赖的dll文件与exe文件放在同一目录，或使用.xxx-static.exe的命名格式，确保程序正常运行。
深入理解Electron（一）Electron架构介绍
深入理解Electron架构：一个基于Web的哎指标源码跨平台框架
Electron，源自Atom Shell，是通过结合JavaScript、HTML和CSS构建跨平台桌面应用的框架。官网的解释是，它将Chromium的浏览器内核和Node.js的核心技术打包，使得开发者无需本地开发经验，即可在Windows、macOS和Linux上轻松创建应用。起初，为Atom编辑器设计的Electron，由曾参与node-webkit和NW.js项目的关键开发者创建，并在年正式更名。
与其他框架，如Tauri和Webview2，利用不同策略集成Chromium和Node.js不同，Electron的目标是提供一个基于Web的开发环境，让开发者能够利用熟悉的Web技术开发原生应用，实现了跨平台开发。Qt，作为C++的桌面跨端开发典范，曾是这一领域的重要先驱，而随着互联网时代的变迁，Electron这类技术逐渐受到欢迎。
尽管C和C++的性能优于Electron，但软件语言的发展也受益于硬件的进步。性能和易用性之间的平衡是关键，例如Node.js利用V8和LibUV，推动了前端开发的飞速发展。Electron在性能上可能不如C++框架，但其简化开发过程和维护成本的特性使其成为当今流行的选择。
Electron的架构设计借鉴了Chromium的复杂但强大的多进程架构，浏览器主进程负责Node.js的交互，而渲染进程则通过Chromium加载和渲染UI。这种设计允许高效地管理和隔离GUI窗口，同时保持了系统的灵活性和安全性。在源码层面，Node.js接口和C++模块的集成确保了功能的实现和性能的优化。
总的来说，Electron通过集成Web技术栈和Chromium的内核，实现了跨平台的开发效率，并在性能和易用性之间找到了一个折中的点。随着互联网业务的发展和软件技术的迭代，Electron成为了满足快速迭代和跨平台需求的ceons游戏源码理想选择。
抽丝剥茧：Electron与Node.js的奇葩Bug
起因是最近在用Electron开发一个桌面端项目，有个需求是需要遍历某个文件夹下的所有JavaScript文件，对它进行AST词法语法分析，解析出元数据并写入到某个文件里。需求整体不复杂，只是细节有些麻烦，当我以为开发的差不多时，注意到一个匪夷所思的问题，查的我快怀疑人生。
缘起
什么问题呢？
原来这个需求一开始仅是遍历当前文件夹下的文件，我的获取所有JS文件的代码是这样的：
后来需求改为要包含文件夹的子文件夹，那就需要进行递归遍历。按照我以前的做法，当然是手撸一个递归，代码并不复杂，缺点是递归可能会导致堆栈溢出：
但做为一个紧跟时代浪潮的开发者，我知道Node.js的fs.readdir API中加了一个参数recursive，表示可以进行递归，人家代码的鲁棒性肯定比我的好多了：
只改了一行代码，美滋滋~
兼容性怎么样呢？我们到Node.js的API文档里看下：
是从v..0添加的，而我本地使用的Node.js版本正是这个（好巧），我们Electron中的Node.js版本是多少呢？先看到electron的版本是.0.4：
在Electron的 发布页上能找到这个版本对应的是..1，比我本地的还要多一个小版本号：
这里需要说明一下，Electron之所以优于WebView方案，是因为它内置了Chrome浏览器和Node.js，锁定了前端与后端的版本号，这样只要Chrome和Node.js本身的跨平台没有问题，理论上Electron在各个平台上都能获得统一的UI与功能体验。 而以Tauri为代表的WebView方案，则是不内置浏览器，应用程序使用宿主机的浏览器内核，开发包的体积大大减小，比如我做过的同样功能的一个项目，Electron版本有M+，而Tauri的只有4M左右。虽然体积可以这么小，又有Rust这个性能大杀器，但在实际工作中的技术选型上，想想各种浏览器与不同版本的兼容性，换我也不敢头铁地用啊！ 所以，尽管Electron有这样那样的缺点，仍是2022萝卜源码我们开发客户端的不二之选。 之所以提这个，是因为读者朋友需要明白实际项目运行的是Electron内部的Node.js，而我们本机的Node.js只负责启动Electron这个工程。
以上只是为了说明，我这里使用fs.readdir这个API新特性是没有问题的。
排查
为方便排查，我将代码再度简化，提取一个单独的文件中，被Electron的Node.js端引用：
能看到控制台打印的 Node.js 版本与我们刚才查到的是一样的，文件数量为2：
同样的代码使用本机的Node.js执行：
难道是这个小版本的锅？按理说不应该。但为了排除干扰，我将本机的Node.js也升级为..1：
这下就有些懵逼了！
追踪
目前来看，锅应该是Electron的。那么第一思路是什么？是不是人家已经解决了啊？我要不要先升个级？
没毛病。
升级Electron
将Electron的版本号换成最新版本v.1.0：
再看效果：
我去，正常了！
不过，这个包的升级不能太草率，尤其正值发版前夕，所以还是先改代码吧，除了我上面手撸的代码外，还有个包readdirp也可以做同样的事情：
这两种方式，在原版本的Electron下都没有问题。
GitHub上搜索
下来接着排查。
Electron是不是有人发现了这个Bug，才进行的修复呢？
去 GitHub issue里瞅一瞅：
没有，已经关闭的问题都是年提的问题，而我们使用的Electron的版本是年月日发布的。 那么就去 代码提交记录里查下（GitHub这个功能还是很好用的）：
符合条件的就一条，打开看下：
修复的这个瞅着跟我们的递归没有什么关系嘛。
等等，这个文件是什么鬼？
心血来潮的收获
我们找到这个文件，目录在lib下：
从命名上看，这个文件是对Node.js的fs模块的一个包装。如果你对Electron有了解的话，仔细一思索，就能理解为什么会有这么个文件了。我们开发时，项目里会有许多的资源，Electron的Node.js端读取内置的文件，与正常Node.js无异，但事实上，当我们的项目打包为APP后，文件的路径与开发状态下完全不一样了。所以Electron针对打包后的文件处理，重写了fs的各个方法。
这段代码中重写readdir的部分如下：
上面的判断isAsar就是判断是否打包后的归档文件，来判断是否要经Electron特殊处理。如果要处理的话，会调用Electron内部的C++代码方法进行处理。
我发现，这里Electron并没有对打包后的归档文件处理递归参数recursive，岂不是又一个Bug？应该提个issue提醒下。
不过，我们目前的问题，并不是它造成的，因为现在是开发状态下，上面代码可以简化为：
对Promise了如指掌的我怎么看这代码也不会有问题，只是心血来潮执行了一下：
我去，差点儿脑溢血！
好的一点是，曙光似乎就在眼前了！事实证明，心血来潮是有用的！
Node.js的源码
这时不能慌，本地切换Node.js版本为v，同样的代码再执行下：
这说明Electron是被冤枉的，锅还是Node.js的！
Node.js你这个浓眉大眼的，居然也有Bug！呃，还偷偷修复了！
上面的情况，其实是说原生的fs.readdir有问题：
也就是说，fs.promises.readdir并不是用util.promisify(fs.readdir)实现的！
换成同步的代码readdirSync，效果也是一样：
我们来到Node.js的GitHub地址，进行 搜索：
打开这两个文件，能发现，二者确实是不同的实现，不是简单地使用util.promisify进行转换。
fs.js
我们先看 lib/fs.js。
当recursive为true时，调用了一个readdirSyncRecursive函数，从这个命名上似乎可以看出有性能上的隐患。正常来说，这个函数是异步的，不应该调用同步的方法，如果文件数量过多，会把主进程占用，影响性能。
如果没有recursive，则是原来的代码，我们看到binding readdir这个函数，凡是binding的代码，应该就是调用了C++的底层库，进行了一次『过桥』交互。
我们接着看readdirSyncRecursive，它的命名果然没有毛病，binding readdir没有第4个参数，是完全同步的，这个风险是显而易见的：
fs/promises.js
在lib/internal/fs/promises.js中，我们看到binding readdir的第4个参数是kUsePromises，表明是个异步的处理。
当传递了recursive参数时，将调用readdirRecursive，而readdirRecursive的代码与readdirSyncRecursive的大同小异，有兴趣的可以读一读：
fs.js的提交记录
我们搜索readdir的提交记录，能发现这两篇都与深度遍历有关：
其中 下面的这个，正是我们这次问题的罪魁祸首。
刚才看到的fs.js中的readdirSyncRecursive里这段长长的注释，正是这次提交里添加的：
从代码对比上，我们就能看出为什么我们的代码遍历的程序为2了，因为readdirResult是个二维数组，它的长度就是2啊。取它的第一个元素的长度才是正解。坑爹！
也就是说，如果不使用withFileTypes这个参数，得到的结果是没有问题的：
发版记录
我们在Node.js的发版记录中，找到这条提交记录，也就是说，v..0才修复这个问题。
而Electron只有Node.js更新到v后，这个功能才修复。
而从Electron与Node.js的版本对应上来看，得更新到v了。
只是需要注意的是，像前文提过的，如果是遍历的是当前项目的内置文件，Electron并没有支持这个新的参数，在打包后会出现Bug。
fs的同步阻塞
其实有人提过一个 issue：
确实是个风险点。所以，建议Node.js开发者老老实实使用fs/promises代替fs，而Electron用户由于坑爹的fs包裹，还是不要用这个特性了。
总结
本次问题的起因是我的一个Electron项目，使用了一个Node.js fs API的一个新参数recursive递归遍历文件夹，偶然间发现返回的文件数量不对，就开始排查问题。
首先，我选择了升级Electron的包版本，发现从v.0.4升级到最新版本v.1.0后，问题解决了。但由于发版在即，不能冒然升级这么大件的东西，所以先使用readdirp这个第三方包处理。
接着排查问题出现的原因。我到Electron的GitHub上搜索issue，只找到一条近期的提交，但看提交信息，不像是我们的目标。我注意到这条提交的修改文件（asar-fs-wrapper.ts），是Electron针对Node.js的fs API的包装，意识到这是Electron为了解决打包前后内置文件路径的问题，心血来潮之下，将其中核心代码简化后，测试发现问题出在fs.promises readdir的重写上，继而锁定了Node.js版本v..1的fs.readdir有Bug。
下一步，继续看Node.js的源码，确定了fs.promises与fs是两套不同的实现，不是简单地使用util.promisify进行转换。并在fs的代码找到关于recursive递归的核心代码readdirSyncRecursive。又在提交记录里，找到这段代码的修复记录。仔细阅读代码对比后，找到了返回数量为2的真正原因。
我们在Node.js的发版记录中，找到了这条记录的信息，确定了v..0才修复这个问题。而内嵌Node.js的Electron，只有v版本起才修复。
不过需要注意的是，如果是遍历的是当前项目的内置文件，由于Electron并没有支持这个新的参数，在打包后会出现Bug。而且由于fs.readdir使用recursive时是同步的，Electron重写的fs.promises readdir最终调用的是它，可能会有隐性的性能风险。
本次定位问题走了些弯路，一开始将目标锁定到Electron上，主要是它重写fs的锅，如果我在代码中用的fs.readdirSync，那么可能会更早在Node.js上查起。谁能想到我调用的fs.promises readdir不是真正的fs.promises readdir呢？
最后，针对此次问题，我们有以下启示：
PS：我给Electron提了个 issue，一是让他们给fs.readdir添加recursive参数的实现，二是让他们注意下重写时fs.promises readdir的性能风险。
electron应用版本更新添加releaseNotes(更新日志)的N种方法
前言
目前electron应用一般是使用electron-builder进行打包，使用electron-updater进行版本更新，客户端检测到新版本后一般会弹窗提示用户有新版本+展示更新日志，这就需要我们打包的时候将版本更新日志(releaseNotes)添加到latest.yml或latest-mac.yml文件中，然后客户端检测到新版本后就能够获取到该更新日志并展示给用户。通过分析electron-builder源码，总结出几种添加releaseNotes的方法。
version:?1.0.0files:?-?url:?electron-start_setup_1.0.0.exesha:?+yJuqcWDdhWGLvuLiJFjFKM+uQfihiQ8FHE7RoyyFjOiFZeGugE7UPlceDHfm9qyQOYmUvuEzjq/u3zw==size:?path:?electron-start_setup_1.0.0.exesha:?+yJuqcWDdhWGLvuLiJFjFKM+uQfihiQ8FHE7RoyyFjOiFZeGugE7UPlceDHfm9qyQOYmUvuEzjq/u3zw==releaseNotes:?"修复断网时离开会议失败的问题\r\n修复会议中受开关麦影响听不到的问题\r\n新增动态转发功能\r\n修复Bug，优化UI"releaseDate:?'--T::.Z'适用范围项目使用Electron-builder打包
provider为generic
//package.json{ ?"build":?{ "publish":?[?{ "provider":?"generic","url":?"xxxxxx"?}]?}}方法一：在package.json文件build节点下添加releaseNotes信息示例：
//package.json{ ?"build":?{ "releaseInfo":{ ?"releaseNotes":"修复断网时离开会议失败的问题\r\n修复会议中受开关麦影响听不到的问题\r\n新增动态转发功能\r\n修复Bug，优化UI"}?}}方法二：在package.json文件build节点下添加releaseNotesFiles信息(推荐使用)示例：
//package.json{ ?"build":?{ "releaseInfo":{ ?"releaseNotesFile":"release-1.0.0.md"}?}}releaseNotesFile字段指定更新日志文件为release-1.0.0.md，其内容如下：
修复断网时离开会议失败的问题修复会议中受开关麦影响听不到的问题新增动态转发功能修复Bug，优化UI使用这种方法添加releaseNotes，可自定义更新日志文件名称，如每发布一个版本就添加一个更新日志文件(release-1.0.0.md，release-1.0.1.md...)，便于以后查看每一个版本更新日志。
方法三：在打包输出目录下创建文件release-notes.md如指定了输出目录为build，则在build目录下创建名称为release-notes.md的文件。
可取的文件名为：
release-notes.md
release-notes-(mac|windows|linux).md
.....
方法四：直接修改打包生成的latest.yml或latest-mac.yml，添加releaseNotes字段（不建议使用）客户端实现使用electron-updater检查更新获取更新日志，弹窗提示用户有新版本
const?{ ?autoUpdater?}?=?require('electron-updater')//检测到新版本时触发autoUpdater.on('update-available',?function?(info)?{ //获取更新日志var?releaseNotes=info.releaseNotes//弹窗提示用户const?dialogOpts?=?{ type:?'info',buttons:?['立即下载','稍后'],title:?'版本更新',textWidth:?,message:?'发现新版本'+info.version+"("+(info.files[0].size//).toFixed(2)+"MB)"+"\r\n\r\n"+releaseNotes,cancelId:?1?}dialog.showMessageBox(dialogOpts).then((returnValue)?=>?{ if?(returnValue.response?===0)?{ autoUpdater.downloadUpdate();}})});实现效果如下：
macOS系统Windows系统相关源码分析electron-builder打包时获取releaseNotes对应的代码文件为packages/app-builder-lib/src/publish/updateInfoBuilder.ts，具体代码如下：
async?function?getReleaseInfo(packager:?PlatformPackager<any>)?{ ?const?releaseInfo:?ReleaseInfo?=?{ ?...(packager.platformSpecificBuildOptions.releaseInfo?||?packager.config.releaseInfo)?}?if?(releaseInfo.releaseNotes?==?null)?{ const?releaseNotesFile?=?await?packager.getResource(?releaseInfo.releaseNotesFile,?`release-notes-${ packager.platform.buildConfigurationKey}.md`,?`release-notes-${ packager.platform.name}.md`,?`release-notes-${ packager.platform.nodeName}.md`,?"release-notes.md")const?releaseNotes?=?releaseNotesFile?==?nullnull?:?await?readFile(releaseNotesFile,?"utf-8")//?to?avoid?undefined?in?the?file,?check?for?nullif?(releaseNotes?!=?null)?{ ?releaseInfo.releaseNotes?=?releaseNotes}?}?delete?releaseInfo.releaseNotesFile?return?releaseInfo}优先从releaseInfo.releaseNotes字段中取值(方法一)
如果releaseInfo.releaseNotes未定义，则从releaseInfo.releaseNotesFile取值(方法二)
如果releaseInfo.releaseNotesFile未定义，则从资源目录下的指定文件(如release-notes.md)中取值(方法三)
参考资源/post/
基于Umi搭建Electron App——打包优化
在基于Umi搭建Electron App的过程中，发现打包后的dist包体积过大，影响应用下载或更新的用户体验。本文将深入分析优化打包过程，从而减小最终生成的文件大小。首先，分析使用webpack+electron-builder打包后的文件构成，发现主要问题在于过大体积的安装程序和asar文件。具体分析如下：
在简单工程中，通过对比electron-builder --dir和直接使用electron-builder命令的打包结果，发现两种方式在体积上的主要差异在于安装程序Setup.exe的大小，前者较后者减少了几个文件，体积缩小了MB。一个基本的electron工程的最终体积已达到MB，实际项目体积只会更多。
分析打包文件目录结构时，注意到.exe文件实际是编译好的文件，主要功能是加载resources/app.asar中的内容。asar文件则对源代码进行基本加密，防止直接访问源代码。通过对比简单工程与复杂工程（集成umi、ant-design等dependencies）的打包结果，发现复杂工程体积显著增大，主要问题出现在asar文件的大小上。
进一步优化路径在于将web应用和electron的package.json分离，利用electron-builder支持的双package.json结构。具体操作包括新建app文件夹、移动main.js至app文件夹、在app文件夹中新建package.json、添加相关配置、修改webpack打包配置和main.js内容以避免重复打包dependencies，同时调整electron-builder打包流程，以减少体积。
优化后，基本Electron-Umi应用的.exe文件体积减少了MB，asar文件体积减少了.MB，整体dist包大小减小了MB。这不仅显著提升了应用的下载和更新体验，也为后续的开发提供了更优化的基础。
优化后的代码和具体配置可以参考相关文档和仓库地址，以实现更高效和优化的Electron App构建流程。
2024-11-30 09:33
2024-11-30 07:50
2024-11-30 07:43
2024-11-30 07:32
2024-11-30 07:02
