Implementation

---

1 Overview

1.1 Concept Explanation

• Collaborative Whiteboard SDK and ZegoWhiteboardView SDK: both refer to the SDK that provides the ZEGO Collaborative 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 the realization of 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 list of the existing ZegoWhiteboardView and display it on the interface correctly;
• When other users add or delete whiteboards, how to correctly handle the view locally.

2 Prerequisites

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

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

3 Create a Whiteboard and Use Basic Functions

3.1 Initialize SDK

1. Initialize the ZegoWhiteboardView SDK

ZegoWhiteboardView SDK includes ZEGO real-time audio and Video functions, and its initialization method is consistent with ZegoExpress-Video SDK.

• If the ZegoExpress-Video SDK has not been integrated in the developer project, after downloading and initializing the ZegoWhiteboardView SDK, the Collaborative Whiteboard and real-time audio and Video functions can be realized.
• If the ZegoExpress-Video SDK has been integrated in the developer project, if you need to integrate the Collaborative Whiteboard function in the future, you can remove the SDK first and download and use the ZegoWhiteboardView SDK directly.

Method 1: Download the SDK from the official website, and manually integrate the initialization of the SDK.

<script src="ZegoExpressWhiteboardWeb.js"></script>

/**
* appID is the application ID, please obtain it from the instant management ZEGO Admin Console https://console-express.zego.im/
* server is the address of the access server, please obtain it from the instant management ZEGO Admin Console https://console-express.zego.im/
*/

// Initialize the instance
const zegoExpressEngine = new window.ZegoExpressEngine(appID, server);

Method 2: Use npm to get the SDK initialization.

import {ZegoExpressEngine} from'zego-express-whiteboard-web';
/**
* appID is the application ID, please obtain it from the instant management ZEGO Admin Console https://console-express.zego.im/
* server is the address of the access server, please obtain it from the instant management ZEGO Admin Console https://console-express.zego.im/
*/
// Initialize the instance
const zegoExpressEngine = new ZegoExpressEngine(appID, server);

2. Listen for Callbacks

Call the on method, pass in the name of the monitoring event, and monitor the common callback events: zegoExpressEngine.on(zegoEventName: ZegoEvent, callBack). ZegoEventName can refer to ZegoEvent.

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
zegoExpressEngine.on('viewAdd', function(zegoWhiteboardView){
//Users can add the new zegoWhiteboardView to the view
})

//When other users in the room delete zegoWhiteboardView, they will receive a callback of zegoWhiteboardView removal
zegoExpressEngine.on('viewRemoved', function(whiteboardID){
//Users can remove the corresponding zegoWhiteboardView list maintained by themselves according to the whiteboardID
})

3.2 Login Room

To log in to a room, call the loginRoom with the following parameters:

• A unique room ID as the roomID parameter
• The login token you obtained in the previous step as the token parameter
• The user ID and user name as the roomID and userName parameter
• userID must be the same as the one used in token generation.
• Optional: Pass the corresponding object to the config parameter based on the actual situation.

If the roomID does not exist, a new room will be created and you will log in automatically when you call the loginRoom method.

// Log in to a room. It returns `true` if the login is successful.
// The roomUserUpdate callback is disabled by default. To receive this callback, you must set the `userUpdate` property to `true` when logging in to a room. 
const result = await zg.loginRoom(roomID, token, {userID: userID, userName: userName}, {userUpdate: true});

3.3 Create ZegoWhiteboardView

1. Call the createView interface to create a whiteboard. In the following example code, create a ZegoWhiteboardView with a width of 1600 px, a height of 900 px, and 5 pages in the horizontal direction.

const zegoWhiteboardView = await zegoExpressEngine.createView({
    roomID:'Login room number',
    name:'Whiteboard name',
    aspectWidth: 1600 * 5,
    aspectHeight: 900,
    pageCount: 5,
    fileInfo?: {
        fileID:'File ID',
        fileName:'File name',
        fileType:'File Type',
        authKey:''
     }
})

FileInfo parameter explanation:

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

2. Show ZegoWhiteboardView

3. Add a container div in Html.

<div id="parent" style="width:1600px;height:900px"> </div>

2. Call the attachView interface to add the obtained zegoWhiteboardView to the view to display the zegoWhiteboardView.

zegoExpressEngine.attachView(zegoWhiteboardView: ZegoWhiteboardView,parent: string): Promise<void>

3.4 Experience the Basic Functions of ZegoWhiteboardView SDK

3.4.1 Set Drawing Tools

1. Turn on the drawing function of setWhiteboardOperationMode.

zegoWhiteboardView.setWhiteboardOperationMode(operationMode: ZegoWhiteboardOperationMode): void

OperationMode parameter explanation:

2. Set the drawing tool type.

Set the tool type and characteristics of the current whiteboard through the setToolType interface. Currently, 10 whiteboard tools are supported.

ZegoWhiteboardViewToolPen // graffiti brush
ZegoWhiteboardViewToolText, // text
ZegoWhiteboardViewToolLine, // straight line
ZegoWhiteboardViewToolRect, // rectangle
ZegoWhiteboardViewToolEllipse, // circle
ZegoWhiteboardViewToolSelector ,// select primitives
ZegoWhiteboardViewToolEraser, // eraser
ZegoWhiteboardViewToolLaser, // Laser pointer
ZegoWhiteboardViewToolClick, // dynamic ppt click tool
ZegoWhiteboardViewToolCustomImage, // Custom graphics tool

3. Set the tool to ZegoWhiteboardViewToolPen graffiti pen.

// 1. Set the whiteboard tool to pen, pen color, the default is #f54326, pen thickness, the default is 6
zegoWhiteboardView.setToolType(1)

After setting the graffiti brush successfully, press the mouse to graffiti within the range of zegoWhiteboardView, and you can see the graffiti effect displayed on zegoWhiteboardView.

3.4.2 Synchronize the Content on ZegoWhiteboardView

Different users only need to join the same room and get ZegoWhiteboardView list using getViewList, and add ZegoWhiteboardView to the interface, you can observe ZegoWhiteboardView synchronization with location.

// 1. After joining the same room, request a list of whiteboards in the room   
var zegoWhiteboardViewList = []
zegoExpressEngine.getViewList().then(res=>{
    zegoWhiteboardViewList = res
})

// 2. Suppose that the user entering the room needs to load the designated whiteboard, the ID of the whiteboard is 1  
var targetWhiteboardID = 1

// 3. According to the filter criteria, filter the target whiteboard from the whiteboard list    
zegoWhiteboardView = zegoWhiteboardViewList.filter(function (v) {
    return targetWhiteboardID === v.getID();
})[0];

// 4. Render the target whiteboard   
zegoExpressEngine.attachView(zegoWhiteboardView, parentId)

3.4.3 Scroll ZegoWhiteboardView

Call scroll method to make ZegoWhiteboardView scroll to the corresponding location.

• 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.

zegoWhiteboardView.scroll(horizontalPercent: number,verticalPercent: number): boolean

3.4.4 Remove Whiteboard

Call destroyView interface to remove the whiteboard. After the removal is successful, users in the same room will receive the callback of viewRemoved.

zegoExpressEngine.destroyView(zegoWhiteboardView: ZegoWhiteboardView): Promise<void>

zegoExpressEngine.on('viewRemoved', function(whiteboardID){
//Users can remove the corresponding zegoWhiteboardView list maintained by themselves according to the whiteboardID
})

4 Get and Display the Created Whiteboard

4.1 Initialization

Please refer to 3.1 Initialize ZegoWhiteboardView 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 getViewList interface to get the whiteboard list.

zegoExpressEngine.getViewList(): Promise<ZegoWhiteboardView[]>

4.3 Pay attention to the Callback of the Whiteboard

Developers can follow the monitoring callbacks when adding and deleting whiteboards as needed.

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
zegoExpressEngine.on('viewAdd', function(zegoWhiteboardView){
//Users can add the new zegoWhiteboardView to the view
})

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

//When other users in the room delete zegoWhiteboardView, they will receive a callback of zegoWhiteboardView removal
zegoExpressEngine.on('viewRemoved
', function(whiteboardID){
//Users can remove the corresponding zegoWhiteboardView list maintained by themselves according to the whiteboardID
})

5 Sample Code

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