MediaSFU ReactJS
    Preparing search index...

    Variable ScreenboardConst

    Screenboard: React.FC<ScreenboardOptions> = ...

    Screenboard - Lightweight annotation overlay for screen sharing

    A streamlined drawing canvas designed specifically for annotating shared screens during presentations. Provides essential drawing tools (pen, shapes, eraser) with minimal UI footprint to avoid obscuring shared content. Perfect for highlighting key points, circling important areas, and adding visual emphasis during screen shares.

    Features:

    • Freehand drawing with customizable brush
    • Shape tools (rectangle, circle, line)
    • Eraser with adjustable size
    • Color selection palette
    • Line type options (solid, dashed, dotted, dash-dot)
    • Thickness controls for brush and eraser
    • Minimal toolbar design
    • Transparent canvas overlay
    • Real-time drawing synchronization
    • Touch and mouse input support
    • Collapsible toolbar
    • Clear canvas functionality

    Configuration options

    Canvas width in pixels

    Canvas height in pixels

    Screenboard state parameters

    Update canvas reference

    Screen annotation enabled state

    Update modal visibility

    Alert display function

    Async delay utility

    Update annotation state

    Show aspect ratio indicator

    Rendered annotation canvas overlay

    // Basic screen annotation overlay

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

    function ScreenAnnotation({ parameters }) {
      return (
        <Screenboard
          customWidth={1920}
          customHeight={1080}
          parameters={parameters}
          showAspect={false}
        />
      );
    }

    // Screenboard with analytics tracking

    import { Screenboard } from 'mediasfu-reactjs';

    function AnalyticsScreenboard({ parameters }) {
      return (
        <Screenboard
          customWidth={1920}
          customHeight={1080}
          parameters={{
            ...parameters,
            updateAnnotateScreenStream: (annotate) => {
              analytics.track('screen_annotation_toggled', {
                enabled: annotate,
                timestamp: Date.now(),
              });
              parameters.updateAnnotateScreenStream(annotate);
            },
          }}
          showAspect={true}
        />
      );
    }

    // Screenboard with custom dimensions for presentation

    import { Screenboard } from 'mediasfu-reactjs';

    function PresentationAnnotation({ parameters }) {
      return (
        <div style={{ position: 'relative' }}>
          {parameters.annotateScreenStream && (
            <div style={{
              position: 'absolute',
              top: 16,
              left: 16,
              padding: '8px 16px',
              background: 'rgba(0, 0, 0, 0.7)',
              color: 'white',
              borderRadius: 8,
              fontSize: 14,
              zIndex: 1000,
            }}>
              Annotation Mode Active
            </div>
          )}
          <Screenboard
            customWidth={1600}
            customHeight={900}
            parameters={parameters}
            showAspect={false}
          />
        </div>
      );
    }

    // Override with MediasfuGeneric uiOverrides

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

    const uiOverrides = {
      screenboard: {
        component: (props) => (
          <Screenboard
            {...props}
            customWidth={1920}
            customHeight={1080}
            showAspect={false}
          />
        ),
      },
    };

    <MediasfuGeneric uiOverrides={uiOverrides} />;

    Settings

    Member Visibility