• Platform
  • Framework / Engine
  • iOS
  • Android
  • macOS
  • Windows
  • Linux
  • Web
  • WeChat Mini Program

Teacher-Side Implementation

Update Time:2021-04-25 20:24

1 Basic Flowcharts

The flowcharts below show the key processes related to the teacher-side activities in a large live class scenario.

  1. Teacher login/logout.
  1. Teacher taking/leaving the host role (e.g., turning on/off the camera, microphone).

2 Core API Call Sequence Diagram

You can use ZEGO Express Video SDK (with whiteboard support), ZegoWhiteboardView SDK, ZegoDocsView SDK, ZEGO GoClass backend service, and other ZEGO products and services to build virtual classrooms for different large class scenarios with various features, such as real-time audio and video communication, online whiteboard collaboration, file sharing, and classroom management.

The diagram below is the core API call sequence for your reference.


3 GoClass Business Logic Reference

The following steps introduce the basic implementation process of GoClass, and developers can understand the implementation plan of GoClass based on this.

3.1 Initialize SDK

Initialize the following three SDKs:

  1. Express-Video SDK (including whiteboard function)
  2. ZegoDocsView SDK
  3. ZegoWhiteboardView SDK

ZegoWhiteboardView SDK needs to be initialized after the Express-Video SDK is initialized and before logging in to the room.

For details, please refer to the -[ZegoLoginViewController setupSDK] method.

3.2 Login Room

3.2.1 Get Business Backend Host

Before logging in to the room, you need to obtain the host address of the backend service and replace it in +[ZegoNetworkManager getHostWithEnv] method.

You should build your own GoClass backend service. Please refer to GoClass Backend Service for more details.

3.2.2 Login

Use the ZegoLoginService class to complete the login. After a successful login, the App will jump to the main interface of the classroom.

3.3 Whiteboard and File View Loading

3.3.1 Enter the Room to Get the Whiteboard List

  1. If the whiteboard list is empty, create a blank board and notify Express-Video SDK to create the corresponding whiteboard.

  2. If there is a value in the whiteboard list, judge whether the file is included according to the whiteboard ZegoWhiteboardViewModel.

  • If fileID in ZegoFileInfoModel is an empty string, it means it is a pure whiteboard, and the whiteboard view can be directly added to the ZegoBoardContainer parent view.

  • If fileID in ZegoFileInfoModel has a value, indicating that the whiteboard contains file information, you need to add the file view in the parent view first, and then add the whiteboard view (otherwise the file and the whiteboard cannot be used together). Load the file content according to fileID, and then adjust the whiteboard and file view to the appropriate position and size.

The main business differences between the teacher end and the student end are as follows:

  • When the teacher first enters the room, if the number of whiteboards pulled is 0, the teacher needs to be responsible for creating a new whiteboard.
  • The teacher can manage the rights of the student.

3.3.2 Whiteboard Switching Synchronization

If multiple whiteboards are created at the remote end, the local end can use the following logic to synchronize the switching between the local whiteboard and the remote whiteboard.

After entering the room, Express-Video SDK will call ZegoEventHandler onRoomExtraInfoUpdate:roomID: method, get the ID of the whiteboard being displayed on the remote end according to the method parameters, and then display it on the whiteboard After the list is loaded, find the corresponding ZegoWhiteboardView for display.

3.3.3 Whiteboard Image Element and File Synchronization

After the whiteboard and files are loaded, the whiteboard primitives and the number of pages of the file need to be synchronized with the remote end.

The synchronization of whiteboard primitive objects has been implemented inside the ZegoWhiteboardView SDK. The synchronization of the offset of the whiteboard and the number of file pages needs to be done by the developer using the corresponding method.

Since the contentSize of the whiteboard and the file are the same size, the scroll offset of the file and the whiteboard must be the same, otherwise the graffiti on the whiteboard will correspond to the wrong position of the file. One-to-one correspondence with the whiteboard ZegoWhiteboardViewModel can get the horizontal and vertical offset percentage of the whiteboard. According to the percentage offset, the correct offset of the whiteboard and file view can be calculated, so that it can be consistent with the remote end.

  • Pure whiteboard page count synchronization

Since there is no concept of page count inside the pure whiteboard, the developer needs to define and calculate it according to the offset percentage. For example, the pure whiteboard created in GoClass has a size of "5 * whiteboard view", and there are 5 pages in total. If the vertical offset percentage is 20%, it is currently on page 2 (0.2 * 5 + 1).

  • File page synchronization

Get the total number of pages of the file and the current page number through the ZegoDocsView class.

  • Dynamic PPT synchronization

If it is a dynamic PPT file with animation, you need to call the -[ZegoDocsView playAnimation:] method to synchronize additional animation information.

  • Excel sheet synchronization

Each sheet of the Excel file corresponds to a whiteboard file. After receiving the current whiteboard ID from the remote end, the local end can find the corresponding whiteboard and file view, and call DocsView's -[ZegoDocsView switchSheet:] method can complete the switch of sheet.

4 Core API Reference

4.1 ZEGO GoClass Backend Service

Method Description
login_room Logs in to a classroom.
leave_room Leaves a classroom.
end_teaching Ends a class.
get_attendee_list Gets the list of all online members in a classroom.
get_join_live_list Gets the list of co-hosting members in a classroom.
set_user_info Sets the device status of a user.

For the complete list of APIs, please refer to the GoClass Backend Service.

4.2 ZEGO Express Video SDK (with whiteboard support)

Method Description
createEngineWithAppID Creates a singleton instance of ZegoExpressEngine.
setEventHandler Sets up the callback event handler of the engine.
loginRoom Logs in to a room.
You must log in to a room before publishing and playing a stream.
startPublishingStream Starts publishing a local audio/video stream to the cloud.
stopPublishingStream Stops publishing a local audio/video stream to the cloud.
startPlayingStream Starts playing a remote audio/video stream from the cloud.
stopPlayingStream Stops playing a remote audio/video stream from the cloud.

For the complete list of APIs, please refer to the Express Video SDK API Documents.

4.3 ZegoWhiteboardView SDK

Method Description
initWithCompleteBlock Initializes the SDK.
setConfig Sets the whiteboard configurations.
initWithWhiteboardModel Creates an instance of ZegoWhiteboardView.
getWhiteboardListWithCompleteBlock Gets a list of all whiteboards in the current room.
scrollTo Jumps to the specified position (in percentages on the X and Y axis).

For the complete list of APIs, please refer to the Collaborative Whiteboard API Documents.

4.4 ZegoDocsView SDK

Method Description
initWithConfig Initializes the ZegoDocsView SDK with a ZegoDocsViewConfig instance.
uploadFile Uploads a local file from the client to the cloud for transcoding and save the transcoded file on the cloud.
loadFileWithFileID Loads and renders the specified file onto a view.
flipPage Jumps to the specified page.
scrollTo Jumps to the specified position (in percentages on the X and Y axis).
scaleDocsViewWithScaleFactor Zooms in/out on a document.

For the complete list of APIs, please refer to the File Sharing API Documents.