Loading...

    视频通话

    本页将介绍如何使用 XYRTC SDK 进行集成多人音视频通话到你的 Electron 项目之中。在开始之前，请确认您已经完成相应的准备工作。

    环境要求

    1. Electron版本要求：v10.0.0+

    支持的平台

    1. Windows7+
    2. Mac

    时序图

    基础流程引导

    1、初始化项目

    通过官方的Electron Forge创建初始化项目；

    2、配置平台架构

    项目根目录创建.npmrc配置文件，配置平台架构方式，例如想要开发和构建Windows ia32架构的应用，可以配置：

    arch=ia32

    提示

    Windows平台下，arch可选配置：ia32、x64

    Mac平台下，arch可选配置：x64


    注意：再配置完环境变量文件后，建议删除node_modules目录，并重新安装所有的依赖

    3、安装SDK库

    $ npm install @xylink/xy-electron-sdk --dev

    4、运行配置

    安装完成SDK库之后，需要在开发环境下，针对Windows平台做特殊配制（Mac平台可忽略此步骤）：

    1、执行：根目录 -> node_modules -> @xylink -> xy-electron-sdk -> dll 文件夹下，将I420ToARGB.cso文件复制到 node_modules\electron\dist 目录下；

    提示

    此步骤是解决本地开发时，调用摄像头采集 crash 的问题，打正式包时，此步骤不需要，会自动 copy 此文件。

    2、渲染层使用Nodejs API，需在主进程开启权限：

    const window = new BrowserWindow({
      ...,
      // 开启渲染进程使用Node api
      webPreferences: {
        // 开启渲染进行使用Node 
        nodeIntegration: true,
        // 关闭上下文隔离
        contextIsolation: false,
      }
    });

    3、SDK使用了.node文件，需要在 Webpack（Vue 项目在 vue.config.js）配置文件中增加处理.node文件的 Loader 处理器，详细配置见 xy electron sdk 常见问题记录

    $ yarn add node-loader --dev

    // 在webpack中配置，vue项目在vue.config.js中配置
    // 具体到项目中，可能需要区分开发环境和编译环境配置，因为加载.node文件路径地址不同
    // 此处只是示例演示，详细配置可以参考demo程序的配置
    module: {
      rules: [
          {
            test: /\.node$/,
            loader: "node-loader",
            options: {
              // 这里需要区分环境
              name: "[name].[ext]",
            },
          },
          ...
      ]
    }

    完成配置工作；

    5、创建 XYRTC 对象

    在项目的页面下，编写初始化代码：

    import { XYRTC } from "@xylink/xy-electron-sdk";

    // 获取 XYRTC 实例
    const xyRTC = XYRTC.getXYInstance({
      model: "MODEL",
    });

    6、监听事件

    // 会议呼叫状态
    xyRTC.on("CallState", (e) => {
      const { state, reason } = e;

      if (state === "Connected") {
        message.info("入会成功");
      } else if (state === "Disconnected") {
        // 异常退会
        message.info(reason);
      }
    });

    // 登录回调事件
    xyRTC.on("LoginState", (e) => {
      if (e.state === "Logined") {
        message.info("登录成功");
      }
    });

    // Layout 布局结果数据，用来展示参会成员画面数据
    xyRTC.on("VideoStreams", (e) => {
      // 直接渲染 layout list 数据即可
    });

    7、第三方登录

    进行第三方账号登录，登录之后，可直接呼叫：

    // 从 准备工作 章节获取企业id（extID）信息
    // extUserId： string 第三方用户id
    // displayName： 登录名称
    xyRTC.loginExternalAccount(extID, extUserId, displayName);

    8、呼叫会议

    发起会议呼叫：

    xyRTC.makeCall(meetingId: string, meetingPwd: string, displayName: string);

    9、挂断

    xyRTC.endCall();


    2024-12-18 18:03:18
    导出PDF文档
    意见反馈