Implementation

1 Overview

1.1 Concept Explanation

• ZegoExpress-Video SDK: ZEGO audio and video interactive SDK can provide the real-time signaling transmission capabilities required by interactive whiteboards. The interactive whiteboard SDK must be used with this SDK.
• Interactive whiteboard SDK and ZegoWhiteboardView SDK: both refer to the SDK that provides the ZEGO interactive whiteboard service (ZegoWhiteboard).
• ZegoWhiteboardView: The ZegoWhiteboardView view used directly by the developer during the code implementation process.
• Whiteboard: The whiteboard model stored on the server provided by the ZegoWhiteboardView SDK. Users can access various information of the whiteboard through this model, including creating ZegoWhiteboardView through this model.

1.2 Document Introduction

This article is divided into two parts to introduce the ZegoWhiteboardView SDK:

1. Create a whiteboard and use basic functions: Starting from implementing a simple whiteboard, demonstrate the basic process of introducing SDK, logging in to the room, creating ZegoWhiteboardView, displaying ZegoWhiteboardView, using graffiti tools, and synchronizing whiteboard content with other users .
2. Get the created whiteboard and show it:
   • When entering a room with multiple whiteboards, how to get the existing ZegoWhiteboardView list and display it on the interface correctly;
   • When other users add or delete whiteboards, how to correctly handle the views locally.

2 Prerequisites

• Create a project in ZEGO Console and apply for a valid AppID and AppSign. For details, please refer to Console - Project Management.

• Integrate ZegoWhiteboardView SDK in the project. For details, please refer to Quick Starts - Integration.

3 Create a Whiteboard and Use Basic Functions

3.1 Introduce and Initialize the SDK

3.1.1 Introducing Header Files

// Introduce ZegoExpress-Video SDK header file
#import <ZegoExpressEngine/ZegoExpressEngine.h>
// Introduce ZegoWhiteboardView SDK header file
#import <ZegoWhiteboardView/ZegoWhiteboardView.h>

3.1.2 Initialize ZegoExpress-Video SDK

Initialize ZegoExpress-Video SDK, for details, please refer to Real-time Audio and Video - Quick Starts - Implementation.

ZegoEngineProfile *profile = [ZegoEngineProfile new];
// The AppID value you get from the ZEGO Admin console.
profile.appID = appID; 
// The AppSign value (64 characters) you get from the ZEGO Admin Console.
profile.appSign = appSign; 
// Use the general scenario.
profile.scenario = ZegoScenarioGeneral; 
// Create a ZegoExpressEngine instance and set eventHandler to [self]. If eventHandler is set to [nil], no callback will be received. You can set up the event handler later by calling the [-setEventHandler:] method.
[ZegoExpressEngine createEngineWithProfile:profile eventHandler:self];

3.1.3 Initialize ZegoWhiteboardView SDK

1. Use the initWithCompleteBlock interface of ZegoWhiteboardManager to initialize the ZegoWhiteboardView SDK.

If the errorCode in the callback completeBlock is 0, it means the initialization is successful and more operations can be performed. For errorCode, please refer to Common Error Code.

[[ZegoWhiteboardManager sharedInstance] initWithCompleteBlock:^(ZegoWhiteboardViewError errorCode) {
     //errorCode = 0 means initialization is successful
}];

2. Listen for callbacks

Set the agent of ZegoWhiteboardManager to monitor common callback events: [[ZegoWhiteboardManager sharedInstance] setDelegate:self]. It is recommended to pay attention to the following events:

//When other users in the room create a new ZegoWhiteboardView, they will receive a callback for adding ZegoWhiteboardView
//Users can add the new whiteboardView to the view
-(void)onWhiteboardAdd:(ZegoWhiteboardView *)whiteboardView;

//When other users in the room delete ZegoWhiteboardView, they will receive a callback for the removal of ZegoWhiteboardView
//Users can remove the corresponding ZegoWhiteboardView according to the whiteboardID
-(void)onWhiteboardRemoved:(ZegoWhiteboardID)whiteboardID;

3.2 Login Room

For details of the error code, please refer to Login Room Error Code .

// Create user object
ZegoUser *user = [ZegoUser userWithUserID:@"user1"];
// Start to log in to the room
[[ZegoExpressEngine sharedEngine] loginRoom:@"room1" user:user];

3.3 Create ZegoWhiteboardView

1. Initialize ZegoWhiteboardViewModel and set the properties.
   • The four attributes of aspectWidth, aspectHeight, roomID, and name are required. The following example code creates ZegoWhiteboardView with an aspect ratio of 16:9 and 5 pages in the horizontal direction.
   • The roomID needs to be the same as the roomID when logging in to the room.

//Create a whiteboard model
ZegoWhiteboardViewModel *model = [[ZegoWhiteboardViewModel alloc] init];
model.aspectWidth = 16.0 * 5; // The equal width of the whiteboard we want to create, if we create a whiteboard with more than one page, we need to multiply it by the multiple of the corresponding number of pages
model.aspectHeight = 9.0; // the height of the whiteboard you want to create
model.roomID = @"123456"; //Pass in the room ID, which is convenient for the receiving end to judge
model.name = @"Whiteboard";

2. Call the createWhiteboardView interface to create ZegoWhiteboardView.

After the creation is successful, other users in the same room will receive the agent callback of onWhiteboardAdd.

[[ZegoWhiteboardManager sharedInstance] createWhiteboardView:model completeBlock:^(ZegoWhiteboardViewError errorCode, ZegoWhiteboardView *whiteboardView) {
   whiteboardView.frame = CGRectMake(0, 0, 500, 300);
   [self.view addSubView: whiteboardView];
}];

3. Show ZegoWhiteboardView

Set the frame of the whiteboardView obtained in the completeBlock callback and add it to the view to display the ZegoWhiteboardView.

whiteboardView.frame = CGRectMake(0, 0, 500, 300);
[self.view addSubView: whiteboardView];

3.4 Experience the Basic Functions of ZegoWhiteboardView SDK

3.4.1 Set Drawing Tools

1. Turn on the drawing function of ZegoWhiteboardView.

• Set setWhiteboardOperationMode to ZegoWhiteboardOperationModeDraw, you can turn on ZegoWhiteboardView The drawing function and turn off the scrolling function at the same time.
• Set setWhiteboardOperationMode to ZegoWhiteboardOperationModeScroll, the drawing function will be turned off and the scrolling function will be turned on at the same time.

[currentWhiteboardView setWhiteboardOperationMode:ZegoWhiteboardOperationModeDraw]

2. Set the drawing tool type.

Set the toolType property of the ZegoWhiteboardManager class to modify the tool type of ZegoWhiteboardView. Currently, 10 tools are supported.

ZegoWhiteboardViewToolNone, //not selected
ZegoWhiteboardViewToolPen // graffiti brush
ZegoWhiteboardViewToolText, // text
ZegoWhiteboardViewToolLine, // straight line
ZegoWhiteboardViewToolRect, // rectangle
ZegoWhiteboardViewToolEllipse, // circle
ZegoWhiteboardViewToolSelector ,// select primitives
ZegoWhiteboardViewToolEraser, // eraser
ZegoWhiteboardViewToolLaser, // Laser pointer
ZegoWhiteboardViewToolCustomImage, // Custom graphics tool

3. Set the tool to ZegoWhiteboardViewToolPen graffiti pen.

// 1. Set the whiteboard tool as a brush
[ZegoWhiteboardManager sharedInstance].toolType = ZegoWhiteboardViewToolPen;
[ZegoWhiteboardManager sharedInstance].brushColor = [UIColor redColor];//brush color, the default is red
[ZegoWhiteboardManager sharedInstance].brushSize = 10;//brush thickness, the default is 16

After setting the graffiti brush successfully, press and move your finger within the range of whiteboardView to see the graffiti effect displayed on the whiteboardView.

3.4.2 Synchronize the Content on ZegoWhiteboardView

Different users only need to join the same room, get the ZegoWhiteboardView list through getWhiteboardListWithCompleteBlock, and add ZegoWhiteboardView to the interface to observe ZegoWhiteboardView The synchronization of the primitives and positions on the display.

3.4.3 Scroll ZegoWhiteboardView

Call scrollToHorizontalPercent method to make ZegoWhiteboardView scroll to the corresponding position.

• horizontalPercent represents the percentage of the horizontal position, the value range: 0 ~ 1.0;
• verticalPercent represents the vertical displacement percentage, the value range: 0 ~ 1.0.

CGFloat horizontalPercent = 0.5; //Horizontal position percentage
CGFloat verticalPercent = 0; //Vertical position percentage
[self scrollToHorizontalPercent:horizontalPercent
                 verticalPercent:verticalPercent
                 completionBlock:nil];

3.4.4 Remove Whiteboard

Call the destroyWhiteboardID interface of the ZegoWhiteboardManager class to remove the whiteboard.

After the removal is successful, users in the same room will receive the proxy callback of - (void)onWhiteboardAdd:(ZegoWhiteboardView *)whiteboardView.

 [[ZegoWhiteboardManager sharedInstance] destroyWhiteboardID:whiteboardID completeBlock:^[(ZegoWhiteboardViewError errorCode, ZegoWhiteboardID whiteboardID) {
  //After the whiteboard is successfully removed, the corresponding ZegoWhiteboardView can be removed according to the whiteboardID
 if (errorCode == ZegoWhiteboardViewSuccess) {
         [self.whiteboardView removeFromSuperview];
 }
}];

4 Get and Display the Created Whiteboard

4.1 Initialization

Please refer to 3.1 Import and Initialize SDK and 3.2 Login Room to initialize ZegoWhiteboardView SDK and log in to the room.

4.2 Get the List of ZegoWhiteboardView Created in the Room

Call the getWhiteboardListWithCompleteBlock interface of ZegoWhiteboardManager to get the ZegoWhiteboardView list created in the room.

The user can directly add the obtained ZegoWhiteboardView to the interface for display. The user can use the whiteboardModel property of ZegoWhiteboardView Get whiteboard information.

//Get the list of ZegoWhiteboardView created in the room
[[ZegoWhiteboardManager sharedInstance] getWhiteboardListWithCompleteBlock:^(ZegoWhiteboardViewError errorCode, NSArray *whiteBoardList) {
        //Traverse the returned ZegoWhiteboardView list, the user can directly add it to the interface, or save it and use it on demand
         for (ZegoWhiteboardView *whiteBoardView in whiteBoardList) {
                 whiteBoardView.frame = CGRectMake(0, 0, 500, 300);
                 [self.view addSubview:whiteBoardView];
                [self.whiteboardViewList addObject:whiteBoardView];
    }
}];

4.3 Follow the Agent Callback of the Whiteboard

Developers can follow the agent callbacks when adding and deleting whiteboards as needed. Before paying attention to the callback, you must ensure that the proxy of ZegoWhiteboardManager is set: [[ZegoWhiteboardManager sharedInstance] setDelegate:self];

1. When the whiteboard is added, display the latest ZegoWhiteboardView.

//When other users in the room create a new ZegoWhiteboardView, they will receive a callback for adding ZegoWhiteboardView
//Users can add the new whiteboardView to the view
-(void)onWhiteboardAdd:(ZegoWhiteboardView *)whiteboardView {
        whiteBoardView.frame = CGRectMake(0, 0, 500, 300);
         [self.view addSubview:whiteBoardView];
        [self.whiteboardViewList addObject:whiteBoardView];
}

2. When the whiteboard is removed, remove the corresponding ZegoWhiteboardView.

//When other users in the room delete ZegoWhiteboardView, they will receive a callback for the removal of ZegoWhiteboardView
//Users can remove the corresponding ZegoWhiteboardView according to the whiteboardID
-(void)onWhiteboardRemoved:(ZegoWhiteboardID)whiteboardID {
        for (NSInteger i = 0; i <self.whiteboardViewList.count; i++) {
        ZegoWhiteboardView *whiteboardView = self.whiteboardViewList[i];
        if (whiteboardView.whiteboardModel.whiteboardID == whiteboardID) {
            [self.whiteboardViewList removeObjectAtIndex:i];
            [whiteboardView removeFromSuperview];
            i--;
        }}
}

5 Sample Code

Developers can experience the interactive whiteboard business in the interactive whiteboard sample project, and view the complete source code and code logic. For details, please refer to Collaborative Whiteboard - Download Sample Source Code.