更新时间:2024-08-16 GMT+08:00
分享

快速入门

在将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,执行步骤1中解压目录下的run_demo_mac.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",
        }
    ];
    

相关文档