Interface VideoCardOptions

Interface defining the options for the VideoCard component.

VideoCard displays a participant's video stream with optional controls, info overlay, and audio visualization waveform.

VideoCardOptions

Core Display Properties:

interface VideoCardOptions {
    customStyle?: StyleProp<ViewStyle>;
    name: string;
    barColor?: string;
    textColor?: string;
    imageSource?: string;
    roundedImage?: boolean;
    imageStyle?: StyleProp<ImageStyle>;
    remoteProducerId: string;
    eventType: EventType;
    forceFullDisplay: boolean;
    videoStream: MediaStream;
    showControls?: boolean;
    showInfo?: boolean;
    videoInfoComponent?: ReactNode;
    videoControlsComponent?: ReactNode;
    controlsPosition?:
        | "topLeft"
        | "topRight"
        | "bottomLeft"
        | "bottomRight";
    infoPosition?:
        | "topLeft"
        | "topRight"
        | "bottomLeft"
        | "bottomRight";
    participant: Participant;
    backgroundColor?: string;
    audioDecibels?: AudioDecibels[];
    doMirror?: boolean;
    parameters: VideoCardParameters;
    customVideoCard?: CustomVideoCardType;
    style?: object;
    renderContent?: ((options: {
        defaultContent: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
    renderContainer?: ((options: {
        defaultContainer: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
}

Properties

customStyle? name barColor? textColor? imageSource? roundedImage? imageStyle? remoteProducerId eventType forceFullDisplay videoStream showControls? showInfo? videoInfoComponent? videoControlsComponent? controlsPosition? infoPosition? participant backgroundColor? audioDecibels? doMirror? parameters customVideoCard? style? renderContent? renderContainer?

Properties

OptionalcustomStyle

customStyle?: StyleProp<ViewStyle>

Custom styles for the card container

name

name: string

Participant's display name

OptionalbarColor

barColor?: string

Color of the audio waveform bars (default: 'white')

OptionaltextColor

textColor?: string

Color of text overlays (default: 'white')

OptionalimageSource

imageSource?: string

URI for participant's avatar image

OptionalroundedImage

roundedImage?: boolean

Whether to display avatar with rounded corners

OptionalimageStyle

imageStyle?: StyleProp<ImageStyle>

Custom styles for the avatar image

Controls & Info Properties:

remoteProducerId

remoteProducerId: string

Producer ID for the video stream

eventType

eventType: EventType

Type of event ('conference', 'webinar', 'broadcast', etc.)

forceFullDisplay

forceFullDisplay: boolean

Whether to force fullscreen display mode

Styling Properties:

videoStream

videoStream: MediaStream

Video MediaStream object (null for screenshare or when video is off)

OptionalshowControls

showControls?: boolean

Whether to show media control buttons

OptionalshowInfo

showInfo?: boolean

Whether to show participant info overlay

OptionalvideoInfoComponent

videoInfoComponent?: ReactNode

Custom component for info overlay

OptionalvideoControlsComponent

videoControlsComponent?: ReactNode

Custom component for controls

OptionalcontrolsPosition

controlsPosition?:
    | "topLeft"
    | "topRight"
    | "bottomLeft"
    | "bottomRight"

Position of controls overlay

OptionalinfoPosition

infoPosition?:
    | "topLeft"
    | "topRight"
    | "bottomLeft"
    | "bottomRight"

Position of info overlay

Audio Visualization:

participant

participant: Participant

Complete participant object with metadata

OptionalbackgroundColor

backgroundColor?: string

Background color (default: '#2c678f')

OptionalaudioDecibels

audioDecibels?: AudioDecibels[]

Audio level data for waveform animation

State Parameters:

OptionaldoMirror

doMirror?: boolean

Whether to mirror the video horizontally

Image/Avatar Properties:

parameters

parameters: VideoCardParameters

State and context parameters for the card

Custom UI Override:

OptionalcustomVideoCard

customVideoCard?: CustomVideoCardType

Custom render function for complete card replacement. When provided, this function receives all VideoCardOptions and returns a custom JSX.Element. This allows full control over the video card's appearance and behavior.

Advanced Render Overrides:

Optionalstyle

style?: object

Additional style object for the container

OptionalrenderContent

renderContent?: ((options: {
    defaultContent: ReactNode;
    dimensions: {
        width: number;
        height: number;
    };
}) => ReactNode)

Function to wrap or replace the default card content while preserving container

OptionalrenderContainer

renderContainer?: ((options: {
    defaultContainer: ReactNode;
    dimensions: {
        width: number;
        height: number;
    };
}) => ReactNode)

Function to wrap or replace the entire card container

Settings

Member Visibility

On This Page

Properties