MediaSFU Angular
    Preparing search index...

    Class AudioCard

    AudioCard component renders an audio card for participants with customizable options and media controls. It shows audio waveform animations, video/audio toggle buttons, and additional info based on injected or passed properties.

    app-audio-card

    true

    CommonModule, FontAwesomeModule, MiniCard

    • controlUserMedia (function): Optional function to control media actions for a participant.
    • customStyle (Partial): Custom CSS styles for the audio card.
    • name (string): Name of the participant.
    • barColor (string): Color for the audio bar. Default is 'red'.
    • textColor (string): Text color. Default is 'white'.
    • imageSource (string): Image source URL for participant.
    • roundedImage (boolean): Toggle for rounded image style.
    • imageStyle (Partial): Custom styles for the image.
    • showControls (boolean): Toggle for displaying media controls. Default is true.
    • showInfo (boolean): Toggle for displaying info section. Default is true.
    • videoInfoComponent (HTMLElement | CustomComponent): Custom component for participant info.
    • videoControlsComponent (HTMLElement | CustomComponent): Custom component for video controls.
    • controlsPosition (ControlsPosition): Position for controls on the card. Default is 'topLeft'.
    • infoPosition (InfoPosition): Position for the info section. Default is 'topRight'.
    • participant (Participant | null): Participant object reference.
    • backgroundColor (string): Background color for the card.
    • audioDecibels (AudioDecibels): Optional audio decibel levels for the participant.
    • parameters (AudioCardParameters): Required object with configuration parameters.
    • ngOnInit(): Initializes the component, sets default media control behavior, and activates audio waveform animations.
    • ngOnDestroy(): Clears the animation interval.
    • animateBar(index: number): Animates the audio bar at a specified index.
    • animateWaveform(): Triggers animations across the waveform bars.
    • resetWaveform(): Resets waveform animations to default.
    • getAnimationDuration(index: number): Retrieves the animation duration for a bar by index.
    • toggleAudio(): Toggles audio for the participant if media control function is defined.
    • toggleVideo(): Toggles video for the participant if media control function is defined.
    • renderControls(): Returns showControls to render or hide media controls.
    • combineStyles(baseStyle: any, additionalStyles: any): Combines base and additional styles for inline styling.
    • getOverlayPosition(position: string): Retrieves calculated overlay position for elements.
    • isCustomComponent(comp: HTMLElement | CustomComponent): Type guard for identifying custom components.
    • isFunctionComponent(comp: HTMLElement | CustomComponent): Type guard for identifying function components.
    <app-audio-card
     [controlUserMedia]="controlMediaFunction"
    [name]="participantName"
    [barColor]="'blue'"
    [textColor]="'black'"
    [imageSource]="participantImageURL"
    [roundedImage]="true"
    [showControls]="true"
    [participant]="participant"
    [parameters]="audioCardParameters">
    </app-audio-card>

    Implements

    • OnInit
    • OnDestroy
    • OnChanges
    Index

    Accessors

    liveSubtitleText hasRenderableImage isSpeaking

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges ngOnDestroy getWaveformRingHeight handleImageError animateWaveform resetWaveform syncThemeMode toggleAudio toggleVideo renderControls combineStyles getOverlayPosition isCustomComponent isFunctionComponent

    Properties

    controlUserMedia? customStyle name barColor textColor imageSource roundedImage imageStyle showControls showInfo videoInfoComponent? videoControlsComponent? controlsPosition infoPosition participant backgroundColor audioDecibels parameters faVideo faVideoSlash faMicrophone faMicrophoneSlash waveformAnimations ringBarIndices showWaveform audioLevelInterval waveformInterval isDarkModeEnabled imageLoadFailed

    Accessors

    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

    controlUserMedia?: (options: ControlMediaOptions) => Promise<void>
    customStyle: Partial<CSSStyleDeclaration> = {}
    name: string = ''
    barColor: string = 'red'
    textColor: string = 'white'
    imageSource: string = ''
    roundedImage: boolean = false
    imageStyle: Partial<CSSStyleDeclaration> = {}
    showControls: boolean = true
    showInfo: boolean = true
    videoInfoComponent?: HTMLElement | CustomComponent
    videoControlsComponent?: HTMLElement | CustomComponent
    controlsPosition: string = 'topLeft'
    infoPosition: string = 'topRight'
    participant: Participant | null = null
    backgroundColor: string = ''
    audioDecibels: any
    parameters: AudioCardParameters
    faVideo: IconDefinition = faVideo
    faVideoSlash: IconDefinition = faVideoSlash
    faMicrophone: IconDefinition = faMicrophone
    faMicrophoneSlash: IconDefinition = faMicrophoneSlash
    waveformAnimations: number[] = ...
    ringBarIndices: number[] = ...
    showWaveform: boolean = false
    audioLevelInterval: any
    waveformInterval: any
    isDarkModeEnabled: boolean = false
    imageLoadFailed: boolean = false

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties