本页将介绍如何使用 XYRTC SDK 进行集成多人音视频通话到你的 Electron 项目之中。在开始之前,请确认您已经完成相应的准备工作。
通过官方的Electron Forge创建初始化项目;
项目根目录创建.npmrc
配置文件,配置平台架构方式,例如想要开发和构建Windows ia32架构的应用,可以配置:
arch=ia32
提示
Windows平台下,arch可选配置:ia32、x64
Mac平台下,arch可选配置:x64
注意:再配置完环境变量文件后,建议删除node_modules
目录,并重新安装所有的依赖
$ npm install @xylink/xy-electron-sdk --dev
安装完成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]",
},
},
...
]
}
完成配置工作;
在项目的页面下,编写初始化代码:
import { XYRTC } from "@xylink/xy-electron-sdk";
// 获取 XYRTC 实例
const xyRTC = XYRTC.getXYInstance({
model: "MODEL",
});
// 会议呼叫状态
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 数据即可
});
进行第三方账号登录,登录之后,可直接呼叫:
// 从 准备工作 章节获取企业id(extID)信息
// extUserId: string 第三方用户id
// displayName: 登录名称
xyRTC.loginExternalAccount(extID, extUserId, displayName);
发起会议呼叫:
xyRTC.makeCall(meetingId: string, meetingPwd: string, displayName: string);
xyRTC.endCall();