Handle Large Rooms - React Native

Managing large rooms requires specific strategies to keep performance and stability. This section provides best practices for optimizing VideoSDK applications to handle high participant volumes effectively.

User Interface Optimization

• Limit Visible Participants: Show only the most relevant participants at a time (for example, active speakers). Use pagination or tabs to browse through the rest.
• Switch Between Layouts: Offer multiple layouts such as grid, stage, or spotlight so users can adapt the experience to their viewing preference. [Documentation]
• Prioritize Active Speakers: Use the onSpeakerChanged event to highlight who is talking.

Optimizing Media Streams

• Pause Streams for Off-Screen Participants: Pause the video tracks of participants that are not currently visible in the UI to conserve bandwidth and memory.
• Resume Streams When Visible: Resume those tracks when participants come back into view. See the grid with pagination example for reference.

Media Stream Quality Adjustment

• High Quality for Active Speakers: Increase quality for the active speakers using setQuality("high") so viewers get the sharpest feed.
• Lower Quality for Others: Reduce quality for participants who are not on stage (for example setQuality("low")) to save bandwidth while still keeping them visible.

note

setQuality() chooses between the layers a participant's camera publishes, so it has no effect on a camera that publishes a single layer. The camera that VideoSDK opens for a host publishes several layers, because multiStream in the config of the host's RoomProvider defaults to true. It publishes a single layer if the host sets multiStream: false. Refer to the Simulcast (Adaptive Bitrate) guide for details.