Function Screenboard

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

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

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

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

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

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

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

<MediasfuGeneric uiOverrides={uiOverrides} />;
Copy