Whiteboard - JavaScript

A whiteboard is a digital canvas that allows users to collaborate in real-time by drawing, writing, and sharing ideas visually, making it ideal for brainstorming, presentations, and teamwork.

Before initiating a whiteboard session, it is essential to have an active VideoSDK Meeting in progress.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• startWhiteboard()
• stopWhiteboard()

Starting the Whiteboard

To start the whiteboard during a meeting, invoke the startWhiteboard() method on the meeting object. This will trigger the whiteboard-started event.

Upon successful execution, the whiteboard-started event will return a url.

You can embed the url into an <iframe> or integrate it as a component in your application to display the whiteboard session.

Stopping the Whiteboard

To stop the whiteboard session, call the stopWhiteboard() method on the meeting object. This will trigger the whiteboard-stopped event, halting the whiteboard for all participants.

Example

let meeting;

meeting = VideoSDK.initMeeting({
  //... Initialization parameters
});

const startWhiteboardBtn = document.getElementById("startWhiteboard");
const stopWhiteboardBtn = document.getElementById("stopWhiteboard");

// Start Whiteboard
startWhiteboardBtn.addEventListener("click", async () => {
  try {
    await meeting?.startWhiteboard();
  } catch (err) {
    console.error("startWhiteboard failed:", err);
  }
});

// Handle Whiteboard Start Event
meeting.on("whiteboard-started", (data) => {
  const { url } = data;
  const iframe = document.createElement("iframe");
  iframe.src = url;
  iframe.width = "500px";
  iframe.height = "500px";
  iframe.frameBorder = "0";

  const container = document.getElementById("whiteboard-container");
  if (container) {
    container.innerHTML = "";
    container.appendChild(iframe);
  } else {
    console.error("Whiteboard container not found");
  }
});

// Stop Whiteboard
stopWhiteboardBtn.addEventListener("click", async () => {
  try {
    await meeting?.stopWhiteboard();
  } catch (err) {
    console.error("stopWhiteboard failed:", err);
  }
});

// Handle Whiteboard Stop Event
meeting.on("whiteboard-stopped", () => {
  const container = document.getElementById("whiteboard-container");
  if (container) {
    container.innerHTML = "";
    document.body.removeChild(container);
  } else {
    console.error("Whiteboard container not found");
  }
});

Events Associated with startWhiteboard() and stopWhiteboard()

• whiteboard-started: Fired when the whiteboard is successfully started and it will return the url.

• whiteboard-stopped: Fired when the whiteboard session is stopped for all participants.

meeting.on("whiteboard-started", (data) => {
  const { url } = data;
  console.log("Whiteboard Started Successfully", url);
});

meeting.on("whiteboard-stopped", () => {
  console.log("Whiteboard Stopped Successfully");
});

Final Output

API Reference

• startWhiteboard()
• stopWhiteboard()
• whiteboard-started event
• whiteboard-stopped event