音视频通话 2.0
Electron
新手接入指南
产品简介
产品介绍
功能特性
产品优势
应用场景
基本概念
使用限制
产品计费
按量计费
资源包
更新日志
下载 SDK 和示例代码
快速开始
接入流程
创建应用
开通服务
集成 SDK
快速跑通 Sample Code
实现音视频通话
Token 鉴权
API 参考
Electron API 参考
服务端 API
错误码
控制台指南
常见问题
FAQ
服务协议

FAQ

更新时间: 2022/08/10 17:28:00

使用 Electron 框架可以帮助您方便、快捷地开发跨平台的 RTC 桌面应用。由于配置开发环境的流程较为复杂,关于接入或使用 NERTC Electron SDK 的常见问题列举如下,您可以参考相关解答。

  • 接入相关

1. 运行项目,Electron 控制台提示 xxx is not defined

2. 使用 vue create 创建项目,运行 vscode 时提示 Module parse failed: Unexpected character '�' (1:2)

3. 在 Mac 设备上运行 Electron 应用,本地预览画面无法正常显示。

4. 在 Windows 设备上运行 Electron 应用,Electron 控制台提示 Error:The specified module coulde not found

5. 使用 electron-builder 打包应用,Electron 控制台提示 Uncaught Error: The specified module could not be found ...\nertc-electron-sdk.node

6. 如何使用 Mac M1 arm64 架构设备集成 NERTC Electron SDK。

7. 如何在系统为 Windows-64 bit 的设备上使用 32 位的 NERTC Electron SDK 开发 32 位的应用程序。

  • 功能相关

8. 调用 initialize 接口进行初始化时返回 30005 错误码。

9. 调用 startVideoPreview 开启视频画面预览时无画面。

10. 自 Electron 17.0.0 版本起使用 desktopCapturer 模块获取应用 id 只能在主进程进行,如何在渲染进程中获取应用 id。

接入相关

1. 运行项目,Electron 控制台提示 xxx is not defined

例如:

Uncaught ReferenceError: require is not defined

答:Electron 5.0 版本后,默认不支持 node 模块。您需要在 Electron 的 main.js 文件中添加 nodeIntegration:true

mainWindow = new BrowserWindow({
    height: 768,
    useContentSize: true,
    width: 1366,
    webPreferences: {
      nodeIntegration: true, //设置为true
    }
  })

2. 使用 vue create 创建项目,运行 vscode 时提示 Module parse failed: Unexpected character '�' (1:2)

答:Webpack 只能读取 JavaScript 和 JSON 文件,无法运行 NERTC的 .node 文件。loader 让 Webpack 能够处理其他类型的文件并将文件转换为有效模块,解决步骤如下。

1. 安装 native-ext-loader。
npm install native-ext-loader
2. 在您的项目中添加 Webpack 配置文件 `vue.config.js`。
const os = require('os')
module.exports = {
  lintOnSave: false,
  pluginOptions: {
    electronBuilder: {
        nodeIntegration: true
    }
  },
  configureWebpack:{
    externals: {
      "nertc-electron-sdk": "commonjs2 nertc-electron-sdk"
    },
    module: {
      rules: [
        {
          test: /\.node$/, //匹配.node文件配置对应loader
          loader: 'native-ext-loader',
          options: {
            emit: true,
            rewritePath: './node_modules/nertc-electron-sdk/build/Release'
          }
        }
      ],
    },
  }
}

3. 在 Mac 设备上运行 Electron 应用,本地预览画面无法正常显示。

答:Electron 应用默认无摄像头使用权限。您在 系统偏好设置 > 安全与隐私 中给应用开通相关权限即可。

4. 在 Windows 设备上运行 Electron 应用,Electron 控制台提示 Error:The specified module could not be found

例如:

Error: Cannot open node modules\nertc-electron-sdk\build\Release\nertc-electron-sdk.node: Error: The specified module could not be found.

答:由于 nertc-electron-sdk.node 使用 C++ 语言编写,集成了 NERTC Electron SDK 的应用需要有 C++ 运行时库才能正常运行,因此上述错误提示一般为系统缺少 C++ 运行时库 导致。您需要为系统安装 Visual Studio 2017 对应的运行时库。

5. 使用 electron-builder 打包应用,Electron 控制台提示 Uncaught Error: The specified module could not be found ...\nertc-electron-sdk.node

例如:

Uncaught Error:  The specified module could not be found modules\nertc-electron-sdk\build\Release\nertc-electron-sdk.node

答:Electron 应用未找到 nertc-electron-sdk.node 文件,您需要在项目的 package.json 文件中添加 electron-builder 配置。

 "build": {
   "productName": "xxx",
   "appId": "xxx",
   "asarUnpack": [
      "node_modules/nertc-electron-sdk/build/Release"
   ],
   "directories": {
     "output": "build"
   }
   "win": {
     "extraFiles": [
       {
         "from": "node_modules/nertc-electron-sdk/build/Release/",
         "to": "./resources",
         "filter": ["**/*"]
       }
     ]
   },
   "mac": {
     "extraFiles": [
       { 
         "from": "node_modules/nertc-electron-sdk/build/Release/", 
         "to": "./Resources" 
       }
     ]
   }
},

6. 如何使用 Mac M1 arm64 架构设备集成 NERTC Electron SDK。

答:NERTC SDK 底层没有编译 arm64 的能力,需要使用 x64 版本架构。您需要指定安装 x64 架构 npm 包和NERTC 包,命令如下。

npm install --target_arch=x64 --arch=x64 --npm_config_arch=x64

7. 如何在系统为 Windows-64 bit 的设备上使用 32 位的 NERTC Electron SDK 开发 32 位的应用程序。

答:有以下两种方案供您选择:

  • 方案一:安装 32 位的 node.js,然后正常执行 npm install 即可。

  • 方案二:安装 64 位的 node.js,然后通过如下命令行进行安装。

    npm install --target_arch=ia32 --arch=ia32 --npm_config_arch=ia32
    

功能相关

8. 调用 initialize 接口进行初始化时返回 30005 错误码。

答:一般为设置的日志路径不存在导致。您可以使用 Electron 原生 api 获取 exe 目录作为日志目录。

//Electron 主进程
import { app, BrowserWindow, ipcMain } from 'electron'
ipcMain.on('logPath', (event, arg) => {
  event.returnValue = app.getPath('exe')
})
//Electron 渲染进程
const {ipcRenderer } = require('electron')
let logPath = ipcRenderer.sendSync('logPath', '')

9. 调用 startVideoPreview 开启视频画面预览时无画面。

答:请在加入房间前调用 startVideoPreview,并且调用此接口前需先调用 setVideoDevice 设置视频设备 id。

10. 自 Electron 17.0.0 版本起使用 desktopCapturer 模块获取应用 id 只能在主进程进行,如何在渲染进程中获取应用 id。

答:利用进程间通信方式。渲染进程发起请求,主进程中调用 desktopCapturer 模块,并将结果返回至渲染进程。

//Electron 主进程
import { desktopCapturer, app, BrowserWindow, ipcMain } from 'electron'
ipcMain.on('desktopCapturer', (event, arg) => {
  desktopCapturer.getSources({ types: ['window', 'screen'], thumbnailSize: { width: 320, height: 180 }, fetchWindowIcons: true }).then(async sources => {
    if (sources.length > 0) {
      console.log(sources)
      event.returnValue = sources
    }
  })
})
//Electron 渲染进程
const { ipcRenderer} = require('electron')
let windowsList = ipcRenderer.sendSync('desktopCapturer', '')
console.log(windowsList)
此文档是否对你有帮助?
有帮助
我要吐槽
  • 接入相关
  • 功能相关