Whiteboard - React

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 Whiteboard, it is essential to have a VideoSDK Meeting in progress.

note

This page uses the following async methods. See their reference for the errors each promise can reject with make sure you handle all the rejection based on your usecase:

• startWhiteboard()
• stopWhiteboard()

useWhiteboard Hook

The useWhiteboard hook provides functionality to manage a collaborative whiteboard session in your application.

Usage

import { useWhiteboard } from "@videosdk.live/react-sdk";

const { startWhiteboard, stopWhiteboard, whiteboardUrl } = useWhiteboard();

Returns

The hook returns an object with the following properties:

startWhiteboard()

• Type: () => void
• Description: Initiates a whiteboard session for all participants.
• Effect: When called, this method generates a whiteboardUrl.

stopWhiteboard()

• Type: () => void
• Description: Terminates the active whiteboard session for all participants.

whiteboardUrl

• Type: string | null
• Description: URL for the current whiteboard session.
• Value:
  • null when no session is active.
  • A valid URL string after startWhiteboard() has been called.

Embedding the Whiteboard

Display the whiteboard using an iframe:

{
  whiteboardUrl && (
    <iframe src={whiteboardUrl} width="800" height="600"></iframe>
  );
}

Example Component

function WhiteboardComponent() {
  const { startWhiteboard, stopWhiteboard, whiteboardUrl } = useWhiteboard();

  return (
    <div>
      {!whiteboardUrl ? (
        <button onClick={startWhiteboard}>Start Whiteboard</button>
      ) : (
        <>
          <button onClick={stopWhiteboard}>Stop Whiteboard</button>
          <iframe src={whiteboardUrl} width="800" height="600"></iframe>
        </>
      )}
    </div>
  );
}

Final Output

API Reference

• useWhiteboard hook