Scalability Guide for Large Participant Meetings

Overview

This guide explains how to optimize performance when hosting video meetings with 10+ participants by using two key features:

1. Player Component: Pauses off-screen video streams to reduce bandwidth usage
2. Adaptive Subscriptions: Intelligently prioritizes audio/video streams based on who's speaking

These features help solve common challenges in large meetings, such as excessive bandwidth consumption and poor quality for users with network constraints.

Note: These features are independent and can be used separately. You can implement Adaptive Subscriptions with your existing player setup if desired, or use the Player Component without Adaptive Subscriptions.

Common Challenges in Large Meetings

1. Excessive Bandwidth Consumption

Problem: All video streams remain active even when not visible on screen.

Impact:

• Higher data usage affecting users with limited bandwidth
• Decreased performance and call quality
• Unnecessary resource utilization

2. Ineffective Stream Prioritization

Problem: All streams receive equal treatment regardless of importance.

Impact:

• Users with limited bandwidth experience poor quality
• Audio quality suffers when competing with video for resources
• Important speakers may not be clearly heard or seen

Solution Features

Player Component

The Player Component intelligently manages video streams based on viewport visibility.

Key Benefits:

• Automatically detects which video streams are visible on screen
• Pauses streams for participants not currently in the viewport
• Significantly reduces bandwidth usage
• Adapts stream quality to container size when using maxQuality: "auto"

How It Works:
When a participant scrolls or changes their view, the system automatically pauses streams that aren't visible and resumes them when they come into view.

Visual Illustration:

Quality Adaptation Example:
If a participant's original video is 720p but your container size is 320x180, setting maxQuality: "auto" will make the player consume only a 320p stream instead of the full 720p, significantly reducing bandwidth usage.

Adaptive Subscriptions

This feature optimizes bandwidth by prioritizing active speakers and managing stream quality.

Key Benefits:

• Identifies and prioritizes dominant speakers
• Intelligently manages bandwidth constraints
• Ensures clear audio even under network limitations
• Gives highest priority to pinned participants

How It Works:
The system analyzes speaking patterns to detect active participants and adjusts stream priorities accordingly. For bandwidth-constrained users, it strategically pauses or lowers the quality of non-essential video streams. Pinned participants always receive the highest priority in stream allocation.

Visual Illustration:

If a user experiences bandwidth constraints, Adaptive Subscriptions will pause the video streams in the following priority order:

1. Muted Participants
2. Least Dominant Speakers
3. Dominant Speakers

If you want to achieve pin/unpin functionality, you can refer to this documentation

Implementation Guide

Prerequisites

• SDK Version: 0.1.6 or later

Enabling Adaptive Subscriptionss(BETA)

You can toggle this feature using these methods:

// Enable adaptive subscriptions
meeting.enableAdaptiveSubscriptions();

// Disable adaptive subscriptions
meeting.disableAdaptiveSubscriptions();

Recommended Implementation:

// Enable on meeting join
meeting.on("meeting-joined", () => {
  meeting.enableAdaptiveSubscriptions();
});

Stream Pause/Resume Events

When a video stream is paused or resumed, the system triggers events with specific reasons:

// Listen for video stream pause events
participant.on("stream-paused", ({ kind, reason }) => {
  // kind: video
  console.log(reason); // Possible values: "muted", "leastDominance"
});

// Listen for video stream resume events
participant.on("stream-resumed", ({ kind, reason }) => {
  // kind: video
  console.log(reason); // Possible values: "adaptiveSubscriptionsDisabled", "networkStable"
});

Pause Reasons:

• muted: Participant has turned off their audio
• leastDominance: Participant hasn't spoken much in the meeting

Resume Reasons:

• adaptiveSubscriptionsDisabled: Feature was disabled
• networkStable: Network conditions have improved

Developer Tip: When a stream is paused (e.g., due to network issues), always keep users in the loop by displaying a helpful UI indicator. For instance, render a message such as: "Paused: Waiting for stable connection..."

Rendering Video and Audio

Video Renderings(BETA)

meeting.on("participant-joined", (participant) => {
  // Render Video
  let videoElement = participant.renderVideo({
    type: "video", // Options: "video" or "share" for screen sharing
    maxQuality: "auto", // Options: "auto", "high", "med", "low"
    videoStyle: {}, // Custom styling for video element
    containerStyle: {
      // Custom styling for container
      width: "1280px",
      height: "720px",
    },
  });

  // Attach to DOM
  document.getElementById("video-container").appendChild(videoElement);
});

Important Notes on Quality Settings:

• When using maxQuality: "auto", the player automatically selects the optimal stream quality based on container dimensions
• If multiStream is set to false, the maxQuality: "auto" setting will not work
• When using maxQuality: "auto", you cannot use the participant.setQuality() method
• To manually control quality, use specific values: maxQuality: "high", maxQuality: "med", or maxQuality: "low"

Audio Renderings(BETA)

let audioElement = participant.renderAudio({
  type: "audio", // Options: "audio" or "shareAudio" for screen share audio
});
document.body.appendChild(audioElement);

Best Practices

• Enable adaptive subscriptions at the start of every meeting
• Design your UI to display indicators when a stream is paused
• Pin important participants to ensure they receive the highest streaming priority
• Consider implementing pagination for very large meetings to further reduce resource usage
• For maximum bandwidth efficiency:
  • Use container-appropriate sizes that match your layout needs
  • Enable multiStream for the auto-quality feature to work
  • Design your UI to show fewer high-quality streams rather than many low-quality ones