Create a super board

---

Basic concepts

• ZegoExpress-Video SDK: Audio and video interactive SDK of ZEGO, which can provide the real-time signaling transmission capability required by the Super Board. The Super Board SDK must be used together with this SDK.
• Super Board SDK and ZegoSuperBoard SDK: Both refer to the SDKs that provide the ZEGO Super Board service, that is, ZegoSuperBoard.
• ZegoSuperBoardView: Whiteboard view used by developers for presentation during code implementation.
• ZegoSuperBoardSubView: Subset of ZegoSuperBoardView, which is actually created by developers. ZegoSuperBoardView will automatically presents the newly created ZegoSuperBoardSubView or specified ZegoSuperBoardSubView using switchSuperBoardSubView.
• Common whiteboard: Whiteboard created by specifying the width, height, and number of pages, and drawn by a user in real time on the specified whiteboard canvas.
• File whiteboard: Whiteboard created based on a file. The width, height and number of pages of the whiteboard are determined by the file, meeting the business requirements for drawing diagram elements on the file.

Prerequisites

• The ZegoSuperBoard SDK needs to be used together with the matching ZegoExpress-Video SDK. Therefore, the ZegoExpress-Video SDK must be integrated. If the compression package of the SuperBoard SDK already contains ZegoExpress-Video SDK, you do not need to download it separately.
• If the ZegoExpress-Video SDK has been integrated, upgrade it to the latest version to avoid an initialization failure due to SDK version mismatch.
• Create a project in the ZEGOCLOUD Console and apply a valid AppID for the project.

Prepare the environment

Before integrating the ZegoSuperBoard SDK, ensure that the development environment satisfies the following requirements:

• Prepare a Windows or macOS computer that can be connected to the Internet.

• Operations such as obtaining the camera and microphone need to be performed in the HTTPS environment. Before integrating the SDK, ensure that the final project can run in the HTTPS environment. In the development environment, you can run the project first in the local host, such as localhost or 127.0.0.1.
• Use the browser supported by the SDK. Currently, the SDK supports the following browser versions:

Integrate the SDK

Run npm to download the SDK

Download ZegoSuperBoard SDK and ZegoExpress-Video SDK respectively.

npm i zego-superboard-web
npm i zego-express-engine-webrtc

The SDK downloaded using npm can be imported using the following method:

import { ZegoSuperBoardManager } from 'zego-superboard-web';
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'
// or
const ZegoSuperBoardManager = require('zego-superboard-web').ZegoSuperBoardManager;
var ZegoExpressEngine = require('zego-express-engine-webrtc').ZegoExpressEngine

Download the SDK on the official website

Download the latest SDK package with reference to SDK downloads, and decompress the package after the download.

The SDK downloaded from the official website can be imported directly using a script. In this scenario, ZegoSuperBoard SDK and ZegoExpress-Video SDK need to be imported respectively. "x.x.x" is the version number of ZegoExpress-Video SDK. Refer to the name of the decompressed file package obtained in the previous step.

<script src="ZegoSuperBoardManagerWeb.js"></script>
<script src="ZegoExpressWebRTC-x.x.x.js"></script>

Initialize the SDK

Initialize the ZegoExpress-Video SDK

To create a singleton instance of the ZegoExpressEngine class, pass in your AppID as the appID parameter and the Server URL as the server parameter. You can obtain them from the ZEGOCLOUD Admin Console.

// Initialize the ZegoExpressEngine instance
const zg = new ZegoExpressEngine(appID, server);

Initialize the ZegoSuperBoard SDK

1. Call the getInstance method in ZegoSuperBoardManager to obtain the ZegoSuperBoard instance.
2. Call the init method of the ZegoSuperBoard instance to initialize ZegoSuperBoard SDK. The instance of ZegoExpressEngine needs to be transferred.

For details about how to obtain the token used for authentication during SDK initialization, refer to Generate a token.

<!-- Parent container to be mounted to -->
<div id="parentDomID"></div>

// Obtain the ZegoSuperBoard instance.
zegoSuperBoard = ZegoSuperBoardManager.getInstance();
// Initialize ZegoSuperBoard. If initialization succeeds, true is returned in the result. 
const result = await zegoSuperBoard.init(zg, {
    parentDomID: 'parentDomID', // D of the parent container to be mounted to.
    appID: 0, // The AppID you get.
    userID: '', // User-defined ID
    token: '' // The Token you get that used for validating the user identity.
});

Set up and listen for event callbacks

Based on the actual application needs, you can listen for the concerned event callbacks after the SuperBoard is initialized. The callbacks include error reminders, adding whiteboard files remotely, deleting whiteboard files remotely, and switching whiteboard files remotely.

on: Registers an event callback. A listening-for event name can be specified by setting event callbacks.

// Common SuperBoard-related callbacks
// The SuperBoard automatically realizes the multi-terminal synchronization capability, and only needs to refresh the local UI logic in the remote notification callback.
// Callback of the listening-for error. All internal SDK errors are thrown using this callback, except the errors directly returned in the API.
    zegoSuperBoard.on('error', function(errorData) {
        // Error code, error prompt
        conosole.log(errorData.code, errorData.message)
    });

    // Listen for whiteboard paging and scrolling.
    zegoSuperBoard.on('superBoardSubViewScrollChanged', function(uniqueID, page, step) {

    });
    // Listen for the operation of remotely zooming in or out a whiteboard.
    zegoSuperBoard.on('superBoardSubViewScaleChanged', function(uniqueID, scale) {

    }); 

    // Listen for the operation of remotely adding a whiteboard.
    zegoSuperBoard.on('remoteSuperBoardSubViewAdded', function(uniqueID) {

    });

    // Listen for the operation of remotely destroying a whiteboard.
    zegoSuperBoard.on('remoteSuperBoardSubViewRemoved', function(uniqueID) {

    });

    // Listen for the operation of remotely switching a whiteboard.
    zegoSuperBoard.on('remoteSuperBoardSubViewSwitched', function(uniqueID) {

    });

    // Listen for the operation of remotely switching an Excel Sheet.
    zegoSuperBoard.on('remoteSuperBoardSubViewExcelSwitched', function(uniqueID, sheetIndex) {

    });

    // Listen for the operation of remotely changing the whiteboard permission.
    zegoSuperBoard.on('remoteSuperBoardAuthChanged', function(data) {
        console.log(data.scale, data.scroll)
    });

    // Listen for the operation of remotely changing the permission of a whiteboard diagram element.
    zegoSuperBoard.on('remoteSuperBoardGraphicAuthChanged', function(data) {        
        console.log(data.create, data.delete, data.move, data.update, data.clear)
    });

Log in to a 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
• 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, userName}, {userUpdate: true});

Create a whiteboard

A Super Board can be used to create a common whiteboard or a file whiteboard.

• Common whiteboard: Whiteboard created by specifying the width, height, and number of pages, and drawn by a user in real time on the specified whiteboard canvas.
• File whiteboard: Whiteboard created based on a file. The width, height and number of pages of the whiteboard are determined by the file, meeting the business requirements for drawing diagram elements on the file.

You can use the roomStateUpdate callback to receive real-time updates on the connection status between the room and the server. Only when the room connection is successful can operations such as creating a whiteboard be performed.

• Create a common whiteboard

// A whiteboard can be created only after the login to a room in the previous step is successful and true is returned.
const model = await zegoSuperBoard.createWhiteboardView({
    name: '', // Whiteboard name
    perPageWidth: 1600, // Width of each whiteboard page
    perPageHeight: 900, // Height of each whiteboard page
    pageCount: // Page count of a whiteboard
});

• Create a file whiteboard

Before creating a file whiteboard, obtain fileID of the file. Refer to Shared file management to upload the file.

// A whiteboard can be created only after the login to a room in the previous step is successful and true is returned.
const model = await zegoSuperBoard.createFileView({
    fileID // fileID of a file, which is the unique identifier returned after a file is successfully uploaded. 
});

Mount the current whiteboard

// Obtain SuperBoardSubViewList.
const superBoardSubViewList = await zegoSuperBoard.querySuperBoardSubViewList();

// Obtain SuperBoardView.
const superBoardView = zegoSuperBoard.getSuperBoardView();

// Obtain the current SuperBoardSubView.
const zegoSuperBoardSubView = superBoardView.getCurrentSuperBoardSubView()

// Obtain the model corresponding to SuperBoardSubView.
const model = zegoSuperBoardSubView.getModel();

// Obtain uniqueID of the whiteboard to be mounted.
const uniqueID = model.uniqueID;

// Determine the file type. For an Excel whiteboard, obtain sheetIndex first.
let sheetIndex;
const fileType = model.fileType;
if (fileType === 4) {
    // Excel whiteboard
    const sheetName = zegoSuperBoardSubView.getCurrentSheetName();
    // Obtain the Sheet list corresponding to the current Excel file.
    const zegoExcelSheetNameList = zegoSuperBoardSubView.getExcelSheetNameList();
    // Use sheetName to obtain the corresponding sheetIndex from zegoExcelSheetNameList.
    sheetIndex = zegoExcelSheetNameList.findIndex(function(element, index) {
        return element === sheetName;
    });
}

// Mount the current whiteboard.
const result = await superBoardView.switchSuperBoardSubView(uniqueID, sheetIndex);

Verify whiteboard creation

Use multiple distances to run the preceding project and log in to the same room ID. Press and move with your mouse within the range of ZegoSuperBoardView on any window. Then the graffiti effect is displayed on ZegoSuperBoardView of the window.

Destroy a whiteboard

// After a whiteboard is destroyed, the SDK will automatically switch to another whiteboard. The displayed whiteboard is the previous one of the destroyed whiteboard.
const result = await zegoSuperBoard.destroySuperBoardSubView(uniqueID)