FAQ
更新时间: 2024/08/05 15:02:55
使用 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
。
6. 如何使用 Mac M1 arm64 架构设备集成 NERTC Electron SDK。
- 功能相关
7. 如何使用 Mac M1 arm64 架构设备集成 NERTC Electron SDK。
8. 调用 startVideoPreview 开启视频画面预览时无画面。
9. 自 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
功能相关
7. 调用 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', '')
8. 调用 startVideoPreview 开启视频画面预览时无画面。
答:请在加入房间前调用 startVideoPreview,并且调用此接口前需先调用 setVideoDevice 设置视频设备 id。
9. 自 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)