Interface FlexibleVideoOptions

Interface defining the props for the FlexibleVideo component.

FlexibleVideo provides a video grid layout with optional screen sharing overlay and annotation capabilities.

FlexibleVideoOptions

Grid Configuration:

interface FlexibleVideoOptions {
    customWidth: number;
    customHeight: number;
    rows: number;
    columns: number;
    componentsToRender: ReactNode[];
    showAspect: boolean;
    backgroundColor?: string;
    Screenboard?: ReactNode;
    annotateScreenStream?: boolean;
    localStreamScreen?: MediaStream;
    style?: object;
    renderContent?: ((options: {
        defaultContent: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
    renderContainer?: ((options: {
        defaultContainer: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
}

Properties

customWidth customHeight rows columns componentsToRender showAspect backgroundColor? Screenboard? annotateScreenStream? localStreamScreen? style? renderContent? renderContainer?

Properties

customWidth

customWidth: number

Width for each grid cell (in pixels)

customHeight

customHeight: number

Height for each grid cell (in pixels)

Display Options:

rows

rows: number

Number of rows in the video grid

columns

columns: number

Number of columns in the video grid

componentsToRender

componentsToRender: ReactNode[]

Array of video components to display

Cell Dimensions:

showAspect

showAspect: boolean

Whether to maintain aspect ratio for grid cells

OptionalbackgroundColor

backgroundColor?: string

Background color for each grid cell

Screen Sharing & Annotation:

OptionalScreenboard

Screenboard?: ReactNode

Optional screenboard component to overlay on the grid

OptionalannotateScreenStream

annotateScreenStream?: boolean

Whether to enable screen stream annotation

OptionallocalStreamScreen

localStreamScreen?: MediaStream

Local screen MediaStream for annotation

Styling:

Optionalstyle

style?: object

Custom styles for the video grid container

Advanced Render Overrides:

OptionalrenderContent

renderContent?: ((options: {
    defaultContent: ReactNode;
    dimensions: {
        width: number;
        height: number;
    };
}) => ReactNode)

Function to wrap or replace the default video grid content

OptionalrenderContainer

renderContainer?: ((options: {
    defaultContainer: ReactNode;
    dimensions: {
        width: number;
        height: number;
    };
}) => ReactNode)

Function to wrap or replace the entire video grid container

Settings

Member Visibility

On This Page

Properties