This document describes how to quickly integrate the TRTC Electron SDK into your project.
Windows Installer (.msi) 64-bit
.Node.js command prompt
in the application list.Run the following command in the command prompt to install Electron. V4.0.0 or later is recommended.
$ npm install electron@latest --save-dev
$ npm install trtc-electron-sdk@latest --save
Note:You can view the information of the latest version of the TRTC Electron SDK here.
const TRTCCloud = require('trtc-electron-sdk').default;
// import TRTCCloud from 'trtc-electron-sdk';
this.rtcCloud = new TRTCCloud();
// Get the SDK version number
this.rtcCloud.getSDKVersion();
Since v7.9.348, the TRTC Electron SDK has integrated trtc.d.ts
for developers using TypeScript.
import TRTCCloud from 'trtc-electron-sdk';
const rtcCloud: TRTCCloud = new TRTCCloud();
// Get the SDK version number
rtcCloud.getSDKVersion();
We recommend that you use the packaging tool `electron-builder. You can run the following command to install it.
$ npm install electron-builder@latest --save-dev
In order to package the TRTC Electron SDK (trtc_electron_sdk.node
) correctly, you must also run the following command to install native-ext-loader
.
$ npm install native-ext-loader@latest --save-dev
webpack.config.js
The webpack.config.js
file contains the configuration information for project building. You can locate it in the following ways.
webpack.config.js
is in the root directory of the project.create-react-app
, the configuration file will be node_modules/react-scripts/config/webpack.config.js
.vue-cli
, webpack configuration will be stored in the configureWebpack
property of vue.config.js
.module.exports
to make webpack.config.js
accept the --target_platform
command line parameter so that your project can be packaged correctly for its target platform.const os = require('os');
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;
}
}
if (!['win32', 'darwin'].includes) target = os.platform();
return target;
})();
Note:In the result returned by
os.platform()
,darwin
means macOS, andwin32
means Windows (64-bit or 32-bit).
Add the following configuration to the rules
option. The targetPlatform
variable ensures that rewritePath
changes automatically according to the target platform.
rules: [
{
test: /\.node$/,
loader: 'native-ext-loader',
options: {
rewritePath: targetPlatform === 'win32' ? './resources' : '../Resources'
}
},
]
The above code achieves the following:
native-ext-loader
will load the TRTC SDK in [application root directory]/resources
.native-ext-loader
will load the TRTC SDK in [application directory]/Contents/Frameworsk/../Resources
.You also need to add the --target_platform
parameter to the build script of package.json
. See step 3 for details.
package.json
The package.json
file is in the root directory of the project and contains information needed for packaging. Normally, to successfully package your project, you need to modify the path in package.json
as follows.
main
.// In most cases, the name of the `main` file can be customized. For example, in TRTCSimpleDemo, `main` can be configured as:
"main": "main.electron.js",
// However, for projects created with the `create-react-app` scaffolding tool, `main` must be configured as:
"main": "public/electron.js",
build
configuration to your package.json
file for electron-builder
to read."build": {
"appId": "[Custom appId]",
"directories": {
"output": "./bin"
},
"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"
}
]
}
},
scripts
.create-react-app
and vue-cli
. They provide samples for projects created with other tools too.// Use this configuration for projects created with `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"
}
// Use this configuration for projects created with `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"
}
Parameter | Description |
---|---|
main | Entry point file of Electron, which can be customized in most cases. However, if your project is created with create-react-app , the file must be public/electron.js . |
build.win.extraFiles | When packaging for Windows, electron-builder will copy all files in the directory specified by from to bin/win-unpacked/resources (all in lowercase). |
build.mac.extraFiles | When packaging for macOS, electron-builder will copy the trtc_electron_sdk.node file specified by from to bin/mac/your-app-name.app/Contents/Resources (capitalize the first letter of each word) |
build.directories.output | Output path for packaging. In the sample above, the output file is saved to bin . You can modify it as needed. |
build.scripts.build:mac | Script for building for macOS |
build.scripts.build:win | Script for building for Windows |
build.scripts.compile:mac | Compile into a DMG file for macOS |
build.scripts.compile:win64 | Compile into an EXE file for Windows |
build.scripts.pack:mac | Call build:mac to build the project and then `compile:mac` to package it into a DMG file |
build.scripts.pack:win64 | Call build:win to build the project and then `compile:win64` to package it into an EXE file |
Package the project into a DMG file for macOS:
$ cd [Project directory]
$ npm run pack:mac
The packaging tool will generate an installation file named bin/your-app-name-0.1.0.dmg
. Publish this file.
Package the project into an EXE file for Windows:
$ cd [Project directory]
$ npm run pack:win64
The packaging tool will generate an installation file named bin/your-app-name Setup 0.1.0.exe
. Publish this file.
Note:Currently, the TRTC Electron SDK does not support cross-platform packaging. This means you cannot package your project into an EXE file on macOS or a DMG file on Windows, but we are working on adding support for it in the future.
The SDK uses the UDP protocol for audio/video transmission and therefore cannot be used in office networks that block UDP. If you encounter such a problem, see How to Deal with Firewall Restrictions.
If an error occurs when you integrate the TRTC Electron SDK, for example, if installation times out or the trtc_electron_sdk.node
file fails to load after packaging, please contact us for help.
Contact us if you have any questions.
Was this page helpful?