本文详细介绍如何将灵动课堂集成到你自己的 Electron 项目中。
灵动课堂 Electron 端支持多种集成方式。根据是否需要修改课堂 UI,你可选择不同的集成方式:
如果你直接使用灵动课堂的默认 UI,无需修改灵动课堂的代码,则可选择 CDN 集成。这种方式需要你已有一个 Electron 项目,使用的 Electron 版本不低于 12.0.0。
在 Electron 入口文件中添加以下代码:
// 引入 electron 模块
const electron = require('electron');
// 禁止复用渲染进程
app.allowRendererProcessReuse = false;
创建 BrowserWindow
对象时传入以下参数:
mainWindow = new BrowserWindow({
...
webPreferences: {
...
autoplayPolicy: "no-user-gesture-required",
nodeIntegration: true,
contextIsolation: false,
webSecurity: false,
webviewTag: true,
enableRemoteModule: true,
nativeWindowOpen: true,
backgroundThrottling: false
}
});
在 package.json
文件中增加以下依赖和配置:
"agora_electron": {
"electron_version": "12.0.0",
"prebuilt": true
},
"dependencies": {
...
"agora-electron-sdk": "3.6.1-rc.9-build.817",
}
在 HTML 文件中引入声网 Classroom SDK 并启动灵动课堂:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 灵动课堂教育场景 -->
<script src="https://download.agora.io/edu-apaas/release/edu_sdk@2.8.20.bundle.js"></script>
</head>
<body>
<style>
#root {
width: 100%;
height: 100%;
}
</style>
<div id="root"></div>
<script type="text/javascript">
AgoraEduSDK.config({
appId: 'Your App ID',
region: 'NA'
});
AgoraEduSDK.launch(document.querySelector('#root'), {
userUuid: 'user id',
userName: 'user name',
roomUuid: 'room id',
roleType: 1, // 用户角色:1 为老师,2 为学生。
roomType: 0, // 房间类型:0 为一对一,2 为大班课,4 为小班课。
roomName: 'room name',
pretest: true, // 是否开启课前设备检测。
rtmToken: 'rtm token', // 测试环境下,你可以使用临时 RTM Token;生产或安全环境下,强烈建议你使用服务器生成的 Token。
language: 'zh', // 课堂界面的语言。如需界面为英文,设为 'en' 即可。
duration: 60 * 30, // 课程时间,单位为秒。
recordUrl: 'https://solutions-apaas.agora.io/apaas/record/dev/2.3.3/record_page.html',
courseWareList: [],
uiMode: 'light', // 设置课堂界面为明亮模式。如需界面为暗黑模式,设为 'dark' 即可。
listener: (evt, args) => {
},
}).then(() => {
console.log('start launch');
}).catch((e) => {
console.error('fail to launch', e);
});
</script>
</body>
</html>
示例代码中需要传入 rtmToken
。你可以参考获取 RTM Token 了解什么是 RTM Token,如何获取测试用途的临时 RTM Token,如何从服务器生成 RTM Token。
userId
需要和 launch
方法中传入的参数 userUuid
保持一致,否则生成的 token 无效。如果你想要基于灵动课堂的默认 UI 进行修改,则参考以下步骤集成灵动课堂的 GitHub 源码:
运行以下命令克隆仓库到本地:
git clone https://github.com/AgoraIO-Community/flexible-classroom-desktop.git
运行以下命令进入 flexible-classroom-desktop
目录并切换分支至指定版本。将 {VERSION} 替换为要切换的版本号:
cd flexible-classroom-desktop
git checkout release/{VERSION}
例如要切换到 2.8.20 版本分支,执行以下命令:
git checkout release/2.8.20
声网建议你切换到最新发版分支。参考下图在 GitHub 仓库中查看最新发版分支:
运行以下命令拉取子模块:
git submodule update --init --recursive packages/agora-classroom-sdk
git submodule update --init --recursive packages/agora-proctor-sdk
git submodule update --init --recursive packages/agora-plugin-gallery
执行以下命令复制一个环境变量配置文件:
cp .env.example packages/agora-classroom-sdk/.env
成功拉取代码后,根据你的实际需求,参考自定义课堂 UI 文档修改代码。
修改完代码后,按照以下步骤进行调试:
执行以下命令安装依赖库:
yarn install
yarn bootstrap
通过以下命令以开发模式运行项目:
yarn dev:electron
完成开发后,通过以下命令打包 SDK 或应用:
打包 Electron macOS 客户端:
yarn build:demo
yarn pack:electron:mac
打包 Electron Windows 客户端:
yarn build:demo
yarn pack:electron:win