Function Whiteboard

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

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

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

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}
    />
  );
}
Copy

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>
  );
}
Copy

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

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

<MediasfuGeneric uiOverrides={uiOverrides} />;
Copy