MediaSFU React Native
    Preparing search index...

    Variable MediasfuConferenceConst

    MediasfuConference: React.FC<MediasfuConferenceOptions> = ...

    MediasfuConference component provides a full-featured video conferencing solution optimized for collaborative meetings with equal-sized participant tiles and interactive features.

    • Balanced Grid Layout: All participants displayed in equal-sized tiles
    • Interactive Collaboration: Screen sharing, breakout rooms, polls, chat
    • Host Controls: Waiting room, participant management, recording controls
    • Adaptive Quality: Automatic video quality adjustment based on network
    • Cloud Recording: Record entire conference with custom layouts
    • Customizable UI: Override components and card renderers
    • Equal participant grid (no dominant speaker view by default)
    • Dynamic pagination for large meetings
    • Side-by-side screen share view
    • Optional mini audio indicators

    Automatically sets eventType: 'conference' for balanced collaboration mode.

    Component properties

    MediaSFU Conference component

    // Basic conference with MediaSFU Cloud
    import { MediasfuConference } from 'mediasfu-reactnative';

    function App() {
      return (
        <MediasfuConference
          credentials={{
            apiUserName: 'your-api-username',
            apiKey: 'your-api-key'
          }}
        />
      );
    }

    // Conference with custom prejoin and waiting room
    import { MediasfuConference } from 'mediasfu-reactnative';
    import { CustomPrejoin } from './CustomPrejoin';

    function App() {
      return (
        <MediasfuConference
          PrejoinPage={CustomPrejoin}
          credentials={{
            apiUserName: 'your-api-username',
            apiKey: 'your-api-key'
          }}
          imgSrc="https://example.com/brand-logo.png"
        />
      );
    }

    // Conference with custom video cards and UI overrides
    import { MediasfuConference } from 'mediasfu-reactnative';
    import { BrandedVideoCard } from './BrandedVideoCard';
    import { CustomControlButtons } from './CustomControls';

    function App() {
      return (
        <MediasfuConference
          credentials={{
            apiUserName: 'your-api-username',
            apiKey: 'your-api-key'
          }}
          customVideoCard={(props) => (
            <BrandedVideoCard {...props} showQualityIndicator />
          )}
          uiOverrides={{
            controlButtons: CustomControlButtons,
            mainGrid: CustomMainGrid
          }}
          containerStyle={{
            backgroundColor: '#1e1e1e'
          }}
        />
      );
    }

    Settings

    Member Visibility

    On This Page

    Key FeaturesLayout CharacteristicsEvent Type