Skip to main content
Version: 0.1.x

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

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.

Integration

To display the whiteboard in your application, you can:

  1. Embed the whiteboardUrl in an iframe:

    <iframe src="{whiteboardUrl}" width="800" height="600"></iframe>
  2. Integrate it as a component in your application (implementation depends on your specific setup).

Example

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

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

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

export default WhiteboardComponent;

Final Output

API Reference

Got a Question? Ask us on discord