MediaSFU Angular
    Preparing search index...

    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.

    app-video-card

    true

    [CommonModule, FontAwesomeModule, CardVideoDisplay]

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

    customStyle - Styles for the card container.

    name - Name of the participant displayed on the card.

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

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

    imageSource - Source URL of the participant's image.

    roundedImage - Whether the image should have rounded corners.

    imageStyle - Additional styles for the image.

    remoteProducerId - ID of the remote media producer.

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

    forceFullDisplay - Forces full display if true.

    videoStream - Stream of the video to be displayed.

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

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

    videoInfoComponent - Custom component for video info display.

    videoControlsComponent - Custom component for video controls.

    controlsPosition - Position of controls overlay.

    infoPosition - Position of info overlay.

    participant - Participant data object.

    backgroundColor - Background color of the video card.

    audioDecibels - Audio decibel data for animating waveform.

    doMirror - If true, mirrors the video display.

    parameters - Additional parameters including socket and alert configuration.

    ngOnInit - Lifecycle hook to initialize audio decibel interval check.

    ngOnDestroy - Lifecycle hook to clear intervals.

    animateWaveform - Starts audio waveform animation.

    resetWaveform - Resets waveform animations.

    getAnimationDuration - Returns animation duration for given bar index.

    toggleAudio - Toggles participant's audio status.

    toggleVideo - Toggles participant's video status.

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

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

    isCustomComponent - Checks if a component is a custom component.

    isFunctionComponent - Checks if a component is a function component.

    Implements

    • OnInit
    • OnDestroy
    Index

    Accessors

    liveSubtitleText

    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

    Accessors

    Constructors

    • Parameters

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

      Returns VideoCard

    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

    • Returns
          | 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 "
          | null

    Properties

    customStyle: Partial<CSSStyleDeclaration> = {}
    name: string
    barColor: string = 'red'
    textColor: string = 'white'
    imageSource: string
    roundedImage: boolean = false
    imageStyle: Partial<CSSStyleDeclaration> = {}
    remoteProducerId: string
    eventType: EventType
    forceFullDisplay: boolean
    videoStream: MediaStream | null = null
    showControls: boolean = true
    showInfo: boolean = true
    videoInfoComponent?: HTMLElement | CustomComponent
    videoControlsComponent?: HTMLElement | CustomComponent
    controlsPosition: "topRight" | "topLeft" | "bottomRight" | "bottomLeft" = 'topLeft'
    infoPosition: "topRight" | "topLeft" | "bottomRight" | "bottomLeft" = 'topRight'
    participant: Participant
    backgroundColor: string
    audioDecibels: AudioDecibels[] = []
    doMirror: boolean
    parameters: VideoCardParameters
    waveformAnimations: number[] = ...

    Array representing animation states for waveform bars.

    showWaveform: boolean = true

    Flag to toggle waveform animation. Default is true.

    interval: any

    Interval reference for audio decibel checks.

    faMicrophone: IconDefinition = faMicrophone

    FontAwesome icon for microphone.

    faMicrophoneSlash: IconDefinition = faMicrophoneSlash

    FontAwesome icon for muted microphone.

    faVideo: IconDefinition = faVideo

    FontAwesome icon for video.

    faVideoSlash: IconDefinition = faVideoSlash

    FontAwesome icon for video off.

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties