互換性があります。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
次の3つの手順によって手動でのダウンロードを行ってください。
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公式サイトをご参照ください。
この記事はお役に立ちましたか?