Build with MediaSFU ReactJS

Essential next steps

• API and reference documentation
• Choose standard, hybrid, or fully headless UI
• Headless and hybrid implementation
• Starter projects and showcases
• Framework examples and recipes
• Current release and migration notes
• Troubleshooting and recovery

Use mediasfu-reactjs@4.3.7 for React web applications ranging from a complete room to an application-owned call interface.

You can begin locally with restricted development credentials. Before sharing or releasing the app, move reusable Cloud credentials behind the production credential boundary.

npm install mediasfu-reactjs@4.3.7

Choose your task

Task	Guide and working example
Secure create, join, participants, media, screen share, leave, and host end	Complete React room
Understand produce, consume, and render	Media rendering step by step
Render all remote audio with AudioGrid	Build a room workspace
Render participant video with FlexibleGrid and pagination	Build a room workspace
Retrieve one participant's audio or video stream	Custom UI responsibilities
Waiting room, requests, roles, permissions, and moderation	Participant workspaces
Chat, polls, breakouts, and whiteboard	Collaboration controls
Recording controls and recording-in-progress state	Recording control
Device changes, disconnects, and reconnect recovery	Reconnect and recovery
Replace selected UI or the entire room	React UI ownership
Audit everything a custom UI must reproduce	Custom UI responsibilities
Look up an exact export or type	React API reference

Copy/paste starter

import { ModernMediasfuGeneric } from 'mediasfu-reactjs';
import { createRoomViaBackend, joinRoomViaBackend } from './secure-room-adapters';

export function Meeting() {
  return (
    <ModernMediasfuGeneric
      connectMediaSFU
      createMediaSFURoom={createRoomViaBackend}
      joinMediaSFURoom={joinRoomViaBackend}
    />
  );
}

The linked room guide includes the complete backend adapters. Keep reusable MediaSFU credentials on your backend.

Choose how much UI you own

1. Keep the complete room for the first successful call.
2. Use uiOverrides for selected cards, grids, dialogs, and controls.
3. Use customComponent when your application owns the room workspace.
4. Use returnUI={false} only when your application will render every required surface, including remote audio, alerts, permissions, and exit behavior.

sourceParameters contains live room state and many media helpers. It is not a promise that every package action is present there. Import public actions such as messaging or exit controls from mediasfu-reactjs when the helper is not in the runtime bundle.

Before release

Run the supplied room and the custom room with two users. Verify actual remote audio/video, browser permission denial and retry, pagination, paused streams, screen-share stop, participant leave, host end, reconnect, and a second call after teardown.