时隔 3 年，再次编译 Electron 源码，记录下各种花式错误

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

这种类型的问题，大多都是因为下载过程中发生中断了。这种情况下，首先确认你的“代理”是工作良好的。如果代理没问题，那可能是偶然的中断，重新执行就好了。或者可以像我一样，遇到上面图中的错误，先手动执行下出错时候在运行的命令，如上图中，我在 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

这个错误是说找不到 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 ，无论从价格、服务和稳定性上都绝对不输大厂，只是我们欠一点点宣传而已。