Class FlexibleVideo

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

Selector

app-flexible-video

Standalone

true

Imports

CommonModule

Inputs

  • 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.

Methods

  • 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.

Example

<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

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

constructor

Methods

ngOnInit

  • ngOnInit(): void

  • 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

ngOnChanges

  • ngOnChanges(changes): 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

generateGrid

createInjector

Properties

customWidth

customWidth: number = 0

customHeight

customHeight: number = 0

rows

rows: number = 0

columns

columns: number = 0

componentsToRender

componentsToRender: CustomMediaComponent[] = []

showAspect

showAspect: boolean = false

OptionalbackgroundColor

backgroundColor?: string = 'transparent'

OptionalScreenboard

Screenboard?: CustomMediaComponent

OptionalannotateScreenStream

annotateScreenStream?: boolean = false

OptionallocalStreamScreen

localStreamScreen?: MediaStream

key

key: number = 0

cardWidth

cardWidth: number = 0

cardHeight

cardHeight: number = 0

cardTop

cardTop: number = 0

cardLeft

cardLeft: number = 0

canvasLeft

canvasLeft: number = 0

grid

grid: any[][] = []

Settings

Member Visibility

On This Page

Constructors
Methods
Properties