MediaSFU Angular
    Preparing search index...

    Class FlexibleVideo

    FlexibleVideo component displays a customizable video grid, supporting dynamic layout and optional screenboard overlay.

    app-flexible-video

    true

    CommonModule

    • customWidth (number): The custom width for each video grid item in pixels. Default is 0.
    • customHeight (number): The custom height for each video grid item in pixels. Default is 0.
    • rows (number): Number of rows in the video grid. Default is 0.
    • columns (number): Number of columns in the video grid. Default is 0.
    • componentsToRender (CustomMediaComponent[]): Array of components to render in the grid.
    • showAspect (boolean): Flag to control aspect ratio display. Default is false.
    • backgroundColor (string): Background color for the video grid. Default is 'transparent'.
    • Screenboard (CustomMediaComponent): Optional screenboard component to overlay on the grid.
    • annotateScreenStream (boolean): Flag to annotate the screen stream. Default is false.
    • localStreamScreen (MediaStream): Local screen stream for video.
    • ngOnInit(): Initializes and generates the grid on component load if showAspect is true.
    • ngOnChanges(changes: SimpleChanges): Updates grid layout and dimensions if properties change.
    • generateGrid(): Generates grid structure based on rows, columns, and componentsToRender.
    • createInjector(inputs: any): Creates and caches an injector for component inputs.
    <app-flexible-video
      [customWidth]="300"
      [customHeight]="200"
      [rows]="2"
      [columns]="3"
      [componentsToRender]="[{ component: VideoComponent, inputs: { stream: videoStream } }]"
      showAspect="true"
      [Screenboard]="{ component: ScreenOverlayComponent, inputs: { overlayData: data } }"
    ></app-flexible-video>

    Implements

    • OnInit
    • OnChanges
    Index

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges generateGrid createInjector

    Properties

    customWidth customHeight rows columns componentsToRender showAspect backgroundColor? Screenboard? annotateScreenStream? localStreamScreen? key cardWidth cardHeight cardTop cardLeft canvasLeft grid

    Constructors

    Methods

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: SimpleChanges

        The changed properties.

      Returns void

    Properties

    customWidth: number = 0
    customHeight: number = 0
    rows: number = 0
    columns: number = 0
    componentsToRender: CustomMediaComponent[] = []
    showAspect: boolean = false
    backgroundColor?: string = 'transparent'
    Screenboard?: CustomMediaComponent
    annotateScreenStream?: boolean = false
    localStreamScreen?: MediaStream
    key: number = 0
    cardWidth: number = 0
    cardHeight: number = 0
    cardTop: number = 0
    cardLeft: number = 0
    canvasLeft: number = 0
    grid: any[][] = []

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties