React Capability Catalog

This catalog describes mediasfu-reactjs@4.4.2, available on npm. The named React APIs belong to that package; device and live-room behavior still depend on your environment. Choose the matching package guide for Angular, Vue, mobile, or native applications.

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.

Before release, test your installed version in a real two-person room: both users should hear remote audio, see the intended video, recover after a brief disconnect, and leave cleanly.

More than a basic meeting

The package covers much more than create and join. Add one workflow at a time after the core room works, and test it with the roles and devices your application supports.

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

Each room shape gives you a starting layout; choose the one that fits your product, then test its controls with the people who will use them.

Participant and host workflows

User need	Public React surface	What to test in a live room
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

Show the action's result or error in the room. Opening a modal alone does not mean a participant was admitted, removed, or promoted.

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

Try each collaboration feature with a host and participant. Confirm both screens update, show errors clearly, and clean up after leave.

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 does not mean media is publishing.
• A local state update does not mean 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.