教师端实现流程

基础流程图

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

1. 教师端登录/登出流程

2. 教师端控制学生权限流程（例如：开启学生摄像头、麦克风、共享权限等）

核心 API 时序图

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

在线课堂示例 demo 业务逻辑参考

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

具体流程

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

初始化

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

• ZegoDocsView SDK
• ZegoWhiteboardView SDK

教师端互动白板和文件共享实现流程

1. 老师进入课堂首先拉取白板列表（getViewList），判断当前课堂是否有白板。

2. 老师可以创建普通纯白板或文件白板。

• 创建普通纯白板：
  1. 使用互动白板 SDK 的 createView(options) 创建白板，其中 options 为创建白板的配置参数。
  2. 使用互动白板 SDK 的 attachView(parent) 渲染白板，其中 parent 是需要挂载的父容器 ID，如 <div id="parent"></div>。
• 创建文件白板：
  1. 使用文件共享 SDK 的 uploadFile 上传文件。
  2. 在监听上传文档 onUpload 中监听文件上传状态，在文件上传并转码成功之后根据转码成功返回的文件 ID 执行创建文件 view。
  3. 使用文件共享 SDK 的 createView 创建文件 view 。
  4. 使用文件共享 SDK 的 loadFile 加载指定的文件。
  5. 加载文件成功后在回调方法 onLoadFile 中创建与文件相匹配白板。
  6. 根据 onLoadFile 回调返回的参数，使用互动白板 SDK 的 createView 创建与文件相匹配的白板。
  7. 使用互动白板 SDK 的 attachView(parent) 渲染白板，其中 parent 是 onLoadFile 回调返回参数中的 viewID。

3. 老师新增/切换课件时通过房间附加消息通知学生同步课件。

• 新增白板时：
  将新增的白板 ID 通过房间附加消息将需要对端同步的白板 ID 通知学生。

• 切换普通白板时：

  1. 老师根据想要切换的普通白板 ID，先在白板列表中查询得到目标白板。
  2. 通过互动白板 SDK 的 attachView(parent) 将要讲课使用的白板渲染出来，其中 parent 是需要挂载的父容器 ID，如 <div id="parent"></div>。
  3. 通过房间附加消息将需要对端同步的白板 ID 通知学生。

• 新增文件白板时：
  将新增的文件白板 ID 通过房间附加消息将需要对端同步的白板 ID 通知学生。

• 切换文件白板时：

  1. 根据想要切换的文件白板 ID，先在白板列表中查询得到目标白板。
  2. 通过白板的白板 ID 和文件信息(fileInfo)，使用文件转码 SDK 的 createView 创建文件 view 。
  3. 使用文件共享 SDK 的 loadFile 加载指定的文件。
  4. 通过互动白板 SDK 的 attachView(parent) 将目标白板渲染出来，其中 parent 是需要挂载的父容器 ID，如 <div id="parent"></div>。
  5. 通过房间附加消息将需要学生同步的白板 ID 通知给学生。

核心 API 参考

ZEGO 在线课堂示例 demo 后台服务

Express-Video SDK （含白板功能）

ZegoWhiteboardView SDK

ZegoDocsView SDK