Building the Electron Demo

Updated on 2024-12-27 GMT+08:00

View PDF

This section describes how to quickly compile and run the Electron demo of the client SDK.

Environment Requirements

Ensure that the following environment requirements are met during the compilation and running of the Electron demo.

**Table 1** Windows Environment Requirements
Environment and Tool	Version	Description
OS	Windows 10 Professional	Hardware requirements CPU: i5-2400 quad-core, 3.1 GHz or above Memory: 4 GB or above
Python	3.x	Optional. This tool is required only when add-ons need to be recompiled.
Microsoft Visual Studio	Visual Studio 2017	Optional. This tool is required only when add-ons need to be recompiled.
Node.js	16.20.0 or later, 64-bit	N/A
Electron	13.6.7 or later	N/A
Requesting test resources and app IDs	N/A	For details, see Preparations.

NOTE:

For details about the version mapping between Node.js and Electron, see https://www.electronjs.org/docs/latest/tutorial/electron-timelines.

**Table 2** macOS environment requirements
Environment and Tool	Version	Description
OS	macOS 10.15	N/A
Xcode	12.0 or later	N/A
Node.js	16.20.0 or later	N/A
Electron	13.6.7 to 24.8.8	N/A
Requesting test resources and app IDs	N/A	For details, see Preparations.

Procedure

Download the SDK and demo source code.
1. Download the Electron SDK ZIP package (for example, hwmsdk-electron-70.16.5.zip) by referring to Table 1.
2. Decompress the ZIP package to obtain the following files and directories:
  Figure 1 Directory structure of the SDK package
Prepare for the environment.

1. Node.js

2. After installing Node.js, configure the npm mirror.

Before installing the dependency, run the following commands to configure the npm mirror to improve the installation speed.
```
npm config set registry http://registry.npm.taobao.org/
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
```
NOTE:
1. If Node.js has been installed, run the following command to check the Node.js version. The result x64 indicates 64-bit and ia32 indicates 32-bit.
$ node -p "process.arch"
2. If Node.js is not installed, download the required version from the Node.js website.

3. If the preceding mirror addresses cannot be reached, change them to the following addresses:

registry=https://registry.npmmirror.com/

electron_mirror=https://npmmirror.com/mirrors/electron/

4. If error npm error `electron_mirror` is not a valid npm option is reported, manually add the addresses to the .npmrc file in %HOMEDRIVE%%HOMEPATH%. Example addresses: registry=http://registry.npm.taobao.org/

electron_mirror=https://npm.taobao.org/mirrors/electron/
Request an app ID and change the app ID in the demo to the requested one.

For details about how to request an app ID, see Introduction to App ID Authentication.

Replace DEFAULT_APPID in hwmsdk-electron\packages\hwmsdk-electron-demo\src\demoConfig.js with the obtained app ID.

Figure 2 Replacing the app ID
Run the Electron demo.
1. Run the .bat or .sh script in the hwmsdk-electron directory to compile the demo project. The script installs the corresponding environment, copies the SDK library and HwmUisdk.node, converts TS files to JS files, triggers compilation, and runs the demo.
- To run the Windows 32-bit demo when the Node.js version is 32-bit, run run_demo_win32.bat.
- To run the Windows 64-bit demo when the Node.js version is 64-bit, run run_demo_x64.bat.
- To run the macOS demo, run run_demo_mac.sh.
  NOTE:
  The .bat or .sh script can perform the following operations:
  
  Compile TS APIs and generate JS and types files.
  
  Copy the SDK files of the corresponding platform to the corresponding directory (sdk/win32, sdk/x64, or sdk/mac).
  
  Run the demo.
  Figure 3 Electron demo main screen
Use the Electron demo.
- Click Init to initialize the SDK. (ExePath is required only for the 64-bit demo.)
  Figure 4 SDK initialization
NOTE:

ExePath is the absolute path of HwmSdk of the Windows SDK, for example, D:\path\to\hwmsdk-electron-demo-win-x64-100.5.5\hwmsdk-electron-x64\resources\sdk\x64\HwmSdk\HwmSdk.exe.

Figure 5 Login

Figure 6 Creating a meeting