快速启动灵动课堂

文档中心





灵动课堂

Agora.io 社区





快速启动灵动课堂

更新时间 2021/09/24 10:03:51

根据本文指导在你的 Web 项目中快速集成 Agora Classroom SDK 并调用 API 启动灵动课堂。

技术原理

下图展示了启动灵动课堂的基本流程。

当你的 app 客户端请求加入灵动课堂时：

你的 app 客户端向 app 服务端申请 RTM Token。
你的 app 服务端使用 Agora App ID、App 证书和用户 ID 生成一个 RTM Token，返回给 app 客户端。详见生成 RTM Token。
你的 app 客户端调用 API 并传入用户 ID、房间 ID 和 RTM Token 启动灵动课堂。灵动课堂云服务会根据你传入的房间 ID 为该课题自动创建一个房间。

前提条件

已在 Agora 控制台创建 Agora 项目，获取 Agora App ID、App 证书并配置 aPaaS 服务。
灵动课堂使用 RTM Token 进行鉴权。在测试阶段，你可以使用 Agora 提供的临时 RTM Token 生成器，传入你获取到的 App ID 和 App 证书，然后自行填入一个用户 ID，快速生成一个临时 RTM Token，有效期为 24 小时。
安装最新稳定版桌面端 Google Chrome 浏览器。
物理音视频采集设备，如内置摄像头和麦克风。
安装 Node.js 和 npm
安装 yarn

启动灵动课堂

参考以下步骤启动灵动课堂：

1. 创建 Web 项目

参考以下步骤创建 Web 项目：

在本地创建一个名为 agora_flexible_classroom 的文件夹。
在 agora_flexible_classroom 文件夹内创建一个 index.html 文件。

2. 实现 app 业务逻辑

在你的 Web 项目里启动灵动课堂，需进行以下步骤：

通过 CDN 链接将 Agora Classroom SDK 集成到你的项目中。
调用 AgoraEduSDK.config 方法全局配置 SDK。
调用 AgoraEduSDK.launch 方法启动灵动课堂。

你可以将以下代码复制到 index.html 文件，实现以上 API 的调用逻辑。复制时需要将 launch 方法中传的 appID 和 rtmToken 分别替换为你的 App ID 和临时 RTM Token，并确保 userUuid 和你在生成临时 RTM Token 时使用的用户 ID 保持一致。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AgoraFlexibleClassroomDemo</title>
  <!-- 此处集成 Agora Classroom SDK -->
  <script src="https://download.agora.io/edu-apaas/release/edu_sdk_1.1.5.js"></script>
</head>

<body>
  <style>
    #root1 {
      width: 100%;
      height: 100%;
    }
  </style>
  <div id="root1"></div>
  <script type="text/javascript">
    AgoraEduSDK.config({
      // 此处替换成你的 App ID
      appId: "<your_app_id>",
    })
    AgoraEduSDK.launch(
      document.querySelector("#root1"), {
        // 此处替换成你的 RTM Token
        rtmToken: "<your_rtm_token>",
        // 请确保此次的用户 ID 和你在生成临时 RTM Token 时使用的用户 ID 保持一致
        userUuid: "<your_user_id>",
        userName: "teacher",
        roomUuid: "321",
        roomName: "demo-class",
        roleType: 1,
        roomType: 0,
        pretest: true,
        language: "en",
        startTime: new Date().getTime(),
        duration: 60 * 30,
        courseWareList: [],
        listener: (evt) => {
          console.log("evt", evt)
        }
      }
    )
  </script>
</body>
</html>

运行 Web 项目

在浏览器中打开 index.html 文件，你可以看到以下页面：

后续步骤

如果 Agora Classroom SDK 中默认的用户界面无法满足你的需求，你可以参考自定义课堂 UI 文档，获取 Agora Classroom SDK 的源码，自行开发、调试和编译。