MediaSFU React Native (Expo)
    Preparing search index...

    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;
        liveSubtitleText?: string;
        showSubtitles?: 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;
    }
    Index

    Properties

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

    Properties

    customStyle?: StyleProp<ViewStyle>

    Custom styles for the card container

    name: string

    Participant's display name

    barColor?: string

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

    textColor?: string

    Color of text overlays (default: 'white')

    imageSource?: string

    URI for participant's avatar image

    roundedImage?: boolean

    Whether to display avatar with rounded corners

    imageStyle?: StyleProp<ImageStyle>

    Custom styles for the avatar image

    Controls & Info Properties:

    remoteProducerId: string

    Producer ID for the video stream

    eventType: EventType

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

    forceFullDisplay: boolean

    Whether to force fullscreen display mode

    Styling Properties:

    videoStream: MediaStream

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

    showControls?: boolean

    Whether to show media control buttons

    showInfo?: boolean

    Whether to show participant info overlay

    videoInfoComponent?: ReactNode

    Custom component for info overlay

    videoControlsComponent?: ReactNode

    Custom component for controls

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

    Position of controls overlay

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

    Position of info overlay

    Audio Visualization:

    participant: Participant

    Complete participant object with metadata

    backgroundColor?: string

    Background color (default: '#2c678f')

    audioDecibels?: AudioDecibels[]

    Audio level data for waveform animation

    State Parameters:

    doMirror?: boolean

    Whether to mirror the video horizontally

    Image/Avatar Properties:

    liveSubtitleText?: string
    showSubtitles?: boolean
    parameters: VideoCardParameters

    State and context parameters for the card

    Custom UI Override:

    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:

    style?: object

    Additional style object for the container

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

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

    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