Windows Installer (.msi) 64-bit
.Node.js command prompt
in the application list and open a terminal window.$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install node
$ npm install electron@latest --save-dev
$ npm install trtc-electron-sdk@latest --save
const TRTCCloud = require('trtc-electron-sdk').default;// import TRTCCloud from 'trtc-electron-sdk';this.rtcCloud = new TRTCCloud();// Get the SDK version numberthis.rtcCloud.getSDKVersion();
trtc.d.ts
for developers using TypeScript.import TRTCCloud from 'trtc-electron-sdk';const rtcCloud: TRTCCloud = new TRTCCloud();// Get the SDK version numberrtcCloud.getSDKVersion();
$ npm install electron-builder@latest --save-dev
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
)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 built 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;})();
os.platform()
, darwin
means macOS, and win32
means Windows (64-bit or 32-bit).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'// Build for different platforms// rewritePath: './node_modules/trtc-electron-sdk/build/Release'}},]
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
.native-ext-loader
will load the TRTC SDK in ./node_modules/trtc-electron-sdk/build/Release
. For details, see TRTCSimpleDemo configuration.--target_platform
parameter to the build script of package.json
, which brings us to the next step.package.json
package.json
file is in the root directory of the project and contains the necessary build information. Normally, to successfully build 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 follows:"main": "main.electron.js",// However, for projects created with the `create-react-app` scaffolding tool, `main` must be configured as follows:"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
.
The following command scripts are for projects created with 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 | The entry point file of Electron, which can be customized in most cases. However, if your project is created with create-react-app, the entry point file must be public/electron.js. |
build.win.extraFiles | When building 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 | The output path. In the sample above, the output file is saved to bin. You can modify it as needed. |
build.scripts.build:mac | The script for building for macOS. |
build.scripts.build:win | The script for building for Windows. |
build.scripts.compile:mac | Creates a DMG file for macOS |
build.scripts.compile:win64 | Creates an EXE file for Windows |
build.scripts.pack:mac | Calls build:mac to build the project and then `compile:mac` to generate a DMG file |
build.scripts.pack:win64 | Calls build:win to build the project and then `compile:win64` to generate an EXE file |
$ cd [Project directory]$ npm run pack:mac
bin/your-app-name-0.1.0.dmg
. Publish this file.$ cd [Project directory]$ npm run pack:win64
bin/your-app-name Setup 0.1.0.exe
. Publish this file.trtc_electron_sdk.node
file fails to load after building, please contact us.
Was this page helpful?