Create and switch between multiple whiteboards
Overview
This document describes how to create multiple whiteboards using the Super Board SDK and switch between them freely. The example scenario in this document is as follows:
- Create a common whiteboard.
- Switch to the common whiteboard, enter a line of words on the whiteboard, and then zoom in on the whiteboard.
Prerequisites
A project has been created in ZEGOCLOUD console and applied for a valid AppID. For details, please refer to How to view project information.
Implementation steps
Assume that A creates a whiteboard and operates on it and that B watches the whiteboard in this flow. In the preceding figure, the dotted line indicates that B can obtain related information from the corresponding callback when A performs the operation.
1. Initialize the SDK and log in to the room
Refer to Create a super board to integrate and initialize the SDK and log in to the room. The complete sample code is as follows:
Initialize the SDK
// Integrate the SDK before executing the following code.
// Initialize ZegoExpressEngine.
// The following initialization sample code is recommended to be executed when the application starts.
// Access in general scenarios.
const profile = {
appID : xxx,
// cuide for upgrading the authentication mode from using the AppSign to Token](https://docs.zegocloud.com/faq/token_upgrade?product=ExpressVideo&platform=all)
// AppSign can be obtained through [ZEGOCLOUD console](https://console.zegocloud.com/account/login) in the format of @"39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
appSign: '39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
scenario : 0
};
var engine = ZegoExpressEngine.createEngineWithProfile(profile)
if (engine != null) {
var superboardConfig = {
appID: YOURAPPID,
appSign: 'YOURAPPSIGN',
};
initSuperboad = async () => {
// Initialize ZegoSuperBoard SDK
const superboard_init_res = await ZegoSuperBoardManager.init(superboardConfig);
// The result of SuperBoard initialization.
console.log('Result', superboard_init_res);
};
initSuperboad()
}Log in to the room
// The prerequisite for logging into the room is that the Express SDK has been successfully initialized.
// Start logging into the room.
engine.loginRoom('room1', {'userID': 'id1', 'userName': 'user1'});2. Create a whiteboard
Define an area to mount the whiteboard
<ZegoSuperBoardRenderView ref={this.refContainer} style={[styles.boardView]} />// After successfully logging into the room, the area needs to be passed in, and it only needs to be done once.
const tag = findNodeHandle(this.refContainer.current);
await ZegoSuperBoardManager.setContainerView({
reactTag: tag,
});// The following example code defines a encapsulation method, which can realize the functions of creating a common whiteboard.
/**
* Create a common whiteboard.
*/
var zegoSuperBoard = ZegoSuperBoardManager.getInstance()
const res = await zegoSuperBoard.createWhiteboardView({
name: 'test whiteboard', // The name of the whiteboard created.
pageCount: 5, // Number of whiteboard pages created
perPageWidth: 960, // Page width
perPageHeight: 540,// Page height
});After the whiteboard is created, the SuperBoardView will automatically synchronize across multiple platforms and display the latest created whiteboard. The B end will receive a remoteSuperBoardSubViewAdded notification every time the A end creates a whiteboard, and the local UI logic can be refreshed in the corresponding callback.
Register the SuperBoardManager Listener callback method to monitor actions such as remote whiteboard addition, destruction, and switching.
// Common callbacks related to SuperBoard
// SuperBoard automatically implements the ability to synchronize across multiple platforms, and only needs to refresh the local UI logic in the remote notification callback.
// Listen for error callbacks. SDK internal errors are all thrown through this callback, except for errors returned directly in the interface.
// Get instance
var zegoSuperBoard = ZegoSuperBoardManager.getInstance()
// Listen for the remotely added whiteboard.
zegoSuperBoard.on('remoteSuperBoardSubViewAdded', function(name,createTime,fileID,fileType,uniqueID,whiteboardIDList) {
});
// Listen for remote whiteboard destruction.
zegoSuperBoard.on('remoteSuperBoardSubViewRemoved', function(name,createTime,fileID,fileType,uniqueID,whiteboardIDList) {
});
// Listen for remote whiteboard switching.
zegoSuperBoard.on('remoteSuperBoardSubViewSwitched', function(uniqueID) {
});Register the SuperBoardView callback method to listen for scrolling and page-turning in the SuperBoardView.
// Get instance
var zegoSuperBoard = ZegoSuperBoardManager.getInstance()
// Listening for whiteboard page turning and scrolling
zegoSuperBoard.on('scrollChange', function(name,createTime,fileID,fileType,uniqueID,whiteboardIDList,currentPage,pageCount) {
});You can use setOperationMode to grant permissions for clients to operate on the whiteboard. Clients with permissions can draw on the whiteboard. For more details, please refer to Draw.
3. Switch to the common whiteboard for drawing
To synchronize the zooming effect among multiple parties, you must enable the zooming effect synchronization and responding functions on each party.
// The zooming effect needs to be synchronized between the local and peer parties.
ZegoSuperBoardManager.getInstance().enableSyncScale(true);// Synchronize the zooming effect to the other party.
ZegoSuperBoardManager.getInstance().enableResponseScale(true);// Respond to the zooming effect synchronized from the other party.User A switches to the common whiteboard, uses the text tool to write on the whiteboard, and uses gestures to zoom in or out.
// Operations by user A
// Switch to the target whiteboard.
var zegoSuperBoard = ZegoSuperBoardManager.getInstance()
await zegoSuperBoard.getSuperBoardView().switchSuperBoardSubView(uniqueID);
// The default whiteboard tool is brush. To set other tool types, call setToolType.
// For example, set the tool type to text, click on the whiteboard where you want to display the text, and enter the text.
zegoSuperBoard.setToolType(2)
// Get the currently displayed whiteboard
var curSubView = zegoSuperBoardSubView.getSuperBoardView().getCurrentSuperBoardSubView();After the A end switches the whiteboard, the B end will automatically switch synchronously and receive the remoteSuperBoardSubViewSwitchednotification.This callback has been implemented in the previous step.