The content of this page has been automatically translated by AI. If you encounter any problems while reading, you can view the corresponding content in Chinese.
Help & Documentation>Audio and video Terminal Engine>FAQs>Real-Time Interaction Related>Issues Related to Electron

Issues Related to Electron

Last updated: 2025-03-17 15:24:19

On this page:

Installation Related

Is Trtc-Electron-Sdk Compatible With the Official Electron V12.0.1 Version?

Compatible. The trtc-electron-sdk does not have special dependencies on electron's own sdk, so there are no related version dependencies.

Slow Download or Even Getting Stuck When Downloading Electron?

When starting to download the tmp-3320-1-SHASUMS256.txt-6.1.9 file or other files, the download may be extremely slow. Even after waiting for a long time, you may encounter an npm Timeout error:
Downloading tmp-3320-1-SHASUMS256.txt-6.1.9
[=>                                    ] 1.0% of 5.56 kB (0 B/s)
<Solution A: >If you are working from home, you can switch to a Chinese mainland npm mirror.
# Specify the domestic mirror of npm
npm config set registry http://mirrors.tencent.com/npm/

# Specify the domestic mirror address of Electron
npm config set ELECTRON_MIRROR=https://registry.npmmirror.com/mirrors/electron/ 
npm install
Solution B: If you are working in a company, your company's network administrator may have already set up a proxy. You need to confirm whether npm's proxy configuration points to the company's proxy server and whether the environment variable ELECTRON_GET_USE_PROXY is configured. If none of them are configured, follow the steps below.
1.1 Set npm proxy : npm config set all_proxy=[your proxy address].
1.2 Configure the ELECTRON_GET_USE_PROXY environment variable so that the Electron installation script downloads via the npm proxy.
Solution C: If you are in a Mac environment.
export ELECTRON_GET_USE_PROXY=true
Solution D: If you are in a Windows environment.
1.1 Right-click Computer > Properties > Advanced system settings > Environment variable.
1.2 Follow the steps below to set the environment variable ELECTRON_GET_USE_PROXY, and then execute npm install or npm install --proxy=[your proxy address]:



404 Error When Downloading Electron?


Enter the following command in the terminal:
npm config set electron_custom_dir 8.1.1 # Determine based on the version number

Operation Related

Windows 32-Bit System Runtime Error Error: Resource\Trtc_electron_sdk.Node Is Not a Valid Win32 Application, Note That a 32-Bit Trtc_electron_sdk.Node Is Required?



Solution:
1. Enter the library directory of trtc-electron-sdk under the project directory (xxx/node_modules/trtc-electron-sdk). Execute:
npm run install -- arch=ia32
2. After downloading the 32-bit trtc_electron_sdk.node, repackage the project.

Vscode Terminal Launching Electron Demo, White Screen After Entering the Room?

vscode needs camera permission, which can be added in the following way.
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);

Running Demo Throws a Null Pointer Undefined Error: "Cannot Read Property 'Dlopen' of Undefined"?


Solution: In Electron version 12, context isolation is enabled by default. You can set contextIsolation to false.
let win = new BrowserWindow({
    width: 1366,
    height: 1024,
    minWidth: 800,
    minHeight: 600,
    webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
        },
});

Electron Frequently Re-Enters Room Issue?

Specific cases need to be analyzed. The approximate reasons are as follows:
The client's network status is poor (network disconnection will trigger re-entering the room).
Sending the room entry signaling message twice in a row may also cause reentry into the room.
It may be that the device load is too high, resulting in decoding failure and reentering the room.
Re-entering the room caused by mutual kick due to multi-terminal log-in with the same UID.

Terminal Shows the Prompt "Electron Failed to Install Correctly"?

When it seems that the installation is complete and the project is running, the following error appears on the terminal:
Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
Follow these three steps for manual download:
1. Perform npm config get cache to view the cache directory.
2. Manually download Electron and place it in the cache directory.
3. Re-run npm install.

Crash When Calling the Camera or Microphone?

When using the vscode terminal to start the project, when trtc-electron-sdk starts the camera and microphone, the program crashes directly:


Solution A: Run the project using an authorized terminal.
Solution B: Authorize vscode: Allow vscode authorization in System Preferences > Security and Privacy.
Solution C: Disable the protection mechanism by following the steps below:
1.1 Restart the system. Hold down the command + r keys until the system enters safe mode.
1.2 Open the terminal and enter csrutil disable to disable the protection mechanism.
1.3 Restart and enter the system normally. At this time, you can use the vscode terminal to start the project.
1.4 If you need to restart the protection mechanism, just execute csrutil enable in step two.

Electron Reporting "Xx Is Not Defined" Error in the Console?

When running the project, Electron prompts xx is not defined in the console, where xx refers to a node module. For example:
Uncaught ReferenceError: require is not defined
In the main.js file of Electron, change the nodeIntegration configuration item to true:
let win = new BrowserWindow({
    width: 1366,
    height: 1024,
    webPreferences: {
        nodeIntegration: true,  // Set this item to true
    },
});

White Screen and Crash Issues When Running After Packaging and Installation On Mac

On Mac OS 10.4 and later versions, when running the installation package, if the permissions of camera, microphone, and screen recording cannot be obtained, the program will directly experience a white screen or crash after entering the TRTC room due to lack of access permissions to these hardware devices. The solutions are as follows:
1. Add the entitlements.mac.plist file. The file content is as follows. For the specific meaning of relevant configurations, see Apple Developer Website.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
 <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
 <true></true>
 <key>com.apple.security.cs.allow-jit</key>
 <true></true>
 <key>com.apple.security.cs.allow-dyld-environment-variables</key>
 <true></true>
 <key>com.apple.security.device.audio-input</key>
 <true></true>
 <key>com.apple.security.device.camera</key>
 <true></true>
  </dict>
</plist>
2. When packaging with electron-builder, you need to configure the file path of entitlements.mac.plist into the electron-builder packaging configuration. The reference code is as follows. Note "entitlements" and "entitlementsInherit" two configuration items. "hardenedRuntime" needs to be configured as true. For the meaning of the configuration items, see electron-builder official website.
{
  "build": {
    "mac": {
      "extraFiles": [
        {
          "from": "node_modules/trtc-electron-sdk/build/Release/trtc_electron_sdk.node",
          "to": "./Resources"
        }
      ],
      "type": "distribution",
      "hardenedRuntime": true,
      "entitlements": "assets/entitlements.mac.plist",
      "entitlementsInherit": "assets/entitlements.mac.plist",
      "gatekeeperAssess": false,
      "target": [
        "dmg"
      ]
    },
  }
}
3. For Mac OS 12.1 and later versions, the above configuration alone is no longer sufficient to apply for microphone and camera permissions. It is necessary to use the Electron API's systemPreferences.askForMediaAccess() API to proactively request camera and microphone permissions in the main process. The reference code is as follows. The systemPreferences.getMediaAccessStatus() API can detect microphone, camera, and screen recording permissions, but the systemPreferences.askForMediaAccess() API can only request camera and microphone permissions.
async checkAndApplyDeviceAccessPrivilege() {
  const cameraPrivilege = systemPreferences.getMediaAccessStatus('camera');
  console.log(
    `checkAndApplyDeviceAccessPrivilege before apply cameraPrivilege: ${cameraPrivilege}`
  );
  if (cameraPrivilege !== 'granted') {
    await systemPreferences.askForMediaAccess('camera');
  }
  
      const micPrivilege = systemPreferences.getMediaAccessStatus('microphone');
  console.log(
    `checkAndApplyDeviceAccessPrivilege before apply micPrivilege: ${micPrivilege}`
  );
  if (micPrivilege !== 'granted') {
    await systemPreferences.askForMediaAccess('microphone');
  }
  
      const screenPrivilege = systemPreferences.getMediaAccessStatus('screen');
  console.log(
    `checkAndApplyDeviceAccessPrivilege before apply screenPrivilege: ${screenPrivilege}`
  );
}
4. For more crash issue handling methods, please refer to Troubleshooting and Problem-Solving for Electron Application Crash Issues.

Packaging Related

Loading Issue of Node Module

Error Message

The packaged and compiled program shows similar error information in the console at runtime:
NodeRTCCloud is not a constructor



Cannot open xxx/trtc_electron_sdk.node or The specified module could not be found


dlopen(xxx/trtc_electron_sdk.node, 1): image not found



Solution

If similar information as above appears, it indicates that the trtc_electron_sdk.node module has not been correctly packaged into the program. You can follow the steps below to handle it.
1. Install native-ext-loader.
npm i native-ext-loader -D
2. Modify the webpack configuration.
2.1 
const os = require('os');
// If the target_platform parameter is not passed, the program will be packaged according to the current platform type by default.
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 uniformly represents the Windows platform, including both 32-bit and 64-bit. darwin represents the Mac platform.
  if (!['win32', 'darwin'].includes) target = os.platform();
  return target;
})();
2.2 Add the following rules configuration:
module: {
 rules: [
 { 
     test: /\.node$/, 
     loader: 'native-ext-loader', 
     options: { 
         rewritePath: targetPlatform === 'win32' ? './resources' : '../Resources' 
     } 
 },
 ]
}
Note:
For projects created with vue-cli, the webpack configuration is placed in the configureWebpack option of the vue.config.js file.
For projects created with create-react-app, the webpack configuration file is [project directory]/node_modules/react-scripts/config/webpack.config.js.
3. Configure the packages.json file, add packaging configuration and building scripts.
3.1 Add electron-builder packaging configuration (note the case):
"build": {
 "Omission": "..."
 "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"
 }
},
3.2 Add scripts for building and packaging the create-react-app project. Refer to the following configuration:
"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"
}
3.3 For vue-cli projects, refer to the following configurations:
"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"
}

Can'T Find the Entry File?

For projects created using create-react-app, this issue may occur when packaging with 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 means being unable to find the entry file.

Solution

1. Move and rename the entry file:
cd [project directory]
mv main.electron.js ./public/electron.js
2. Modify the package.json file:
{
 "main": "public/electron.js",
 "Omission": "..."
}

Syntax Error of Fs-Extra Module When Executing Packaging?

[Project directory]\node_modules\electron-builder\node_modules\fs-extra\lib\empty\index.js:33
    } catch {
            ^

SyntaxError: Unexpected token {
    at new Script (vm.js:51:7)
You can upgrade to the latest version of node. For details, see Node.js Official Website.

How to Build a Dual-Architecture Package For X64 and ARM64 On Mac?

Starting from version 10.6.403, TRTC Electron SDK supports building dual-architecture packages for X64 and ARM64 on Mac by default. You only need to modify the electron-builder and build tools such as Webpack or Vite configurations. For detailed configurations, see TRTC Electron SDK: Building Dual-Architecture Packages on Mac.
After supporting dual-architecture packaging, if you do not modify the configuration, a single-architecture application package will be built by default, and the architecture type is the same as the CPU type of the build machine.
Note:
For more Electron-related questions, please follow FAQ on Electron and FAQ on Electron II. We will continue to update.

中国站 - English