MediaSFU React Native
    Preparing search index...

    Interface VideoCardOptions

    Options for rendering a VideoCard.

    VideoCardOptions

    Appearance:

    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?: StyleProp<ViewStyle>;
        renderContent?: (
            options: {
                defaultContent: Element;
                dimensions: { width: number; height: number };
            },
        ) => Element;
        renderContainer?: (
            options: {
                defaultContainer: Element;
                dimensions: { width: number; height: number };
            },
        ) => Element;
    }
    Index

    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

    customStyle?: StyleProp<ViewStyle>

    Additional styling for the video card shell.

    name: string

    Participant display name.

    barColor?: string

    Waveform color.

    textColor?: string

    Label color.

    imageSource?: string

    Backup image when no stream is available.

    roundedImage?: boolean

    Rounds fallback image corners.

    imageStyle?: StyleProp<ImageStyle>

    Additional image styling.

    remoteProducerId: string

    Identifier for the remote stream owner.

    eventType: EventType

    Current event type (meeting, webinar, etc.).

    forceFullDisplay: boolean

    Forces video to fill the card.

    videoStream: MediaStream

    Media stream to render.

    showControls?: boolean

    Shows default control overlay.

    showInfo?: boolean

    Shows participant info overlay.

    videoInfoComponent?: ReactNode

    Custom info overlay content.

    videoControlsComponent?: ReactNode

    Custom control overlay content.

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

    Control overlay anchor.

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

    Info overlay anchor.

    Behaviour:

    participant: Participant

    Participant metadata for controls.

    backgroundColor?: string

    Background fill color.

    Video Source:

    audioDecibels?: AudioDecibels[]

    Collection of audio decibels for waveform.

    doMirror?: boolean

    Mirrors the video for self-views.

    Controls & Info:

    parameters: VideoCardParameters

    Shared meeting parameter bundle.

    customVideoCard?: CustomVideoCardType

    Override for the card body layout.

    Advanced Render Overrides:

    style?: StyleProp<ViewStyle>

    Optional wrapper styling for override containers.

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

    Custom renderer for card internals.

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

    Custom renderer for the container wrapper.

    Settings

    Member Visibility

    On This Page

    Properties