MediaSFU React Native (Expo)
    Preparing search index...

    Function addVideosGrid

    • Function

      Adds participants to the main and alternate video grids based on the provided parameters.

      This function populates video grids with participant cards, supporting both custom render functions and component overrides for full UI customization. It uses a two-tier override system:

      1. Custom render functions (customVideoCard, customAudioCard, customMiniCard) - Full control via functions
      2. Component overrides (videoCardComponent, audioCardComponent, miniCardComponent) - Replace default components

      Parameters

      Returns Promise<void>

      A promise that resolves when the grid has been updated successfully.

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

      await addVideosGrid({
        mainGridStreams: mainGridStreams,
        altGridStreams: altGridStreams,
        numtoadd: 4,
        numRows: 2,
        numCols: 2,
        actualRows: 2,
        lastrowcols: 2,
        removeAltGrid: false,
        parameters: {
          eventType: 'conference',
          videoAlreadyOn: true,
          // ... other required parameters
        },
      });

      // Using custom render function for complete control
      import { addVideosGrid } from 'mediasfu-reactnative-expo';

      const CustomVideoCard = ({ participant, videoStream, showControls }) => (
        <View style={{ border: '2px solid blue' }}>
          <Text>{participant.name}</Text>
          {/* Your custom video rendering logic */}
        </View>
      );

      await addVideosGrid({
        mainGridStreams: streams,
        altGridStreams: [],
        numtoadd: 4,
        numRows: 2,
        numCols: 2,
        actualRows: 2,
        lastrowcols: 2,
        removeAltGrid: false,
        parameters: {
          customVideoCard: CustomVideoCard, // Custom render function
          eventType: 'conference',
          // ... other parameters
        },
      });

      // Using component override to replace default component
      import { addVideosGrid } from 'mediasfu-reactnative-expo';
      import { MyCustomVideoCard } from './MyCustomVideoCard';

      await addVideosGrid({
        mainGridStreams: streams,
        altGridStreams: [],
        numtoadd: 4,
        numRows: 2,
        numCols: 2,
        actualRows: 2,
        lastrowcols: 2,
        removeAltGrid: false,
        parameters: {
          videoCardComponent: MyCustomVideoCard, // Component override
          audioCardComponent: MyCustomAudioCard,
          miniCardComponent: MyCustomMiniCard,
          eventType: 'conference',
          // ... other parameters
        },
      });

    Settings

    Member Visibility