Class CardVideoDisplay

CardVideoDisplay component displays a video stream with options for full display, mirroring, and background color customization.

app-card-video-display

true

CommonModule

  • remoteProducerId (string): Identifier for the remote producer.
  • eventType (EventType): Type of event, such as 'webinar'. Default is 'webinar'.
  • forceFullDisplay (boolean): Forces full video display if true. Default is false.
  • videoStream (MediaStream | null): The media stream to display in the video element.
  • backgroundColor (string): Background color for the video container. Default is 'transparent'.
  • doMirror (boolean): Mirrors the video if true. Default is false.
  • ngOnInit(): Initializes the video stream and sets the container style on component load.
  • ngOnChanges(changes: SimpleChanges): Updates the video stream or container style when inputs change.
  • updateVideoStream(): Assigns the video stream to the video element if it differs from the current stream.
  • setVideoContainerStyle(): Sets the style of the video container based on the provided background color.
  • getBaseVideoContainerStyle(): Returns base styles for the video container.
  • getVideoStyle(): Returns styles for the video element, including optional mirroring and sizing.
<app-card-video-display
[remoteProducerId]="producerId"
[eventType]="'conference'"
[forceFullDisplay]="true"
[videoStream]="stream"
[backgroundColor]="'black'"
[doMirror]="true">
</app-card-video-display>

Implements

  • OnInit
  • OnChanges

Constructors

Methods

  • Returns {
        display: string;
        justifyContent: string;
        alignItems: string;
        width: string;
        height: string;
        backgroundColor: string;
    }

    • display: string
    • justifyContent: string
    • alignItems: string
    • width: string
    • height: string
    • backgroundColor: string

Properties

remoteProducerId: string = ''
eventType: EventType = 'webinar'
forceFullDisplay: boolean = false
videoStream: null | MediaStream = null
backgroundColor: string = 'transparent'
doMirror: boolean = false
videoElement: ElementRef<HTMLVideoElement>
videoContainerStyle: any