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.

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", () => {
  meeting?.startWhiteboard();
});

// 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", () => {
  meeting?.stopWhiteboard();
});

// 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