MediaSFU ReactJS
    Preparing search index...

    Variable VideoCardConst

    VideoCard: React.FC<VideoCardOptions> = ...

    VideoCard component displays participant video with optional controls, info overlay, and animated waveform.

    This component is commonly overridden via uiOverrides.videoCard or replaced with a custom builder passed to customVideoCard. Use this to add host badges, reactions, CRM overlays, or analytics.

    The properties for the VideoCard component.

    Custom styles for the card wrapper.

    Participant display name.

    Waveform bar color (audio activity visualization).

    Text color for participant name overlay.

    Remote producer ID for the video track.

    Event context (conference, webinar, broadcast, chat).

    Force full display mode (no cropping).

    Video MediaStream to render.

    Display control buttons (mute, stop video).

    Display participant info overlay.

    Custom info component (replaces default name badge).

    Custom controls component (replaces default buttons).

    Control overlay position.

    Info overlay position.

    Full participant object (includes mute state, level, etc.).

    Background color behind video.

    Audio level data for waveform animation.

    Mirror the video horizontally (for self-view).

    Additional parameters including socket, room context, and callbacks.

    Props for outer container div.

    Props for info overlay wrapper.

    Props for controls overlay wrapper.

    Additional UI elements rendered inside the card.

    The rendered VideoCard component.

    // Basic usage

    <VideoCard
      name="John Doe"
      remoteProducerId="producer-123"
      eventType="conference"
      forceFullDisplay={false}
      videoStream={mediaStream}
      participant={participant}
      backgroundColor="#0f172a"
      parameters={parameters}
    />

    // Custom styled video card via customVideoCard prop

    const customVideoCard: CustomVideoCardType = (props) => (
      <VideoCard
        {...props}
        customStyle={{
          borderRadius: 20,
          border: "3px solid #4c1d95",
          boxShadow: "0 28px 65px rgba(76,29,149,0.35)",
        }}
        infoOverlayProps={{
          style: {
            background: "rgba(79,70,229,0.9)",
            color: "#f8fafc",
            fontWeight: 600,
          },
        }}
      />
    );

    <MediasfuGeneric customVideoCard={customVideoCard} />

    // Override via uiOverrides

    const uiOverrides: MediasfuUICustomOverrides = {
      videoCard: {
        render: (props) => (
          <div style={{ position: "relative" }}>
            <VideoCard {...props} />
            {props.participant.islevel === "2" && (
              <div style={{ position: "absolute", top: 8, right: 8, background: "gold", padding: 4, borderRadius: 4 }}>
                HOST
              </div>
            )}
          </div>
        ),
      },
    };

    // Full configuration example

    <VideoCard
          customStyle={{ border: '1px solid black' }}
          name="John Doe"
          barColor="blue"
          textColor="yellow"
          remoteProducerId="12345"
          eventType="video"
          forceFullDisplay={true}
          videoStream={mediaStream}
          showControls={true}
          showInfo={true}
          controlsPosition="topLeft"
          infoPosition="topRight"
          participant={participant}
          backgroundColor="black"
          audioDecibels={audioDecibels}
          doMirror={true}
          parameters={parameters}
        />
    }


    export default App;

    Settings

    Member Visibility