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.

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