文档首页/ 华为云会议 Meeting/ 客户端SDK参考/ Electron SDK/ 快速入门
更新时间：2024-12-27 GMT+08:00
查看PDF
分享

快速入门

在将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",
    }
];

父主题： Electron SDK