Class VideoCard

VideoCard component represents a customizable video display card with participant controls for toggling audio and video. It also animates an audio waveform if sound is detected in the participant's audio stream.

Selector

app-video-card

Standalone

true

Imports

[CommonModule, FontAwesomeModule, CardVideoDisplay]

Example

<app-video-card
  [name]="participant.name"
  [videoStream]="videoStream"
  [audioDecibels]="audioDecibels"
  [participant]="participant"
  [parameters]="videoCardParameters"
></app-video-card>

Input

customStyle - Styles for the card container.

Input

name - Name of the participant displayed on the card.

Input

barColor - Color of the waveform bars. Default is 'red'.

Input

textColor - Color of the name text. Default is 'white'.

Input

imageSource - Source URL of the participant's image.

Input

roundedImage - Whether the image should have rounded corners.

Input

imageStyle - Additional styles for the image.

Input

remoteProducerId - ID of the remote media producer.

Input

eventType - Type of event (used for internal logic).

Input

forceFullDisplay - Forces full display if true.

Input

videoStream - Stream of the video to be displayed.

Input

showControls - Determines if the controls are displayed. Default is true.

Input

showInfo - Determines if info (e.g., participant name) is shown. Default is true.

Input

videoInfoComponent - Custom component for video info display.

Input

videoControlsComponent - Custom component for video controls.

Input

controlsPosition - Position of controls overlay.

Input

infoPosition - Position of info overlay.

Input

participant - Participant data object.

Input

backgroundColor - Background color of the video card.

Input

audioDecibels - Audio decibel data for animating waveform.

Input

doMirror - If true, mirrors the video display.

Input

parameters - Additional parameters including socket and alert configuration.

Method

ngOnInit - Lifecycle hook to initialize audio decibel interval check.

Method

ngOnDestroy - Lifecycle hook to clear intervals.

Method

animateWaveform - Starts audio waveform animation.

Method

resetWaveform - Resets waveform animations.

Method

getAnimationDuration - Returns animation duration for given bar index.

Method

toggleAudio - Toggles participant's audio status.

Method

toggleVideo - Toggles participant's video status.

Method

renderControls - Renders the control buttons (audio and video) based on participant status.

Method

getOverlayPosition - Returns overlay position styles based on the input position string.

Method

isCustomComponent - Checks if a component is a custom component.

Method

isFunctionComponent - Checks if a component is a function component.

Implements

  • OnInit
  • OnDestroy

Constructors

constructor

Methods

ngOnInit ngOnDestroy animateWaveform animateBar resetWaveform getAnimationDuration toggleAudio toggleVideo renderControls getOverlayPosition isCustomComponent isFunctionComponent

Properties

customStyle name barColor textColor imageSource roundedImage imageStyle remoteProducerId eventType forceFullDisplay videoStream showControls showInfo videoInfoComponent? videoControlsComponent? controlsPosition infoPosition participant backgroundColor audioDecibels doMirror parameters waveformAnimations showWaveform interval faMicrophone faMicrophoneSlash faVideo faVideoSlash

Constructors

constructor

  • new VideoCard(controlMediaService, injectedCustomStyle, injectedName, injectedBarColor, injectedTextColor, injectedImageSource, injectedRoundedImage, injectedImageStyle, injectedRemoteProducerId, injectedEventType, injectedForceFullDisplay, injectedVideoStream, injectedShowControls, injectedShowInfo, injectedVideoInfoComponent, injectedVideoControlsComponent, injectedControlsPosition, injectedInfoPosition, injectedParticipant, injectedBackgroundColor, injectedAudioDecibels, injectedDoMirror, injectedParameters): VideoCard

  • Parameters

    • controlMediaService: ControlMedia
    • injectedCustomStyle: Partial<CSSStyleDeclaration>
    • injectedName: string
    • injectedBarColor: string
    • injectedTextColor: string
    • injectedImageSource: string
    • injectedRoundedImage: boolean
    • injectedImageStyle: Partial<CSSStyleDeclaration>
    • injectedRemoteProducerId: string
    • injectedEventType: EventType
    • injectedForceFullDisplay: boolean
    • injectedVideoStream: null | MediaStream
    • injectedShowControls: boolean
    • injectedShowInfo: boolean
    • injectedVideoInfoComponent: HTMLElement
    • injectedVideoControlsComponent: HTMLElement
    • injectedControlsPosition:
          | "topLeft"
          | "topRight"
          | "bottomLeft"
          | "bottomRight"
    • injectedInfoPosition:
          | "topLeft"
          | "topRight"
          | "bottomLeft"
          | "bottomRight"
    • injectedParticipant: Participant
    • injectedBackgroundColor: string
    • injectedAudioDecibels: AudioDecibels[]
    • injectedDoMirror: boolean
    • injectedParameters: VideoCardParameters

    Returns VideoCard

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

ngOnDestroy

animateWaveform

animateBar

resetWaveform

getAnimationDuration

toggleAudio

toggleVideo

renderControls

  • renderControls():
        | null
        | HTMLElement
        | CustomComponent
        | "\n <div class=\"overlayControls\">\n <button class=\"controlButton\" (click)=\"toggleAudio()\">\n <fa-icon [icon]=\"participant?.muted ? faMicrophoneSlash : faMicrophone\" [style.color]=\"participant?.muted ? 'red' : 'green'\"></fa-icon>\n </button>\n <button class=\"controlButton\" (click)=\"toggleVideo()\">\n <fa-icon [icon]=\"participant?.videoOn ? faVideo : faVideoSlash\" [style.color]=\"participant?.videoOn ? 'green' : 'red'\"></fa-icon>\n </button>\n </div>\n "

  • Returns
        | null
        | HTMLElement
        | CustomComponent
        | "\n <div class=\"overlayControls\">\n <button class=\"controlButton\" (click)=\"toggleAudio()\">\n <fa-icon [icon]=\"participant?.muted ? faMicrophoneSlash : faMicrophone\" [style.color]=\"participant?.muted ? 'red' : 'green'\"></fa-icon>\n </button>\n <button class=\"controlButton\" (click)=\"toggleVideo()\">\n <fa-icon [icon]=\"participant?.videoOn ? faVideo : faVideoSlash\" [style.color]=\"participant?.videoOn ? 'green' : 'red'\"></fa-icon>\n </button>\n </div>\n "

getOverlayPosition

isCustomComponent

isFunctionComponent

Properties

customStyle

customStyle: Partial<CSSStyleDeclaration> = {}

name

name: string

barColor

barColor: string = 'red'

textColor

textColor: string = 'white'

imageSource

imageSource: string

roundedImage

roundedImage: boolean = false

imageStyle

imageStyle: Partial<CSSStyleDeclaration> = {}

remoteProducerId

remoteProducerId: string

eventType

eventType: EventType

forceFullDisplay

forceFullDisplay: boolean

videoStream

videoStream: null | MediaStream = null

showControls

showControls: boolean = true

showInfo

showInfo: boolean = true

OptionalvideoInfoComponent

videoInfoComponent?: HTMLElement | CustomComponent

OptionalvideoControlsComponent

videoControlsComponent?: HTMLElement | CustomComponent

controlsPosition

controlsPosition:
    | "topLeft"
    | "topRight"
    | "bottomLeft"
    | "bottomRight" = 'topLeft'

infoPosition

infoPosition:
    | "topLeft"
    | "topRight"
    | "bottomLeft"
    | "bottomRight" = 'topRight'

participant

participant: Participant

backgroundColor

backgroundColor: string

audioDecibels

audioDecibels: AudioDecibels[] = []

doMirror

doMirror: boolean

parameters

parameters: VideoCardParameters

waveformAnimations

waveformAnimations: number[] = ...

Array representing animation states for waveform bars.

showWaveform

showWaveform: boolean = true

Flag to toggle waveform animation. Default is true.

interval

interval: any

Interval reference for audio decibel checks.

faMicrophone

faMicrophone: IconDefinition = faMicrophone

FontAwesome icon for microphone.

faMicrophoneSlash

faMicrophoneSlash: IconDefinition = faMicrophoneSlash

FontAwesome icon for muted microphone.

faVideo

faVideo: IconDefinition = faVideo

FontAwesome icon for video.

faVideoSlash

faVideoSlash: IconDefinition = faVideoSlash

FontAwesome icon for video off.

Settings

Member Visibility

On This Page

Constructors
Methods
Properties