MediaSFU ReactJS
    Preparing search index...

    Variable WhiteboardConst

    Whiteboard: React.FC<WhiteboardOptions> = ...

    Whiteboard - Real-time collaborative drawing and annotation canvas

    A feature-rich whiteboard component for collaborative drawing, annotations, and visual brainstorming. Supports freehand drawing, shapes, text, images, erasers, undo/redo, zoom/pan, and real-time synchronization across participants. Perfect for virtual classrooms, design reviews, workshops, and interactive presentations.

    Features:

    • Freehand drawing with customizable brush and thickness
    • Shape tools (rectangle, circle, line, arrow)
    • Text annotations with font customization
    • Image uploads and background images
    • Eraser tool with adjustable size
    • Undo/redo functionality
    • Zoom in/out with pan navigation
    • Color palette selection
    • Line type selection (solid, dashed, dotted)
    • Real-time socket synchronization
    • Multi-user collaboration with user tracking
    • Save/export canvas functionality
    • Recording-compatible canvas streaming
    • Responsive canvas sizing
    • Touch and mouse input support

    Configuration options

    Canvas width in pixels

    Canvas height in pixels

    Whiteboard state parameters

    Socket.io client instance

    Alert display function

    User permission level ('2'=host, '1'=co-host)

    Meeting/room identifier

    Current canvas shapes array

    Image background enabled state

    Redo action stack

    Undo action stack

    Whiteboard session active

    Whiteboard session ended

    Active whiteboard users

    Current meeting participants

    All participants (incl. left)

    Screen identifier for streaming

    Recording active state

    Recording stopped state

    Recording paused state

    Recording resumed state

    Recording configuration

    Current user member ID

    Screen sharing active

    Target recording resolution

    Host recording resolution

    Update shapes array

    Update background state

    Update redo stack

    Update undo stack

    Update session state

    Update ended state

    Update user list

    Update participants

    Update screen ID

    Update sharing state

    Update canvas reference

    Screen change handler

    Canvas stream capture handler

    Retrieve latest parameters

    Show aspect ratio indicator

    Rendered whiteboard canvas with toolbar

    // Basic whiteboard for collaborative drawing

    import React from 'react';
    import { Whiteboard } from 'mediasfu-reactjs';

    function CollaborativeWhiteboard({ parameters }) {
      return (
        <Whiteboard
          customWidth={1280}
          customHeight={720}
          parameters={parameters}
          showAspect={true}
        />
      );
    }

    // Whiteboard with analytics tracking

    import { Whiteboard } from 'mediasfu-reactjs';

    function AnalyticsWhiteboard({ parameters }) {
      return (
        <Whiteboard
          customWidth={1920}
          customHeight={1080}
          parameters={{
            ...parameters,
            updateShapes: (shapes) => {
              analytics.track('whiteboard_shape_added', {
                shapeCount: shapes.length,
                lastShapeType: shapes[shapes.length - 1]?.type,
              });
              parameters.updateShapes(shapes);
            },
            updateWhiteboardStarted: (started) => {
              if (started) {
                analytics.track('whiteboard_session_started', {
                  userLevel: parameters.islevel,
                  participantCount: parameters.participants.length,
                });
              }
              parameters.updateWhiteboardStarted(started);
            },
          }}
          showAspect={true}
        />
      );
    }

    // Whiteboard with custom dimensions and user tracking

    import { Whiteboard } from 'mediasfu-reactjs';

    function CustomWhiteboard({ parameters }) {
      const activeUsers = parameters.whiteboardUsers.filter(u =>
        parameters.participants.some(p => p.id === u.id)
      );

      return (
        <div>
          <div style={{
            padding: 12,
            background: '#f8fafc',
            borderRadius: 8,
            marginBottom: 16,
          }}>
            <div style={{ fontWeight: 600 }}>
              Active Collaborators: {activeUsers.length}
            </div>
            <div style={{ fontSize: 14, marginTop: 4 }}>
              {activeUsers.map(u => u.name).join(', ')}
            </div>
          </div>
          <Whiteboard
            customWidth={1600}
            customHeight={900}
            parameters={parameters}
            showAspect={false}
          />
        </div>
      );
    }

    // Override with MediasfuGeneric uiOverrides

    import { MediasfuGeneric, Whiteboard } from 'mediasfu-reactjs';

    const uiOverrides = {
      whiteboard: {
        component: (props) => (
          <Whiteboard
            {...props}
            customWidth={1920}
            customHeight={1080}
            showAspect={true}
          />
        ),
      },
    };

    <MediasfuGeneric uiOverrides={uiOverrides} />;

    Settings

    Member Visibility