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:
-
Embed the
whiteboardUrl
in aniframe
:<iframe src="{whiteboardUrl}" width="800" height="600"></iframe>
-
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