This feature is still in Beta and only available for Web platform. To know more or report any issues, feel free to reach out to us over Discord.
This guide will walk you through instructions to build a Collaborative whiteboard by integrating Pusher with our sample app.
You need three components to complete the Collaborative whiteboard setup:
- Pusher Channels app
- Whiteboard server — this guide follows Vercel deployment.
- Whiteboard client — this guide uses the 100ms-web sample app.
Pusher Channels App
- Sign up for a Pusher account.
- Click on
Create appto create a new
- Provide a friendly
name for your appand
select a clusterbased on your preference.
- Go to the
App Keyssection on the sidebar, and copy your app_id, key, secret, and cluster.
- Go to the
App Settingssection on the sidebar and turn on
enable client events.
- Fork the Whiteboard Pusher server and deploy it using your preferred hosting provider.
- Add the Pusher keys noted earlier to environment variables.
APP_ID="app_id" APP_KEY="key" APP_SECRET="secret" APP_CLUSTER="cluster"
- The API path is
api/pusher/auth; say your deployment URL is
whiteboard-server.vercel.app, then the Pusher Auth Endpoint will be
- From the 100ms-web sample app repository, copy the whole folder at
/src/plugins/whiteboardinto your live video conferencing or live streaming apps using 100ms' SDKs.
- Add the pusher app key, auth endpoint and cluster to
useWhiteboardMetadatahook returns a state such as the whiteboard owner(
whiteboardOwner) and action to toggle the whiteboard(
toggleWhiteboard). Refer to usage in
ToggleWhiteboard.jsx- an icon button to toggle the whiteboard based on the active state.
- When the whiteboard is active(
useWhiteboardMetadatais not null), render the
Whiteboardcomponent on your UI to let your users draw on the whiteboard. Refer