兼容的,trtc-electron-sdk 没有特别依赖 elecron 自身的 SDK,所以没有相关的版本依赖。
在终端中输入如下指令:
$ npm config set electron_custom_dir 8.1.1 # 根据版本号来决定
Error:resource\trtc_electron_sdk.node is not a valid Win32 application
, 提示需要 32 位的 trtc_electron_sdk.node?
解决方法:
进入到工程目录下的 trtc-electron-sdk 库目录下(xxx/node_modules/trtc-electron-sdk)。 执行:
npm run install -- arch=ia32
下载完 32 位的 trtc_electron_sdk.node
后,重新对项目进行打包。
vscode 需有摄像头权限, 可采用如下方式进行权限添加。
cd ~/Library/Application\ Support/com.apple.TCC/
cp TCC.db TCC.db.bak
sqlite3 TCC.db # sqlite> prompt appears.
# for Mojave, Catalina
INSERT into access VALUES('kTCCServiceCamera',"com.microsoft.VSCode",0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1541440109);
# for BigSur
INSERT into access VALUES('kTCCServiceCamera',"com.microsoft.VSCode",0,1,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1541440109);
“cannot read property 'dlopen' of undefined”
?
解决方法:
Electron 12 版本上下文隔离默认启用,可设置 contextIsolation 为 false。
let win = new BrowserWindow({
width: 1366,
height: 1024,
minWidth: 800,
minHeight: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
},
});
需要具体 case 进行分析,大致原因如下:
当看似安装完成,运行项目时,终端上出现以下错误:
Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
按照如下三个步骤进行手动下载:
npm config get cache
查看缓存目录。npm install
。使用 vscode 终端启动项目,当 trtc-electron-sdk 启动摄像头和麦克风时,程序直接崩溃。
csrutil disable
禁用保护机制。csrutil enable
。当运行项目时,Electron 在控制台中提示 xx is not defined
,其中 xx
指代 node 模块。例如:
Uncaught ReferenceError: require is not defined
在 Electron 的 main.js
文件中将 nodeIntegration
配置项改成 true:
let win = new BrowserWindow({
width: 1366,
height: 1024,
webPreferences: {
nodeIntegration: true, // 请将此项设置为 true
},
});
打包编译出的程序在运行时,在控制台中看到看到类似的报错信息:
NodeRTCCloud is not a constructor
Cannot open xxx/trtc_electron_sdk.node
或者 The specified module could not be found
dlopen(xxx/trtc_electron_sdk.node, 1): image not found
出现类似上述的信息,说明 trtc_electron_sdk.node 模块没有被正确的打包到程序中,可按照以下步骤进行处理。
native-ext-loader
。 $ npm i native-ext-loader -D
webpack.config.js
在构建时可以接收名为 --target_platform
的命令行参数,以使代码构建过程按不同的目标平台特点正确打包,在 module.exports
之前添加以下代码:const os = require('os');
// 如果不传 target_platform 参数,程序会默认按当前平台类型进行打包
const targetPlatform = (function(){
let target = os.platform();
for (let i=0; i<process.argv.length; i++) {
if (process.argv[i].includes('--target_platform=')) {
target = process.argv[i].replace('--target_platform=', '');
break;
}
}
// win32 统一表示 Windows 平台,包含 32 位和 64 位。darwin 表示 Mac 平台
if (!['win32', 'darwin'].includes) target = os.platform();
return target;
})();
module: {
rules: [
{
test: /\.node$/,
loader: 'native-ext-loader',
options: {
rewritePath: targetPlatform === 'win32' ? './resources' : '../Resources'
}
},
]
}
注意:
- 使用
vue-cli
创建的项目,webpack 配置存放在vue.config.js
文件中的configureWebpack
选项中。- 使用
create-react-app
创建的项目,webpack 配置文件为[项目目录]/node_modules/react-scripts/config/webpack.config.js
。
electron-builder
打包配置(注意大小写):"build": {
"省略": "...",
"win": {
"extraFiles": [
{
"from": "node_modules/trtc-electron-sdk/build/Release/",
"to": "./resources",
"filter": ["**/*"]
}
]
},
"mac": {
"extraFiles": [
{
"from": "node_modules/trtc-electron-sdk/build/Release/trtc_electron_sdk.node",
"to": "./Resources"
}
]
},
"directories": {
"output": "./bin"
}
},
create-react-app
项目请参考以下配置:"scripts": {
"build:mac": "react-scripts build --target_platform=darwin",
"build:win": "react-scripts build --target_platform=win32",
"compile:mac": "node_modules/.bin/electron-builder --mac",
"compile:win64": "node_modules/.bin/electron-builder --win --x64",
"pack:mac": "npm run build:mac && npm run compile:mac",
"pack:win64": "npm run build:win && npm run compile:win64"
}
vue-cli
项目请参考以下配置:"scripts": {
"build:mac": "vue-cli-service build --target_platform=darwin",
"build:win": "vue-cli-service build --target_platform=win32",
"compile:mac": "node_modules/.bin/electron-builder --mac",
"compile:win64": "node_modules/.bin/electron-builder --win --x64",
"pack:mac": "npm run build:mac && npm run compile:mac",
"pack:win64": "npm run build:win && npm run compile:win64"
}
使用 create-react-app
创建的项目,使用 electron-builder
打包时可能会遇到此问题:
$ node_modules\.bin\electron-builder.cmd
• electron-builder version=22.6.0 os=6.1.7601
• loaded configuration file=package.json ("build" field)
• public/electron.js not found. Please see https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3
• loaded parent configuration preset=react-cra
其中 public/electron.js not found
指的就是无法找到入口文件。
$ cd [项目目录]
$ mv main.electron.js ./public/electron.js
{
"main": "public/electron.js",
"省略": "..."
}
[项目目录]\node_modules\electron-builder\node_modules\fs-extra\lib\empty\index.js:33
} catch {
^
SyntaxError: Unexpected token {
at new Script (vm.js:51:7)
可以升级到最新的 node ,具体请参见 Node.js 官方网站。
本页内容是否解决了您的问题?