Function prepopulateUserMedia

  • prepopulateUserMedia(options): Promise<JSX.Element[] | void>

  • Populates the main screen grid with participant video/audio cards based on current streams and settings.

    This function is responsible for rendering the main user media grid, supporting both custom render functions and component overrides for comprehensive UI customization. It implements a two-tier override system:

    1. Custom render functions (customVideoCard, customAudioCard, customMiniCard) - Full rendering control
    2. Component overrides (videoCardComponent, audioCardComponent, miniCardComponent) - Component replacement

    The function intelligently determines which type of card to display (video, audio, or mini) based on participant media state and event configuration, then uses helper functions to properly invoke custom render functions or render component overrides.

    Parameters

    Returns Promise<JSX.Element[] | void>

    Array of React elements representing participant cards, or void.

    Function

    Async

    Example

    const customVideoCard = ({ participant, videoStream, showControls }) => (
        <View><Text>{participant.name}</Text></View>
      );

    Example

    const customAudioCard = ({ participant, showWaveform }) => (
        <View><Text>🎤 {participant.name}</Text></View>
      );

    Example

    const customMiniCard = ({ participant }) => (
        <View style={{ width: 50, height: 50 }}><Text>{participant.name[0]}</Text></View>
      );

    Example

    import { MyCustomVideoCard } from './components/MyCustomVideoCard';
      // Pass: videoCardComponent: MyCustomVideoCard

    Throws

    Throws error if there's an issue processing streams or rendering components.

    Example

    // Basic usage without customization
    import { prepopulateUserMedia } from 'mediasfu-reactnative-expo';

    const components = await prepopulateUserMedia({
      name: 'mainGrid',
      parameters: {
        participants: allParticipants,
        allVideoStreams: videoStreams,
        eventType: 'conference',
        islevel: '2',
        member: 'John Doe',
        // ... other required parameters
      },
    });

    Example

    // Using custom render functions for full control
    import { prepopulateUserMedia } from 'mediasfu-reactnative-expo';

    const CustomVideo = ({ participant, videoStream }) => (
      <View style={{ borderWidth: 3, borderColor: 'gold' }}>
        <Text style={{ fontSize: 20 }}>{participant.name}</Text>
        {/* Custom video rendering */}
      </View>
    );

    const components = await prepopulateUserMedia({
      name: 'mainGrid',
      parameters: {
        participants: allParticipants,
        customVideoCard: CustomVideo,
        customAudioCard: CustomAudio,
        customMiniCard: CustomMini,
        eventType: 'conference',
        // ... other parameters
      },
    });

    Example

    // Using component overrides to replace defaults
    import { prepopulateUserMedia } from 'mediasfu-reactnative-expo';
    import { MyVideoCard, MyAudioCard, MyMiniCard } from './custom-components';

    const components = await prepopulateUserMedia({
      name: 'mainGrid',
      parameters: {
        participants: allParticipants,
        videoCardComponent: MyVideoCard,
        audioCardComponent: MyAudioCard,
        miniCardComponent: MyMiniCard,
        eventType: 'webinar',
        // ... other parameters
      },
    });

    Example

    remoteScreenStream: [],
        oldAllStreams: [],
        newLimitedStreams: [],
        sleep: sleepFunction,
        getUpdatedAllParams: () => parameters,
      },
    });

Settings

Member Visibility