2024/02/06 15:37:55

集成灵动课堂

本文详细介绍如何将灵动课堂集成到你自己的 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",
  "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.9.40.bundle.js"></script>
    <script src="https://download.agora.io/edu-apaas/release/edu_widget@2.9.40.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.8.0/record_page.html",
        courseWareList: [],
        uiMode: "light", // 设置课堂界面为明亮模式。如需界面为暗黑模式，设为 'dark' 即可。
        widgets: {
          popupQuiz: AgoraSelector, // 答题器widgeet
          countdownTimer: AgoraCountdown, // 倒计时widget
          easemobIM: AgoraHXChatWidget, // IM widget
          mediaPlayer: FcrStreamMediaPlayerWidget, // 视频同步播放器widget
          poll: AgoraPolling, // 投票器widget
          watermark: FcrWatermarkWidget, // 水印widget
          webView: FcrWebviewWidget, // 内嵌浏览器widget
          netlessBoard: FcrBoardWidget, // 互动白板widget
        },
        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 源码：

信息

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

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

Shell

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

运行以下命令进入 flexible-classroom-desktop 目录并切换分支至指定版本。将 {VERSION} 替换为要切换的版本号：
Shell
```
cd flexible-classroom-desktop
```
Shell
```
git checkout release/{VERSION}
```
例如要切换到 2.9.0 版本分支，执行以下命令：
Shell
```
git checkout release/2.9.0
```
声网建议你切换到最新发版分支。参考下图在 GitHub 仓库中查看最新发版分支：

成功拉取代码后，根据你的实际需求，参考自定义课堂 UI 文档修改代码。
修改完代码后，按照以下步骤进行调试：
1. 运行以下命令安装项目依赖：
  Shell
  # 安装项目依赖 yarn install:packages
  如遇安装依赖超时，请切换到淘宝镜像源或其他可用镜像源。
  Shell
  # 切换到淘宝镜像 yarn config set registry https://registry.npmmirror.com/ # 安装项目依赖 yarn install:packages
2. 通过以下命令以开发模式运行项目。
  Shell
  yarn dev:classroom:electron

完成开发后，通过以下命令打包 SDK 或应用：

打包 Electron macOS 客户端：

Shell
# 打包 SDK JS 代码
yarn pack:classroom:sdk
# 打包插件 JS 代码
yarn pack:classroom:plugin
# 打包应用程序代码
yarn ci:build
# 打包 Electron macOS 客户端
yarn pack:electron:mac

打包 Electron Windows 客户端：

Shell
# 打包 SDK JS 代码
yarn pack:classroom:sdk
# 打包插件 JS 代码
yarn pack:classroom:plugin
# 打包应用程序代码
yarn ci:build
# 打包 Electron Windows 客户端
yarn pack:electron:win

常见问题

Linux 系统下安装 agora-electron-sdk 模块失败

如果你在 Linux 系统下安装 agora-electron-sdk 模块失败，是由于目前使用的 agora-electron-sdk 不支持 Linux 操作系统，可参考以下步骤解决：

修改项目根目录下 package.json 中的 agora_electron 配置参数，指定 platform 为 win32：

JSON
"agora_electron": {
  "electron_version": "12.0.0",
  "prebuilt": true,
  "platform": "win32"
}

重新执行依赖安装步骤

如何指定打包 Electron 应用的系统架构？

修改 packages/agora-demo-app/package.json 文件中 pack:mac 和 pack:win 两个命令，在末尾加 arch 参数指定系统架构，这里我们设定为 64 位操作系统架构，若需要打包 32 位操作系统则改为 --ia32：
JSON
```
"pack:mac": "yarn electron:copy:electron:mac && electron-builder --mac -p never --x64",
"pack:win": "yarn electron:copy:electron:win && electron-builder --win -p never --x64",
```
修改项目根目录下 package.json 中的 agora_electron 配置参数，指定 arch 为 x64，若需要打包 32 位操作系统则改为 ia32：
JSON
```
"agora_electron": {
  "electron_version": "12.0.0",
  "prebuilt": true,
  "arch": "x64"
}
```
删除 node_modules/agora-electron-sdk 文件夹，执行 yarn install --check-files 命令重新安装依赖。
执行打包命令进行打包。

集成方式​

使用灵动课堂的默认 UI​

修改灵动课堂的默认 UI​

常见问题​

Linux 系统下安装 agora-electron-sdk 模块失败​