mediasfu-reactjs
Version:
MediaSFU Prebuilt ReactJS SDK
144 lines • 5.72 kB
TypeScript
import React from 'react';
import './Whiteboard.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { CaptureCanvasStreamParameters, CaptureCanvasStreamType, OnScreenChangesParameters, OnScreenChangesType, Participant, ShowAlert, WhiteboardUser } from '../../@types/types';
import { Socket } from 'socket.io-client';
export interface Shape {
type: string;
x?: number;
y?: number;
x1?: number;
y1?: number;
x2?: number;
y2?: number;
text?: string;
color?: string;
font?: string;
fontSize?: number;
thickness?: number;
lineType?: string;
points?: Array<{
x: number;
y: number;
}>;
img?: HTMLImageElement;
src?: string;
}
export interface WhiteboardParameters extends OnScreenChangesParameters, CaptureCanvasStreamParameters {
socket: Socket;
showAlert?: ShowAlert;
islevel: string;
roomName: string;
shapes: Shape[];
useImageBackground: boolean;
redoStack: Shape[];
undoStack: string[];
whiteboardStarted: boolean;
whiteboardEnded: boolean;
whiteboardUsers: WhiteboardUser[];
participants: Participant[];
participantsAll: Participant[];
screenId: string;
recordStarted: boolean;
recordStopped: boolean;
recordPaused: boolean;
recordResumed: boolean;
recordingMediaOptions: string;
member: string;
shareScreenStarted: boolean;
targetResolution?: string;
targetResolutionHost?: string;
updateShapes: (shapes: Shape[]) => void;
updateUseImageBackground: (useImageBackground: boolean) => void;
updateRedoStack: (redoStack: Shape[]) => void;
updateUndoStack: (undoStack: string[]) => void;
updateWhiteboardStarted: (whiteboardStarted: boolean) => void;
updateWhiteboardEnded: (whiteboardEnded: boolean) => void;
updateWhiteboardUsers: (whiteboardUsers: WhiteboardUser[]) => void;
updateParticipants: (participants: Participant[]) => void;
updateScreenId: (screenId: string) => void;
updateShareScreenStarted: (shareScreenStarted: boolean) => void;
updateCanvasWhiteboard: (canvasWhiteboard: HTMLCanvasElement | null) => void;
onScreenChanges: OnScreenChangesType;
captureCanvasStream: CaptureCanvasStreamType;
getUpdatedAllParams: () => WhiteboardParameters;
[key: string]: any;
}
export interface WhiteboardOptions {
customWidth: number;
customHeight: number;
parameters: WhiteboardParameters;
showAspect: boolean;
}
export type WhiteboardType = (props: WhiteboardOptions) => JSX.Element;
/**
* Whiteboard component provides a collaborative drawing interface with features such as
* freehand drawing, erasing, shapes, and undo/redo functionality.
*
* @component
* @param {WhiteboardOptions} props - Properties for configuring the Whiteboard.
* @param {number} props.customWidth - Custom width for the whiteboard.
* @param {number} props.customHeight - Custom height for the whiteboard.
* @param {WhiteboardParameters} props.parameters - Parameters and state management functions for whiteboard features.
* @param {boolean} props.showAspect - Flag to show the aspect ratio.
*
* @returns {JSX.Element} The rendered Whiteboard component.
*
* @example
* ```tsx
* import { Whiteboard } from 'mediasfu-reactjs';
* import { io } from 'socket.io-client';
*
* const parameters = {
* socket: io("http://localhost:3000"),
* showAlert: (alert) => console.log(alert),
* islevel: "2",
* roomName: "Room 1",
* shapes: [],
* useImageBackground: false,
* redoStack: [],
* undoStack: [],
* whiteboardStarted: true,
* whiteboardEnded: false,
* whiteboardUsers: [{ id: "user1", name: "John" }],
* participants: [{ id: "user1", name: "John", islevel: "1" }],
* screenId: "screen1",
* recordStarted: false,
* recordStopped: false,
* recordPaused: false,
* recordResumed: false,
* recordingMediaOptions: "video",
* member: "John",
* shareScreenStarted: false,
* updateShapes: (newShapes) => console.log("Shapes updated:", newShapes),
* updateUseImageBackground: (useImageBackground) => console.log("Background updated:", useImageBackground),
* updateRedoStack: (redoStack) => console.log("Redo stack updated:", redoStack),
* updateUndoStack: (undoStack) => console.log("Undo stack updated:", undoStack),
* updateWhiteboardStarted: (started) => console.log("Whiteboard started:", started),
* updateWhiteboardEnded: (ended) => console.log("Whiteboard ended:", ended),
* updateWhiteboardUsers: (users) => console.log("Whiteboard users updated:", users),
* updateParticipants: (participants) => console.log("Participants updated:", participants),
* updateScreenId: (screenId) => console.log("Screen ID updated:", screenId),
* updateShareScreenStarted: (shareStarted) => console.log("Screen sharing started:", shareStarted),
* updateCanvasWhiteboard: (canvas) => console.log("Canvas updated:", canvas),
* onScreenChanges: ({ changed }) => console.log("Screen changed:", changed),
* captureCanvasStream: () => console.log("Canvas stream captured"),
* };
*
* <Whiteboard
* customWidth={800}
* customHeight={600}
* parameters={parameters}
* showAspect={true}
* />
* ```
*
* @remarks
* This component supports multiple drawing modes (pen, eraser, shapes) and manages complex state interactions.
* It leverages HTML5 Canvas for drawing operations and supports touch events for mobile devices.
* Various `useEffect` hooks initialize and set up event listeners, while methods handle drawing,
* erasing, zooming, and shape manipulation.
*/
declare const Whiteboard: React.FC<WhiteboardOptions>;
export default Whiteboard;
//# sourceMappingURL=Whiteboard.d.ts.map