集成灵动课堂

本文详细介绍如何将灵动课堂集成到你自己的 Electron 项目中。

集成方式

灵动课堂 Electron 端支持多种集成方式。根据是否需要修改课堂 UI，你可选择不同的集成方式：

如果你直接使用灵动课堂的默认 UI，无需修改灵动课堂的代码，则可选择 CDN 集成。
如果你想要基于灵动课堂的默认 UI 进行修改，则可选择通过 GitHub 源码集成。

使用灵动课堂的默认 UI

如果你直接使用灵动课堂的默认 UI，无需修改灵动课堂的代码，则可选择 CDN 集成。这种方式需要你已有一个 Electron 项目，使用的 Electron 版本不低于 12.0.0。

在 Electron 入口文件中添加以下代码：

JavaScript
// 引入 electron 模块
const electron = require('electron');
// 禁止复用渲染进程
app.allowRendererProcessReuse = false;

创建 BrowserWindow 对象时传入以下参数：

JavaScript
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 文件中增加以下依赖和配置：

JSON
"agora_electron": {
  "electron_version": "12.0.0",
  "prebuilt": true
},
"dependencies": {
  ...
  "agora-electron-sdk": "3.6.1-rc.9-build.817",
  "agora-rdc-electron": "1.1.0",
  "adm-zip": "0.4.14"
}

在 HTML 文件中引入声网 Classroom SDK 并启动灵动课堂：

html
<!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.0.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；生产或安全环境下，强烈建议你使用服务器生成的 RTM 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。你可以使用临时 token，也可以参考使用 Token 鉴权从服务器生成 token。

注意

声网提供的客户端临时 Token 生成器仅适用于运行 App 快速测试。在正式环境中，为确保安全，你必须参考使用 Token 鉴权文档，在服务端部署并生成 Token。生成的 token 传入的 userId 需要和 launch 方法中传入的参数 userUuid 保持一致，否则生成的 token 无效。

修改灵动课堂的默认 UI

如果你想要基于灵动课堂的默认 UI 进行修改，则参考以下步骤集成灵动课堂的 GitHub 源码：

信息

开始前请确保你的设备上已准备好开发环境。

运行以下命令克隆仓库到本地：

Bash

git clone https://github.com/AgoraIO-Community/flexible-classroom-desktop.git

运行以下命令进入 flexible-classroom-desktop 目录并切换分支至指定版本。将 {VERSION} 替换为要切换的版本号：
Bash
```
cd flexible-classroom-desktop
```
Bash
```
git checkout release/{VERSION}
```
例如要切换到 2.8.20 版本分支，执行以下命令：
Bash
```
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

执行以下命令复制一个环境变量配置文件：
Bash
```
cp .env.example packages/agora-classroom-sdk/.env
```
成功拉取代码后，根据你的实际需求，参考自定义课堂 UI 文档修改代码。
修改完代码后，按照以下步骤进行调试：
1. 执行以下命令安装依赖库：
  Bash
  yarn install
  Bash
  yarn bootstrap
2. 通过以下命令以开发模式运行项目：
  Bash
  yarn dev:electron
完成开发后，通过以下命令打包 SDK 或应用：
- 打包 Electron macOS 客户端：
  Bash
  yarn build:demo yarn pack:electron:mac
- 打包 Electron Windows 客户端：
  Bash
  yarn build:demo yarn pack:electron:win

集成方式​

使用灵动课堂的默认 UI​

修改灵动课堂的默认 UI​

集成方式

使用灵动课堂的默认 UI

修改灵动课堂的默认 UI