MediaSFU React Native
    Preparing search index...

    Variable CardVideoDisplayConst

    CardVideoDisplay: React.FC<CardVideoDisplayOptions> = ...

    CardVideoDisplay is a lightweight wrapper around RTCView that respects platform-specific rendering differences while exposing override hooks for advanced layouts.

    • Mirrors video automatically when requested (self-view scenarios)
    • Matches Expo web behaviour by configuring objectFit/transform for browsers
    • Supports render overrides to integrate with animation or custom frames
    • Platform-specific optimizations for iOS, Android, and web
    • RTCView provides native video accessibility
    • Consumers should add descriptive labels to the container
    // Basic remote video display
    <CardVideoDisplay
      videoStream={remoteStream}
      remoteProducerId="producer-123"
      eventType="conference"
      forceFullDisplay
      backgroundColor="#000"
    />

    // Mirrored self-view with custom container
    <CardVideoDisplay
      videoStream={localStream}
      remoteProducerId="local"
      eventType="broadcast"
      forceFullDisplay
      doMirror
      renderContainer={({ defaultContainer, dimensions }) => (
        <Animated.View
          style={{
            transform: [{ scale: scaleAnim }],
            borderRadius: 12,
            overflow: 'hidden',
          }}
        >
          {defaultContainer}
        </Animated.View>
      )}
    />

    Settings

    Member Visibility

    On This Page

    Key FeaturesAccessibility