Collaborative Whiteboard (Deprecated)

This implementation of collaborative whiteboard using Pusher has been deprecated in favor of using 100ms' own messaging infrastructure. Check the new whiteboard documentation to know more.

Overview

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:

  1. Pusher Channels app
  2. Whiteboard server — this guide follows Vercel deployment.
  3. Whiteboard client — this guide uses the 100ms-web sample app.

Pusher Channels App

  • Sign up for a Pusher account.
  • Click on Create app to create a new Channels app.
  • Provide a friendly name for your app and select a cluster based on your preference.
  • Go to the App Keys section on the sidebar, and copy your app_id, key, secret, and cluster.
  • Go to the App Settings section on the sidebar and turn on enable client events.

Whiteboard Server

  • 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 https://whiteboard-server.vercel.app/api/pusher/auth.

Whiteboard Client

  • From the 100ms-web sample app repository, copy the whole folder at /src/plugins/whiteboard into your live video conferencing or live streaming apps using 100ms' SDKs.
  • Add the pusher app key, auth endpoint and cluster to REACT_APP_PUSHER_APP_KEY, REACT_APP_PUSHER_AUTHENDPOINT, REACT_APP_PUSHER_CLUSTER environment variables.
  • The useWhiteboardMetadata hook 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(whiteboardOwner from useWhiteboardMetadata is not null), render the Whiteboard component on your UI to let your users draw on the whiteboard. Refer mainView.jsx and WhiteboardView.jsx.

Have a suggestion? Recommend changes ->

Was this helpful?

1234