本文主要是介绍【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 expiredat 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编译项目：
yarn compile
或者执行watch命令：
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
这篇关于【OBS】stream-labs-desktop 编译运行采坑全攻略的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
