ZEGOCLOUD

Suppose you are a Software Engineer and want to teach your kid in a different way. What if I tell you that you can now teach your kid with fun not just by playing with them but by drawing on a live board, that can all achieve by a library ZEGOCLOUD.

ZEGOCLOUD provide a vast variety of SDKs that can create/build multiple features like Live Streaming, Video/Audio Calling, Cloud recording and much more, The Documentation they provide to integrate that features is easy to understand plus the sample app code can give you a kind of help to explore the feature in depth.
You can try ZEGOCLOUD library with a free account in which I will get 10,000 free minutes monthly Signup Now and also get a price plan that is cheap compared to other libraries.

With JavaScript, you can create Super Board in different platforms/libraries such as React.js, Vue.js, Angular and much more.

You can integrate ZEGOCLOUD Super Board with the following platforms

• IOS

• Android

• Web (Javascript)

• Windows (electron)

• macOS (electron)

Rich features

Whiteboard is a multi-person real-time interactive whiteboard service that allows you to share your ideas with other users, and collaborate on projects in real-time. ZEGOCLOUD (Super board) has a list of features such as basic and advanced whiteboard tools, file conversion, playback of whiteboard writing document sharing, real-time recording and audio/video.

Ultra-low latency

With the engine and algorithms developed by ZEGOCLOUD, ZEGOCLOUD Super Board can deliver smooth real-time communication even when the network conditions wi weak.

Synchronous sounds, images, and operations

The whiteboard allows you to draw on it with your mouse or trackpad while you speak using a microphone. The audience can see what you've drawn as you speak so they don't have to wait for you to finish speaking before they can read your notes.

Install these two libraries

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

import libraries

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

You can also use CDN link

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

Create instance of ZegoExpressEngine with AppID and server URL
AppID: You can get the AppID from Dashboard->project->basic configuration
Server URL: You can get the server URL from Dashboard->project->basic configuration->
Server URL

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

define a div

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

get the instance of the super board manager and call the initialize method with the required parameters. You can get the token from the dashboard->project-basic configuration->generate token or you can write a login on the backend to generate a token.

// 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.
});

Add listeners to get real-time events

// 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)
    });

Call a loginRoom method with the required parameters

// 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});

Then create a 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

// 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. 
});

add the code to 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);

You can get a sample code from this link CodeBase

You can get a demo app to try it out from this link Demo App

Integration of super board guide Documentation

Guide about different features Documentation

You can find more content about Software Engineering on my YouTube channel YarCoder