The options for adding videos to the grid.
Resolves when the grid update is complete.
// Direct usage
await addVideosGrid({
mainGridStreams: participants,
altGridStreams: [],
numtoadd: 4,
numRows: 2,
numCols: 2,
actualRows: 2,
lastrowcols: 2,
removeAltGrid: false,
parameters: { eventType: 'conference', ...allParams },
});
// 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 });
},
},
};
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);
});
Adds participants to the video grid layout with support for custom participant cards and override-aware rendering. This function is commonly overridden via
uiOverrides.addVideosGridto implement AI-driven layouts or custom ordering logic.