MediaSFU React Native
    Preparing search index...

    Variable VideoCardConst

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

    VideoCard renders participant video with optional overlays for controls, info, and audio waveforms. It integrates with controlMedia to enforce host actions and offers override hooks for bespoke layouts.

    • Streams video via CardVideoDisplay, falling back to initials or an image.
    • Provides animated waveform tied to decibel telemetry when enabled.
    • Offers customizable overlays for participant info and media controls.
    • Supports mirrored self-view and force-fill presentations.
    • Controls expose iconography and can be wrapped in accessible touch targets.
    • Text overlays default to high-contrast color schemes.

    Video card configuration.

    Rendered video card.

    <VideoCard
      name={participant.name}
      participant={participant}
      remoteProducerId={producerId}
      videoStream={stream}
      parameters={parameters}
      forceFullDisplay
    />

    Example: Custom content override.

    <VideoCard
      {...props}
      renderContent={({ defaultContent }) => (
        <View style={{ borderRadius: 16, overflow: 'hidden' }}>
          {defaultContent}
        </View>
      )}
    />

    Settings

    Member Visibility

    On This Page

    Key FeaturesAccessibility