React Capability Catalog

This catalog describes the current local React source mediasfu-reactjs@4.3.0. The last known published/npm baseline is mediasfu-reactjs@4.2.9; publication of 4.3.0 is not verified. Install the published 4.2.9 baseline until the 4.3.0 package is released. Source-level names below are bound to the 4.3.0 source, while the companion validation evidence remains explicitly scoped to the older 4.2.9 build. This is not a cross-SDK feature comparison or a promise that another platform uses the same names, UI, or lifecycle.

Start with the reference room

Use ModernMediasfuGeneric with backend-backed createMediaSFURoom and joinMediaSFURoom adapters for the first secure, prebuilt room path. The backend owns credentials and policy; the client supplies user intent and renders the room.

Open the complete guide: Build a complete React room.

Core room operations

What you want to do	React public surface	What success should mean
Create a room securely	ModernMediasfuGeneric, CreateRoomOnMediaSFUType, createMediaSFURoom	Your backend accepts a policy-approved request and the room proceeds toward connection.
Join a room	ModernMediasfuGeneric, JoinRoomOnMediaSFUType, joinMediaSFURoom	The participant receives an allowed room result and proceeds toward connection.
Show participants	ParticipantsModal, Participant, live participants state	The displayed list reflects current room state.
Prepare camera and microphone	createDeviceClient and prebuilt room controls	Permission and device readiness are visible before treating media as produced.
Publish microphone or camera	clickAudio, clickVideo	A local producer is created and the intended state changes.
Receive participant media	processConsumerTransports and the prebuilt renderer	A remote consumer is connected and rendered subject to browser policy.
Start or stop screen sharing	clickScreenShare	Display capture and its screen producer start; stopping reverses both.
Leave as a participant	launchConfirmExit, ModernConfirmExitModal, confirmExit	The participant confirms exit and the room closes locally.
End for everyone as host	launchConfirmExit, ModernConfirmExitModal, confirmExit	A host-level user confirms the semantic end flow for the room.

The companion example's recorded production-bundle and room-observation evidence targets ReactJS 4.2.9; it is not proof of a current 4.3.0 build or runtime. Run the two-user browser test against the intended package release before shipping 4.3.0.

More than a basic meeting

The local ReactJS 4.3.0 source includes substantially more than create and join. Add one workflow at a time after the core room works; do not treat this source inventory as proof that 4.3.0 has been published or runtime-validated.

Choose a supplied room shape

Product shape	Public React surface	Good for
General room with the current modern UI	ModernMediasfuGeneric	The recommended first room and new React products
General classic room	MediasfuGeneric	Existing integrations that use the classic surface
Conference or interactive class	MediasfuConference	Meetings, classes, and workshops
Host-led webinar	MediasfuWebinar	Presenter-led sessions
Broadcast-style room	MediasfuBroadcast	Host-to-audience layouts
Chat-centered room	MediasfuChat	Conversation-first experiences

These exports establish available React room surfaces. They do not prove that every workflow inside every shape has been exercised in a current browser run.

Participant and host workflows

User need	Public React surface	What still needs proof
Open the participant workspace	launchParticipants, ParticipantsModal	Role-specific actions and participant churn in a live room
Open waiting-room controls	launchWaiting, WaitingRoomModal	Admission, rejection, reconnect, and role enforcement
Open participant requests	launchRequests, RequestsModal	Request creation, response, and failure recovery
Open co-host controls	launchCoHost, CoHostModal	Authority changes and their effect on every participant
Open room messages	launchMessages, MessagesModal	Send, receive, ordering, reconnect, and moderation behavior

The shipped modal and launch symbols are public. A visible modal is not by itself proof that a server-authoritative action completed.

Interactive collaboration

User need	Public React surface	Test first
Create, vote in, and end a poll	launchPoll, PollModal, handleCreatePoll, handleVotePoll, handleEndPoll	Host authority, two-user updates, and reconnect
Open breakout-room controls	launchBreakoutRooms, BreakoutRoomsModal	Assignment, movement, return, and host stop
Configure and render a whiteboard	launchConfigureWhiteboard, ConfigureWhiteboardModal, Whiteboard	Two-user sync, capture stop, and reconnect
Present media in reusable layouts	VideoCard, AudioCard, MiniCard, Pagination, FlexibleGrid	Real tracks, resize, keyboard access, and cleanup

The next useful examples should prove one collaboration feature at a time with two roles, observable remote state, error handling, and cleanup. They should not combine several untested controls into a dashboard mock.

Recording and captured output

The React package exposes launchRecording, RecordingModal, startRecording, confirmRecording, updateRecording, and stopRecording. Before shipping recording, define consent, storage, retrieval, retention, failure recovery, and cleanup with your backend team.

Own more of the interface

The public types expose MediasfuUICustomOverrides, customComponent, returnUI, sourceParameters, and updateSourceParameters. These form a useful control ladder:

1. Keep the supplied room.
2. Replace selected presentation surfaces with MediasfuUICustomOverrides.
3. Replace the workspace through customComponent.
4. Set returnUI to false and drive an app-owned shell from the latest sourceParameters handoff.

Use the supplied room first. Each step down the ladder makes your application responsible for more rendering, accessibility, recovery, and lifecycle behavior.

Features that need another MediaSFU or application contract

Area	What to establish before you build
Panelist and per-participant permission actions	Use the supplied room workflow; this catalog does not define standalone authority-safe React actions for these controls.
Live subtitles and translation	Use a guide that defines language selection, consent, remote results, fallback, and cleanup; those operations are not covered here.
HLS or other external media ingress/egress	Plan this as a backend or adapter integration; this catalog does not define a React operation for it.
AI agents, SIP/PSTN, CRM widgets, and escalation	Use their separate product or integration guides; they are not part of this React SDK catalog.

Treat these as separate integrations until you can name the public API, authority boundary, observable result, failure behavior, and cleanup.

Release checklist

Test each operation in the devices and browsers you support. Include permission denial, missing devices, autoplay restrictions, screen-share cancellation, network interruption, participant leave, host end, and server-side cleanup.

Choose the smallest useful integration

Goal	Recommended React path
Keep a room experience and make it secure	ModernMediasfuGeneric plus backend adapters
Change cards, controls, or selected modals	UI overrides
Replace a major room workspace	Custom component replacement
Own the entire visible application shell	Headless mode

Use the supplied UI before rebuilding controls. When you do own a control, preserve the full operation: authority, permission handling, observable success, error recovery, and cleanup.

Boundaries to keep explicit

• A React adapter is not a place for long-lived API credentials. Keep those on your backend.
• A browser permission prompt is not proof that media is publishing.
• A local state update is not proof that another participant can receive or render media.
• Closing a tab is not the same as a participant leave or host end operation.
• This catalog does not establish parity with Angular, React Native, Expo, Vue, Flutter, Kotlin, Swift, Unity, or shared core.

For operation details, source-linked examples, error handling, and cleanup, use React room lifecycle operations.

Feature workspaces

After the core room path works, add one user workflow at a time:

• Participant workspaces
• Poll, breakout, and whiteboard controls
• Recording control boundary
• React UI ownership ladder

Opening a supplied control is not the same as completing its live multi-user outcome. Test the complete workflow in your room configuration before release.