2020 年 11 月份我曾经发过一篇文章《我也来编译个 Electron 吧》,当时纯粹只是为了体验一下编译过程,没什么实际用途。因为当时公司的产品还在使用 CEF,所以后续就没有继续跟进了。
过去一两年的时间,公司的产品已经逐渐从 CEF 过渡开始使用 Electron 了,有些原来在 CEF 上的修改,有些场景可能还是有需要在 Electron 上来修改。所以,最近我又重新编译了一次 Electron。这次的编译比 3 年多那次遇到了更多的问题,这里尽可能逐一记录下来,以便后续参考。
这次编译的版本是指定了 v20.3.12
这个 tag,对应的 Chromium 版本号是 104.0.5112.124
。编译的目标系统是 Windows。
这次编译还是按照 Electron build-tools 的说明来进行的。我看了一下,和 3 年前的编译步骤基本一样。但这次由于我是在一台新的机器上编译,环境、工具链等都发生了变化,所以遇到了各种花式错误。另外,本次也参考了官网的 Build Instructions 中的部分介绍内容。
下面就逐一记录一下,并给出我的处理思路。
提示访问 https://auth.notgoma.com/rbe/… to obtain RBE authentication…
我尝试使用 3 年前的单步执行整个下载编译过程的方法,在一开始就遇到了问题,在执行
e init master-release -i release --root=......
时,要求我访问 autho.notgoma.com 认证,但是我按照给出的链接访问,告诉我无权:
所以相当于卡住了,进行不下去了。所以我只好根据 build-tools 页面下面的介绍,手动执行了
gclient sync --with_branch_heads --with_tags
来同步拉取代码:
后来发现按照 Build Instructions 中提到的步骤,也是差不多的:
运行 vpthon -vpython-spec src/.vpython -vpython-tool install 出错
这个问题的原因是我使用了比较新的
depot tools
导致的。vpython
这个命令在 depot tools
路径下,非常不幸的是,就在我编译的前两天,有个叫 Brian Ryner
的家伙把 vpython 给删掉了:
所以,遇到类似的调用 depot tools 产生的问题,可以尝试回退一个比较旧的版本,并设置
set DEPOT_TOOLS_UPDATE=0
环境变量关闭 depot tools 更新。这次我将 depot tools 版本回退到了 6f905470df9197880d645cfade6310b1cf1fb238
这个 commit,回退到这个位置没什么原因,随机回退的。
各种 RPC failed… fetch-pack: unexpeced disconnection while reading sideband packet… fatal: early EOF![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/690f3aaa05130dd3385160e5ed886d9b.png)
这种类型的问题,大多都是因为下载过程中发生中断了。这种情况下,首先确认你的“代理”是工作良好的。如果代理没问题,那可能是偶然的中断,重新执行就好了。或者可以像我一样,遇到上面图中的错误,先手动执行下出错时候在运行的命令,如上图中,我在 D:\.git_cache\github.com-nodejs-node 下手动执行了 git fetch 看看是否正常。然后再重新运行 Electron 的代码同步脚本(因为同步脚本还会重头做一些杂七杂八的事情)
digital envelope routines::unsupported … ERR_OSSL_EVP_UNSUPPORTED error…
这个错误我忘了截图了。这里就文字描述下。我按照 ERR_OSSL_EVP_UNSUPPORTED
这个错误在网上搜索了一下,竟然还搜到了不少的信息,令我惊讶的是,竟然还有个视频来解答这个问题:
现在技术问答已经这么卷了么…
然并卵,妹子给的三种方案没有解决我的问题。包括升级 Node.js 版本,设置 NODE_OPTIONS=--openssl-legacy-provider
环境变量(还会产生另外的错误)等。
后来通过试验发现,我的 Node.js 版本不是应该升级,应该降级才对。我之前使用的是 v18.x 版本,我降级到 v16.x 版本这个问题就好了(为了自由切换 Node.js 版本,需要安装 nvm) 。
Exception: Path “C:\Program Files(x86)\Windows Kits\10\include\10.0.20348.0\shared” from environment variable “include” does not exist![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a9e9375274e0b8f0cb0e2888bf041326.png)
这个错误是说找不到 10.0.20348.0
这个版本的 Windows SDK,这个在 Visual Studio 2022 安装的时候可选:
我编译的机器上只有 Visual Studio 2019,当时看到 Electron 官网描述的是可以的,就没有安装 2022:
所以好吧,还是以实际为准吧。
编译完成后,使用 ninja -C out/Release electron:electron_dist_zip
制作编译好的 Electron 包(会在 out/Release 下生成一个 dist.zip
的压缩包)即可。
最后,编写一段测试代码来验证下效果。下面是测试代码:
package.json
{
"name": "test",
"version": "1.0.0",
"description": "just for test electron",
"main": "index.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "XuYu",
"license": "ISC"
}
index.js
const { app, BrowserWindow } = require('electron/main')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadURL('https://brtc.baijiayun.com/demo/#/index')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
运行测试页面:
E:\ElectronDistrib\electron_win64_v20.3.12_chromiumv104.0.5112.124>electron.exe E:\ElectronDistrib\testpages\
上面是在我刚刚编译好的 Electron 中运行我们公司的实时音视频产品的 Demo 页面。Electron 比较好的地方是它默认就支持 H.264 了,不像以前我编译 CEF 还需要手动自己添加额外的编译参数才能支持。
OK,说到这里,可能你会有疑问,为什么要自己编译 Electron 啊,官网标准版本已经很香了,还有很多插件可以用。是的,但总是有一些情况,是官网和三方插件不能满足需求的,这种情况就需要自己想办法。
我们现在拥有了 Electron 及 Chromium 源码,都可以自己编译了,那么现在就有了对浏览器的完整控制权。接下来你想怎么改造就很方便了,比如植入自己的视频编解码器、扩展标准 js 方法、参数、增加区域共享功能、改变 pip 画中画外观及行为……等等
Good Luck~ 哦对了顺便说一句,如果你的产品中如果有集成实时音视频功能的需求,欢迎试用下百家云的 BRTC ,无论从价格、服务和稳定性上都绝对不输大厂,只是我们欠一点点宣传而已。