Run Large Rooms, Panelists, Permissions, and Breakouts by SDK

Scale a room without rendering every camera at once, and moderate it without confusing panelists, co-host responsibilities, participant permissions, and room-wide policy. Choose your SDK for the available controls and examples.

The large-room model

Use four separate pieces of state:

1. Participants: everyone currently known to the room.
2. Display page: the people or shared content visible now.
3. Consumer state: which remote tracks are active, paused, or awaiting a resume acknowledgement. A consumer is the receiving side of one remote track; the participant who sends it owns the matching producer.
4. Authority: who may publish, moderate, change room policy, or manage breakouts.

Pagination is not just visual slicing. After a page changes, the active display names and consumer state must move together. A hidden tile must not keep an expensive video route active indefinitely, and a newly visible tile must not be shown as live until its consumer resumes.

autoAdjust in the TypeScript and Kotlin-family cores returns a 12-column layout split based on room shape, participant count, screen share, and board state. It does not choose a page, enforce a server limit, or confirm that a consumer resumed.

Roles and permissions are different

• Host/co-host responsibility decides who may perform named host work.
• Panelist membership decides who is promoted into the active speaker or presentation set; panelist focus controls the emphasized set.
• Participant permission changes a named capability for one person.
• Room permission configuration changes the default or room-wide policy.
• Remove disconnects a person. Ban also prevents the same stable room identity from returning. A ban is only durable when identity is stable.

Confirm every authority change from the next room update. Hiding a control is not server authorization.

Breakout lifecycle

Treat breakouts as a state machine: prepare assignments, start, observe the confirmed destinations, update assignments only through the active breakout, and stop before clearing drafts. After reconnection, load current breakout state; never start another breakout because the previous response was lost.

ReactJS 4.4.2

ModernMediasfuGeneric owns pagination, visible stream names, and consumer updates. For a custom renderer, use Pagination, FlexibleGrid, AudioGrid, autoAdjust, resumePauseStreams, and resumePauseAudioStreams only with the complete live room parameters.

import {autoAdjust} from 'mediasfu-reactjs';

export async function chooseConferenceColumns(participantCount: number) {
  const [mainColumns, sideColumns] = await autoAdjust({
    n: participantCount,
    eventType: 'conference',
    shareScreenStarted: false,
    shared: false,
    whiteboardStarted: false,
    whiteboardEnded: false,
  });
  return {mainColumns, sideColumns};
}

Use the supplied modern participant, co-host, panelist, permission, and breakout workspaces. The React package root does not export standalone panelist or permission actions, so don't deep-import them to rebuild the moderator workspace.

Continue with React participant workspaces and React collaboration controls.

Angular 2.5.0

Angular publishes Pagination, FlexibleGrid, ResumePauseStreams, and the room display services. It also publishes PanelistsModalComponent, PermissionsModalComponent, AddPanelist, RemovePanelist, FocusPanelists, UpdateParticipantPermission, BulkUpdateParticipantPermissions, UpdatePermissionConfig, and LaunchBreakoutRooms.

Use dependency injection with the active room parameters. Keep participant and room-wide permission changes separate in labels and confirmation messages.

This moderator facade makes that distinction explicit. The first action changes one participant's level; the second updates the room-wide capability policy:

import {Injectable} from '@angular/core';
import {
  UpdateParticipantPermission,
  UpdatePermissionConfig,
  type UpdateParticipantPermissionOptions,
  type UpdatePermissionConfigOptions,
} from 'mediasfu-angular';

@Injectable({providedIn: 'root'})
export class RoomModerator {
  constructor(
    private readonly participantPermission: UpdateParticipantPermission,
    private readonly roomPermissions: UpdatePermissionConfig,
  ) {}

  setParticipantLevel(
    request: UpdateParticipantPermissionOptions,
  ): Promise<void> {
    return this.participantPermission.updateParticipantPermission(request);
  }

  setRoomPolicy(request: UpdatePermissionConfigOptions): Promise<void> {
    return this.roomPermissions.updatePermissionConfig(request);
  }
}

See Angular participants and collaboration.

Vue 1.3.0

Vue's supplied room owns paging and active consumer state. The package root exports Pagination, FlexibleGrid, and AudioGrid for layout, but not autoAdjust or resumePauseStreams, so let the supplied room keep visible tiles and consumers in step.

For moderation, Vue exports launchPanelists, addPanelist, removePanelist, focusPanelists, unfocusPanelists, launchPermissions, updateParticipantPermission, and updatePermissionConfig. Call them with the complete current room parameters, and keep one-person permission changes and room-wide policy separate in your labels.

See Vue participants and collaboration.

React Native 2.5.0

React Native exports Pagination, ModernPagination, autoAdjust, and resumePauseStreams. For moderation it exports ModernPanelistsModal, ModernPermissionsModal, addPanelist, removePanelist, focusPanelists, updateParticipantPermission, and updatePermissionConfig, plus the breakout workspace.

Run pagination and consumer changes through the mounted room. Test long lists, fast page changes, app backgrounding, and resumed remote video on physical devices. Do not treat a scrolled-off native view as a paused consumer.

See React Native participants and collaboration.

Expo 2.6.0

Expo exposes the same pagination, consumer, panelist, permission, and breakout surfaces as React Native, and adds bulkUpdateParticipantPermissions for changing several participants at once. Use Expo's current room parameters; do not reuse a React Native options object or assume native and web view lifecycles are identical.

Test the same large-room page change on Android, iOS, and web, including a screen share and an active breakout.

See Expo participants and collaboration.

Flutter 2.4.1

Use MediasfuGeneric and its supplied Pagination for the first large-room release. The room coordinates visible participants and consumer changes. The package does not export standalone panelist or permission actions, so use the supplied panelist and permission workspaces.

Use BreakoutRoomsModal to prepare, start, update, and stop breakouts. Confirm destinations from room state before navigating a participant.

See Flutter participants and collaboration.

Android 1.0.8

Use the Android Compose room's pagination and current state. The Android package includes the same room-core layout, consumer, panelist, permission, and breakout state as the Kotlin Multiplatform release; Android lifecycle and media routing remain platform-specific.

Do not keep an off-page Android renderer attached merely because its participant still exists. Check consumer and renderer cleanup during page changes, rotation, backgrounding, breakout movement, and final exit.

Kotlin Multiplatform 1.0.8

Kotlin supplies Pagination, MediaSfuEngine.autoAdjustLayout, MediaSfuEngine.resumePauseStreams, and Compose room state. It also supplies waiting/request responses, co-host responsibilities, panelist actions, participant permission updates, room permission configuration, and breakout UI.

import com.mediasfu.sdk.MediaSfuEngine
import com.mediasfu.sdk.model.EventType

suspend fun chooseLayout(engine: MediaSfuEngine, participantCount: Int) =
    engine.autoAdjustLayout(
        n = participantCount,
        eventType = EventType.CONFERENCE,
        shareScreenStarted = false,
        shared = false,
    )

autoAdjustLayout returns a Result<List<Int>> with the column split. It does not acknowledge consumers, so observe resumed media and the confirmed breakout state separately.

See Kotlin participants and collaboration.

Swift and Apple platforms 0.1.3

The hosted Apple room owns large-room rendering, page state, and supplied moderation panels. The Swift bridge opens the hosted workspaces; it does not include a standalone Swift pagination engine, panelist editor, permission editor, or breakout assignment model for an app-owned renderer.

Keep an app-owned toolbar synchronized with the hosted controller and test large rooms, interruptions, rotation, and background restore on real Apple devices.

Unity 0.1.0-preview.2

Unity is application-rendered. Use CurrentRoom.Participants as the source list, page that list in the scene, and explicitly pause or resume consumers outside the visible page with PauseConsumerAsync and ResumeConsumerAsync.

foreach (var consumerId in consumerIdsLeavingTheVisiblePage)
    await client.PauseConsumerAsync(consumerId);

foreach (var consumerId in consumerIdsEnteringTheVisiblePage)
    await client.ResumeConsumerAsync(consumerId);

A host can run breakouts with StartOrUpdateBreakoutRoomsAsync and StopBreakoutRoomsAsync, and assign co-host responsibilities with UpdateCoHostAsync. Starting a breakout fails while a screen share is active. Unity has no panelist or room-permission operations, so leave those controls out of the scene.

Shared core 1.3.1

Shared core exports autoAdjust, resumePauseStreams, resumePauseAudioStreams, breakout start/stop helpers, panelist actions, updateParticipantPermission, bulkUpdateParticipantPermissions, and updatePermissionConfig. It renders none of them.

Your framework must keep page state, active display names, renderer lifecycle, consumer acknowledgement, authority, and error recovery synchronized. Use room-wide permission configuration only for product policy intended to affect the room; use participant permission updates for one person.

See Shared-core participants and collaboration.

Release checklist

• Test with more participants than one page can display.
• Page changes update both visible renderers and active consumers.
• Rapid next/previous actions cannot leave stale videos playing.
• Screen share, host video, and active speakers remain visible according to the product's layout policy.
• Host, co-host, panelist, and ordinary participant see different controls.
• One-person permissions and room-wide defaults are tested separately.
• Remove and ban labels match their actual effect and identity model.
• Breakout start, update, reconnect, movement, and stop are tested with participants in every destination.
• Leaving or ending the room releases off-page consumers and renderers.