Electron+Vue+Agora搭建视频直播

项目结构说明

├── renderer // 项目源代码
│ ├── assets // 静态资源，图片，主题，多媒体等静态资源
│ ├── components // 全局公共组件
│ ├── const // 全局常量配置
│ ├── filters // 全局过滤器
│ ├── libs // 外部库，手动引入
│ ├── mock // mock模拟数据
│ ├── plugins // 插件存放目录
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── styles // 全局css
│ ├── utils // 全局工具类
│ ├── views // 视图文件
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
├── .babelrc // babel config
├── .eslintrc.js // eslint config
├── .gitignore // sensible defaults for gitignore
├── index.html // index.html template
└── package.json // package.json
└── vue.config.js // vue项目配置文件

环境搭建踩坑和解决方法

=>控制台报错：

┏ Electron -------------------

  [11000:0615/095124.922:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
  
┗ ----------------------------

解决：参考：https://segmentfault.com/a/1190000019487488

---

=>环境报错：

Uncaught Error: The module '\\?\D:\comein\desktopApp\node_modules\agora-electron-sdk\build\Release\agora_node_ext.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 57. This version of Node.js requires
NODE_MODULE_VERSION 64. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
    at process.module.(:9080/anonymous function) [as dlopen] (ELECTRON_ASAR.js:166:20)
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:740)
    at Object.module.(:9080/anonymous function) [as .node] (ELECTRON_ASAR.js:166:20)
    at Module.load (internal/modules/cjs/loader.js:620)
    at tryModuleLoad (internal/modules/cjs/loader.js:559)
    at Function.Module._load (internal/modules/cjs/loader.js:551)
    at Module.require (internal/modules/cjs/loader.js:658)
    at require (internal/modules/cjs/helpers.js:20)
    at Object. (D:\comein\desktopApp\node_modules\agora-electron-sdk\js\Api\index.js:5)
    at Object. (D:\comein\desktopApp\node_modules\agora-electron-sdk\js\Api\index.js:1895)

解决：

yarn add electron-rebuild --dev
./node_modules/.bin/electron-rebuild // 这里我直接执行这个指令不成功
// 直接找到目路地址(./node_modules/.bin/electron-rebuild)
// 双击electron-rebuild.cmd文件
// 继续执行yarn run dev，会提醒使用electron-win32平台，执行指令：
npm install  --arch=ia32 [email protected] -d // 成功
// 之前掉坑里，一直执行下面两段指令一直不成功，在放弃的时候，执行了npm，奇迹的可以了
// yarn add --arch=ia32 [email protected] 不成功
// cnpm install  --arch=ia32 [email protected] -d 不成功

=>环境报错：

Uncaught Error: \\?\D:\comein\desktopApp\node_modules\agora-electron-sdk\build\Release\agora_node_ext.node is not a valid Win32 application.
\\?\D:\comein\desktopApp\node_modules\agora-electron-sdk\build\Release\agora_node_ext.node

解决：

npm install  --arch=ia32 [email protected] -d // 成功

=>Agora SDK for Electron 前提条件：

请确保满足以下开发环境要求：

Node.js 6.9.1 及以上
Electron 1.8.3 及以上
使用 Windows 平台进行开发时，请运行 npm install  --arch=ia32 [email protected] -d
注：如果你选择官网下载并引入的方式，请务必使用 Eletron 3.0.6。

=>打包白屏

Uncaught Error: Cannot open D:\comein\desktopApp\node_modules\agora-electron-sdk
\build\Release\agora_node_ext.node: 
Error: D:\comein\desktopApp\node_modules\agora-electron-sdk\build\Release
\agora_node_ext.node is not a valid Win32 application.
D:\comein\desktopApp\node_modules\agora-electron-sdk\build\Release\agora_node_ext.node

解决：

参考：https://stackoverflow.com/questions/13035760/node-js-native-module-is-not-a-valid-win32-application-error

修改package.json文件：

"scripts": {
    - "build": "node .electron-vue/build.js && electron-builder",
    + "build": "node .electron-vue/build.js && electron-builder --platform=win32 --arch=ia32",
  },

=>打开exe调试：

文件地址：/src/main/index.js
function createWindow () {
  ...
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000
  })

  // 打开打包之后的exe调试
  // mainWindow.webContents.openDevTools()

  mainWindow.loadURL(winURL)
  ...
}

环境配置是一个大坑，还有electron-vue现在好像没维护了，有点可惜，觉得项目目前是跑起来了，就怕往后还有很多坑在等着 lol

image.png

image.png

image.png