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

▒ 目录 ▒

- [🛫 导读](#🛫 导读)
- - 需求
  - 开发环境
- [1️⃣ 安装yarn](#1️⃣ 安装yarn)
- - 安装
- [2️⃣ 安装依赖库：yarn install](#2️⃣ 安装依赖库：yarn install)
- - [certificate has expired](#certificate has expired)
  - [electron@npm:25.9.3 couldn't be built successfully](#electron@npm:25.9.3 couldn't be built successfully)
- [3️⃣ 启动desktop项目](#3️⃣ 启动desktop项目)
- [4️⃣ 打包](#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，会报下面错误

bash 复制代码

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/

3️⃣ 启动desktop项目

编译

运行前需要通过webpack编译项目：

bash 复制代码

yarn compile

或者执行watch命令：

bash 复制代码

yarn watch

调试模式启动

项目默认只有yarn start启动项目，该模式未打开调试窗口。
项目中，包含环境变量SLOBS_PRODUCTION_DEBUG，该变量未启动调试相关的开关。

我们随意指定一个字符串即可开启调试模式。

为了方便运行，我们新增一个命令dev，之后通过yarn dev即可调试方式启动项目，如下图所示：

启动缓慢问题

小编通过yarn dev启动项目，会在下面的界面等待很久：

打开调试窗口，看到下面错误：

这是因为小编绑定了youtube账号，如果有遇到启动慢的问题，可查看控制台定位问题。

4️⃣ 打包

Windows应用包:

yarn package

macOS应用包:

yarn package:mac

🛬 文章小结

开发环境运行stream-labs-desktop，主要参考源码中的README.md文档。

遇到问题了，再一个个排查。
ps： 只支持 OSX 10.14+ 及 64-bit Windows。

📖 参考资料

github地址： https://github.com/stream-labs/desktop