学生端实现流程

基础流程图

以下展示了小班课场景的重要流程，可根据流程实现教学生端相关功能。

1. 学生端登录/登出流程

核心 API 时序图

参考以下时序图，搭配Express Video SDK、ZegoWhiteboardView SDK、ZegoDocsView SDK、ZEGO GO课堂后台服务可实现小班课场景的相关功能，包括课堂管理、实时音视频通讯、互动白板、文件共享等基础功能。

GO课堂业务逻辑参考

以下步骤介绍了GO课堂的基础实现流程，开发者可以据此理解GO课堂的实现方案。

具体流程

1. 填写 constants_data.js 中项目所需参数，运行项目。
2. 调用业务后台登录接口 this.loginRoomBiz() 。
3. 初始化 SDK this.initClient() 。
4. 注册监听 SDK 回调方法 this.initLiveRoom() 。
5. 调用 SDK 登录房间方法 this.loginRoom() 。
6. GO课堂具体业务实现。

初始化

根据环境不同，获取对应的 AppID 。然后各个 SDK 再进行相应初始化，包括以下两个 SDK：

• ZegoDocsView SDK
• ZegoWhiteboardView SDK

学生端互动白板和文件共享实现流程

1. 获取房间白板列表（getViewList），在本地维护一个白板列表。

2. 对端新增白板/文件操作：

• 对端新增白板：

  1. 对端新增白板，会触发 viewAdd 回调方法，获得新增白板，更新本地白板列表。
  2. 监听房间附加信息，获得白板 ID 。
  3. 在白板列表中查询得到目标白板。
  4. 通过互动白板 SDK 的 attachView(parent) 将目标白板渲染出来，其中 parent 是需要挂载的父容器 ID，如 <div id="parent"></div> 。

• 对端新增文件：

  1. 监听房间附加信息，获得白板 ID 。

  2. 在白板列表中查询得到目标白板。

  3. 通过互动白板 SDK 的 getFileInfo() 判断该白板是否文件白板。

  4. 文件共享 SDK 的 createView 创建文件 view 。

  5. 使用文件共享 SDK 的 loadFile 加载指定的文件。

  6. 加载文件转码成功后在回调方法中创建与文件相匹配白板 onLoadFile。

  7. 根据 onLoadFile 回调返回的参数，使用互动白板 SDK 的 createView 创建与文件相匹配的白板。

  8. 使用互动白板 SDK 的 attachView(parent) 渲染白板，其中 parent 是 onLoadFile 回调返回参数中的 viewID。

3. 对端切换白板/文件操作：

• 对端切换白板：
  1. 监听房间附加信息，获得切换的白板 ID。
  2. 在白板列表中查询得到目标白板。
  3. 通过互动白板 SDK 的 attachView(parent) 将目标白板渲染出来，其中 parent 是需要挂载的父容器 ID，如 <div id="parent"></div> 。
• 对端切换文件：
  1. 监听房间附加信息，获得切换的文件白板 ID。
  2. 在白板列表中查询得到目标文件白板。
  3. 根据文件白板上的文件信息(fileInfo)，通过文件转码 SDK 的 createView 创建文件视图。
  4. 使用文件共享 SDK 的 loadFile 加载指定的文件。
  5. 通过互动白板 SDK 的 attachView(parent) 将目标文件白板渲染出来，其中 parent 是 onLoadFile 回调返回参数中的 viewID。

核心 API 参考

ZEGO GO课堂后台服务

Express-Video SDK （含白板功能）

ZegoWhiteboardView SDK

ZegoDocsView SDK