快速入门

在将Electron SDK集成到第三方应用中前，请先按照“跑通Electron Demo”中的指导熟悉Electron客户端中集成华为云会议Electron SDK的基本流程。

将华为云会议Electron SDK集成到第三方的Electron客户端的步骤如下：

1. 下载Electron SDK。
2. 解压Electron SDK，得到如下目录及文件：
   图1 SDK包目录结构

   

   说明：

   1. 如果是mac平台，必须在mac电脑上解压Electron SDK，否则会造成framework损坏，导致无法使用。

3. 拷贝Electron SDK文件
   说明：

   1. 如果已经安装node，请先确定自己node版本是32位还是64位，可以执行cmd/shell命令查看node版本的位数，结果：x64为64位， ia32为32位。

   $ node -p "process.arch"

   2. 如果没有安装node，可到nodejs官网下载对应版本。

   • 如果平台是windows，node版本是32位，执行步骤1中解压目录下的run_demo_win32.bat
   • 如果平台是windows，node版本是64位，执行步骤1中解压目录下的run_demo_x64.bat
   • 如果平台是mac，Intel芯片版，执行步骤1中解压目录下的run_demo_mac.sh
   • 如果平台是mac，M系列芯片版，执行步骤1中解压目录下的run_demo_mac_arm64.sh
   说明：

   bat或sh脚本的作用：

   • 编译ts接口，生成js和types文件。
   • 将对应平台的的SDK文件拷贝到对应的目录下("sdk/win32"、"sdk/x64"、"sdk/mac")。
   • 运行Demo。
   • 复制js和types目录及其下的子目录和文件、根目录下面的package.json到项目的某个目录下（如果项目使用的是TypeScript，则复制ts目录及其下的子目录和文件）。
     说明：

     第三方应用需要调用的JavaScript接口都在js文件夹中，入口文件为js\index.js（如果项目使用的是TypeScript，入口文件为ts\index.ts）。

4. 增加依赖

   参考demo中package.json增加依赖。

   1 2 3

   "dependencies": { "electron": "^13.6.7" },

5. 通过import方式，引用Electron sdk的接口文件所在目录，初始化UISDKService对象，同时设置node路径加载sdk

   参考demo中的AppService.js/NotifyService.js代码。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   import UISDKService from 'hwmsdk-electron'; const os = window.require('os'); const platform = os.platform(); const arch = os.arch(); const path = window.require("path"); let instance = null; export default class ApiService { constructor() { if (!instance) { instance = this; // node路径请根据实际的路径传入UISDKService构造函数 let _path = (platform == 'darwin' ? './../sdk/mac/' : arch == 'x64' ? './../sdk/x64/' : './../sdk/win32/'); let nodePath = path.join(window.__dirname, (_path + "HwmUisdk.node")); console.log("ApiService nodePath", nodePath); this.uisdkService = new UISDKService(nodePath); } return instance; } }

6. 接口调用

   华为云会议的接口调用和消息通知的处理时序请参考“典型场景接口调用概览”。

   第三方应用可以调用的JavaScript接口都在js/api/中，可以参考Demo中的AppService/ApiService.js，调用这些接口。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   import UISDKService from 'hwmsdk-electron'; const os = window.require('os'); const platform = os.platform(); const arch = os.arch(); const path = window.require("path"); let instance = null; export default class ApiService { constructor() { if (!instance) { instance = this; // node路径请根据实际的路径传入UISDKService构造函数 let _path = (platform == 'darwin' ? './../sdk/mac/' : arch == 'x64' ? './../sdk/x64/' : './../sdk/win32/'); let nodePath = path.join(window.__dirname, (_path + "HwmUisdk.node")); console.log("ApiService nodePath", nodePath); this.uisdkService = new UISDKService(nodePath); } return instance; } init(initInfo) { console.log("init, in param = ", initInfo); let ret = this.uisdkService.init(initInfo); console.log("init, out data = ", ret); return ret; } }

7. 订阅事件通知

   订阅第三方可以收到的通知JavaScript接口也都在js/api/中，可以参考Demo中的AppService/NotifyService.js，订阅这些通知。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

   import UISDKService from 'hwmsdk-electron'; const os = window.require('os'); const platform = os.platform(); const arch = os.arch(); const path = window.require("path"); export default class NotifyService { static setNotifyFunc() { let _path = (platform == 'darwin' ? './../sdk/mac/' : arch == 'x64' ? './../sdk/x64/' : './../sdk/win32/'); let nodePath = path.join(window.__dirname, (_path + "HwmUisdk.node")); console.log("NotifyService nodePath", nodePath); let uisdkService = new UISDKService(nodePath); uisdkService.getConfMgrApi().setOnConfListChangedCB(NotifyService.handleOnConfListChanged); } static handleOnConfListChanged(confListInfo) { console.log('OnConfListChanged', ', confListInfo = ', confListInfo); let _confListInfo = window.sessionStorage.getItem("confListInfo"); _confListInfo = _confListInfo ? JSON.parse(_confListInfo) : []; console.log("sessionStorage confList:", _confListInfo); let conflistNew = confListInfo.confListItem; let _data = JSON.stringify(conflistNew ? conflistNew : []); window.sessionStorage.setItem("confListInfo", _data); } }

8. 使用Electron sdk提供的枚举（可选）

   第三方可以直接使用Electron sdk提供的枚举定义，拷贝packages/hwmsdk-electron/js/Api/enum.js和packages/hwmsdk-electron/types/Api/enum.d.ts到项目的某个目录下，参考Demo中的packages/hwmsdk-electron-demo/src/Constants/typeOption.js，使用这些枚举定义。

   1 2 3 4 5 6 7 8 9 10 11 12

   import { MediaType } from "./enum"; export const MediaTypeOptions = [ { value: MediaType.HWM_MEDIA_TYPE_AUDIO, label: "Audio", }, { value: MediaType.HWM_MEDIA_TYPE_VIDEO, label: "Video", } ];