Function VideoCard

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.

Component

Example

// Basic usage

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

Example

// 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} />

Example

// 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>
    ),
  },
};

Example

// 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;

Properties

propTypes? displayName?

Properties

OptionalpropTypes

propTypes?: any

Ignored by React.

Deprecated

Only kept in types for backwards compatibility. Will be removed in a future major release.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

Example


const MyComponent: FC = () => {
  return <div>Hello!</div>
}

MyComponent.displayName = 'MyAwesomeComponent'

Settings

Member Visibility

On This Page

Properties