【OBS】stream-labs-desktop 编译运行采坑全攻略

▒ 目录 ▒

- 🛫 导读
- - 需求
  - 开发环境
- 1️⃣ 安装yarn
- - 安装
- 2️⃣ 安装依赖库：yarn install
- - certificate has expired
  - electron@npm:25.9.3 couldn't be built successfully
- 3️⃣ 启动desktop项目
- - 编译
  - 调试模式启动
  - 启动缓慢问题
- 4️⃣ 打包
- 🛬 文章小结
- 📖 参考资料

🛫 导读

需求

OBS学习过程中，发现宝藏开源软件stream-labs-desktop，简单研究下：

通过js直接控制obs的神器。
electron作为载体，让前端同学轻松制作客户端软件。
封装实用功能，方便开发和参考。

开发环境

	版本号	描述
文章日期	2024-03-01
操作系统	Win11 - 22H2	22621.2715
node -v	v20.10.0
npm -v	10.2.3
yarn -v	3.1.1

1️⃣ 安装yarn

这里，小编使用的node版本是v20.10.0，建议使用相对高的版本尝试。

安装

stream-labs-desktop使用 Yarn 作为包管理器。建议使用 npm 安装它：
npm install -g yarn

2️⃣ 安装依赖库：yarn install

执行yarn install，安装依赖库，这个过程产生了下面几种错误。

certificate has expired

直接运行yarn install，会报下面错误

yarn install v1.22.21
[1/4] Resolving packages...
error Error: certificate has expired
    at TLSSocket.onConnectSecure (node:_tls_wrap:1674:34)
    at TLSSocket.emit (node:events:514:28)
    at TLSSocket._finishInit (node:_tls_wrap:1085:8)
    at ssl.onhandshakedone (node:_tls_wrap:871:12)
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

这里可以通过下面两种方式修正该问题（如果失败，两种方案都试试）。

取消ssl验证：
yarn config set strict-ssl false
这个方法一般就可以解决了。
更换yarn镜像源：
这里使用的yarn版本是3.1.1，需要使用的命令为（重要的事情说三遍）
yarn config set npmRegistryServer http://registry.npm.taobao.org
yarn config set npmRegistryServer http://registry.npm.taobao.org
yarn config set npmRegistryServer http://registry.npm.taobao.org
|
旧版本使用的是yarn config set registry http://registry.npm.taobao.org，该命令在新的yarn中，会报如下错误：

**ps：配置镜像地址（registry），同时可避免各种package无法正常下载的问题。

electron@npm:25.9.3 couldn’t be built successfully

这个报错是因为electron请求服务器连接的是外网，需要配置electron的国内镜像（如淘宝镜像）。
方案一：
修改全局变量，很简单。新建用户全局变量即可。

方案二：
直接在控制台中执行set命令：set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

ps： 使用npm的时候，可以指定config值实现配置镜像，但是yarn命令没有对应的config值，无法进行设置：

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm config set ELECTRON_BUILDER_BINARIES_MIRROR https://npm.taobao.org/mirrors/electron-builder-binaries/