A digital whiteboard enables users to draw, write, and collaborate in real-time, providing an interactive platform for communication. However, adding a digital whiteboard to your app can seem daunting, especially for those lacking technical expertise.
In this article, we’ll explore the different options for integrating a digital whiteboard and provide helpful tips to ensure a smooth and successful implementation.
ZEGOCLOUD Digital Whiteboard SDK
ZEGOCLOUD, a leading provider of collaboration solutions, has introduced the Super Board SDK, a digital whiteboard SDK designed to enhance collaboration among team members.
The Super Board SDK provides a highly customizable and scalable tool that allows businesses to integrate digital whiteboard capabilities into their applications seamlessly. With this SDK, teams can collaborate in real time, whether remotely or in the same room.
Here are some of the Super Board SDK’s key features:
1. High-quality drawing tools
The Super Board SDK comes equipped with high-quality drawing tools, making it easy for teams to share ideas visually. Users can draw, annotate, and highlight different aspects of their ideas, making it easier to convey complex concepts.
2. Real-time collaboration
One of the most significant advantages of the Super Board SDK is its real-time collaboration capabilities. Multiple team members can work on the same digital whiteboard simultaneously, making brainstorming, planning, and executing projects easier.
3. Seamless integration
You can integrate the Super Board SDK into existing applications, making it a flexible solution for businesses of all sizes. It supports multiple platforms, including desktop and mobile, making it accessible across different devices.
4. Customizable user interface
The Super Board SDK’s user interface is highly customizable, allowing businesses to tailor it to their needs. They can choose different themes, colors, and fonts to make them fit seamlessly into their existing application.
5. Robust security features
ZEGOCLOUD takes security seriously and has implemented robust features into the Super Board SDK. All data is encrypted, ensuring that sensitive information remains safe and secure.
How to Add Digital Whiteboard with ZEGOCLOUD SDK
Adding a digital whiteboard to your application is now easier than ever with ZEGOCLOUD’s SDK. Let’s see how to do this step by step.
Preparation
- A ZEGOCLOUD developer account – Sign up
- A computer with multimedia and internet support
- Understanding of web development
1. Download the SDK
Downloading the ZegoSuperBoard SDK and ZegoExpress-Video SDK is a simple process using NPM. Just run the code provided below to obtain the necessary SDKs and take advantage of their powerful features.
npm i zego-superboard-web
npm i zego-express-engine-webrtc2. Integrate the SDK
Here’s the JS code to integrate ZEGOCLOUD’s Super Board SDK into your project:
import { ZegoSuperBoardManager } from 'zego-superboard-web';
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'3. Initialize the SDKs
We added two SDKs via NPM. We have to initialize them to take full advantage of their enormous functionality.
ZegoExpress-Video SDK
Instantiate the ZegoExpressEngine class using your AppID and Server URL from the ZEGOCLOUD Admin Console.
// Initialize the ZegoExpressEngine instance
const zg = new ZegoExpressEngine(appID, server);ZegoSuperBoard SDK
Retrieve the ZegoSuperBoard instance using getInstance in ZegoSuperBoardManager, then initialize the SDK with the ZegoExpressEngine instance by calling the init method. Start using ZegoSuperBoard SDK with ease.
<!-- Parent container to be mounted to -->
<div id="parentDomID"></div>// Obtain the ZegoSuperBoard instance.
zegoSuperBoard = ZegoSuperBoardManager.getInstance();
// Initialize ZegoSuperBoard.
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 is used for validating the user identity.
});4. Configure and monitor event callbacks
Tailor the event callbacks to suit your application requirements by monitoring them after initializing the SuperBoard. These include error notifications, remote addition, deletion, and switching of whiteboard files.
// Callback of the listening-for error. zegoSuperBoard.on('error', function(errorData) {
// Error code, error prompt
conosole.log(errorData.code, errorData.message)
});
// Monitor paging and scrolling in the whiteboard via event listeners.
zegoSuperBoard.on('superBoardSubViewScrollChanged', function(uniqueID, page, step) {
});
// You can listen for the remote operation of zooming in or out on a whiteboard.
zegoSuperBoard.on('superBoardSubViewScaleChanged', function(uniqueID, scale) {
});
// Remote whiteboard addition event listener.
zegoSuperBoard.on('remoteSuperBoardSubViewAdded', function(uniqueID) {
});
// Monitor the remote whiteboard destruction operation.
zegoSuperBoard.on('remoteSuperBoardSubViewRemoved', function(uniqueID) {
});
// Listen for remote whiteboard switching.
zegoSuperBoard.on('remoteSuperBoardSubViewSwitched', function(uniqueID) {
});
// Listen for remote Excel sheet switching.
zegoSuperBoard.on('remoteSuperBoardSubViewExcelSwitched', function(uniqueID, sheetIndex) {
});
// Listen for remote whiteboard permission changes.
zegoSuperBoard.on('remoteSuperBoardAuthChanged', function(data) {
console.log(data.scale, data.scroll)
});
// Listen for remote whiteboard element permission changes.
zegoSuperBoard.on('remoteSuperBoardGraphicAuthChanged', function(data) {
console.log(data.create, data.delete, data.move, data.update, data.clear)
});5. Log in to a room
To access a room, use the loginRoom the method with the following parameters: roomID, token, userID, and userName. Additionally, you can provide a configuration object as necessary. If the roomID is non-existent, a new room will be created, and login will occur automatically when the method is called.
const result = await zg.loginRoom(roomID, token, {userID, userName}, {userUpdate: true});6. Create a whiteboard
SuperBoard supports two types of whiteboards: common and file-based. A common whiteboard can be created by specifying its width, height, and number of pages, while a file whiteboard is created based on an existing file. Login must be successful before creating a whiteboard; only then can a whiteboard be created.
Note: A maximum of 50 whiteboards can be created in a room; if a room already contains 50 whiteboards, whiteboard creation will fail. To determine the current number of whiteboards in a room, use the querySuperBoardSubViewList method.
Create a common whiteboard
const model = await zegoSuperBoard.createWhiteboardView({
name: '', // Whiteboard name
perPageWidth: 1600, // Whiteboard page width
perPageHeight: 900, // Whiteboard page height
pageCount: // Page count of a whiteboard
});Create a file whiteboard
To create a file-based whiteboard, retrieve fileID the file first. Please consult Shared File Management for instructions on how to upload the file.
// Whiteboard creation requires successful login to a room.
const model = await zegoSuperBoard.createFileView({
fileID // fileID of a file, which is the unique identifier returned after a file is successfully uploaded.
});7. Mount the current whiteboard
If a client logs in to a room with a whiteboard, the ZegoSuperBoard SDK cannot mount the whiteboard to the parent container because it does not know if it exists. After a successful login, ensure that the parent container exists and use the querySuperBoardSubViewList and switchSuperBoardSubView APIs to notify and mount the whiteboard to the parent container.
// 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 a uniqueID of the whiteboard to be mounted.
const uniqueID = model.uniqueID;
// Get the file type and obtain sheetIndex for Excel whiteboard.
let sheetIndex;
const fileType = model.fileType;
if (fileType === 4) {
// Excel whiteboard
const sheetName = zegoSuperBoardSubView.getCurrentSheetName();
// Retrieve the list of sheets for the current Excel file.
const zegoExcelSheetNameList = zegoSuperBoardSubView.getExcelSheetNameList();
// To get the sheetIndex from zegoExcelSheetNameList, use the corresponding sheetName.
sheetIndex = zegoExcelSheetNameList.findIndex(function(element, index) {
return element === sheetName;
});
}
// Mount the current whiteboard.
const result = await superBoardView.switchSuperBoardSubView(uniqueID, sheetIndex);8. Verify whiteboard creation
To test the project, run it on multiple devices and log in to the same room ID. Use your mouse to draw within the ZegoSuperBoardView on any window, and the drawing will be displayed on the ZegoSuperBoardView of the other window.
9. Destroy a whiteboard
The ZegoSuperBoard SDK will automatically switch to another whiteboard after the current one is destroyed.
const result = await zegoSuperBoard.destroySuperBoardSubView(uniqueID)Run a Demo
If you want to add digital whiteboard capabilities to your apps, you can download the sample demo to get started.
You may also like: How to Draw on Whiteboard with ZEGOCLOUD SDK
Conclusion
Adding digital whiteboard capabilities to your apps is a great way to enhance user engagement and improve collaboration. With ZEGOCLOUD SDK, integrating this feature is easy with just a few steps. Whether you need a standard or file whiteboard, ZEGOCLOUD SDK has got you covered. Start adding digital whiteboards to your apps today and see the difference they can make!
Talk to Expert
Learn more about our solutions and get your question answered.
