Function addVideosGrid

Example

// Direct usage

await addVideosGrid({
  mainGridStreams: participants,
  altGridStreams: [],
  numtoadd: 4,
  numRows: 2,
  numCols: 2,
  actualRows: 2,
  lastrowcols: 2,
  removeAltGrid: false,
  parameters: { eventType: 'conference', ...allParams },
});
Copy

Example

// Override via uiOverrides (custom participant ordering)

const uiOverrides: MediasfuUICustomOverrides = {
  addVideosGrid: {
    wrap: (original) => async (options) => {
      // Sort streams by speaking activity before rendering
      const sortedMain = options.mainGridStreams.sort((a, b) =>
        (b.audioLevel ?? 0) - (a.audioLevel ?? 0)
      );
      await original({ ...options, mainGridStreams: sortedMain });
    },
  },
};
Copy

Example

import { addVideosGrid } from 'mediasfu-reactjs';

const options = {
  mainGridStreams: mainGridStreams,
  altGridStreams: altGridStreams,
  numtoadd: numtoadd,
  numRows: numRows,
  numCols: numCols,
  actualRows: actualRows,
  lastrowcols: lastrowcols,
  removeAltGrid: removeAltGrid,
  parameters: {
    eventType: eventType,
    updateAddAltGrid: updateAddAltGrid,
    ref_participants: ref_participants,
    islevel: islevel,
    videoAlreadyOn: videoAlreadyOn,
    localStreamVideo: localStreamVideo,
    keepBackground: keepBackground,
    virtualStream: virtualStream,
    forceFullDisplay: forceFullDisplay,
    otherGridStreams: otherGridStreams,
    updateOtherGridStreams: updateOtherGridStreams,
    updateMiniCardsGrid: updateMiniCardsGrid,
    getUpdatedAllParams: getUpdatedAllParams,
  },
};

addVideosGrid(options)
  .then(() => {
    console.log('Videos grid updated successfully');
  })
  .catch((error) => {
    console.error('Error updating videos grid:', error);
  });
Copy