mediasfu-reactjs
v4.2.4ReactJS
React web apps that need the richest documented MediaSFU UI and headless surface.
npm i mediasfu-reactjsQuick Usage
One map for MediaSFU integration decisions.
Use this page when you need the fastest route from product idea to the right MediaSFU surface: no-code dashboard guide, developer console guide, framework SDK, generated API reference, or React visual preview.
Recommended order
- Pick the SDK that matches your app shell and deployment target.
- Create rooms through a backend path so secrets never enter the client bundle.
- Launch once with the prebuilt room UI to validate media, permissions, and account configuration.
- Choose the lightest UI ownership model that gives the product the control it needs.
- Use generated API docs only after you know which package surface or helper you are integrating.
Documentation map
Pick the right public surface.
The old routes still point somewhere useful, but each surface now has a clearer job. Open docs and Storybook in a new tab when you want to keep your place in the main MediaSFU site.
SDK setup and usageUnified Docs PortalThe canonical public guide for SDK selection, quickstart flow, usage modes, starter screens, and generated API links.Open Framework pathsSDK GuidesReactJS, Angular, React Native, Expo, Vue, Flutter, Kotlin, and shared-core package guides in one place.Open Signatures and typesGenerated API DocsPackage-level TypeDoc, Dartdoc, and Dokka/KDoc output for exact classes, helpers, and symbols.Open Dashboard API featuresDeveloper Console GuideRooms, domains, recordings, sub-users, AI credentials, SIP configs, widgets, translation, and disposable keys.Open No-code operationsDashboard User GuideVisual dashboard walkthroughs for operators who configure rooms and account settings without SDK code.Open React visual companionStorybook AppInspect React UI surfaces, override points, and component states before applying changes in your app.Open
Build path
Full UI-mode guide Choose how much of MediaSFU should be visible.
Selected path
Fastest working room
Use a framework SDK and let MediaSFU render the room while you validate credentials, permissions, and room flow.
SDK matrix
Compare all SDKs Recommended SDKs for this path.
Package names and versions are aligned with the current SDK workspaces. Use each package guide for setup flow, then use generated API docs for exact signatures.
mediasfu-angular
v2.2.2Angular
Angular apps that prefer DI-friendly wrappers and shared-backed room behavior.
npm i mediasfu-angularmediasfu-reactnative
v2.3.5React Native
Bare React Native apps that need native mobile media, room UI, and device permissions.
npm i mediasfu-reactnativemediasfu-reactnative-expo
v2.4.0React Native Expo
Expo-managed mobile apps that want MediaSFU room flows inside an Expo app shell.
npm i mediasfu-reactnative-expomediasfu-vue
v1.0.1Vue
Vue 3 applications that want composition-friendly SDK setup and UI control.
npm i mediasfu-vuemediasfu_sdk
v2.2.5Flutter
Flutter apps across mobile, web, and desktop from one Dart codebase.
flutter pub add mediasfu_sdkcom.mediasfu:mediasfu-sdk-android
v1.0.1Kotlin
Native Android and Kotlin Multiplatform apps with Compose-first MediaSFU surfaces.
implementation("com.mediasfu:mediasfu-sdk-android:1.0.1")Implementation playbooks
Use these guides instead of guessing from snippets.
The snippets below are orientation only. The linked docs pages are the canonical place for setup details, security boundaries, and framework-specific usage.
Secure the backend boundary firstKeep MediaSFU Cloud credentials on your backend, issue scoped room/session data to clients, and avoid shipping API keys in frontend bundles.Choose your UI ownership levelDecide between prebuilt UI, UI overrides, custom components, or full headless mode before writing large amounts of app code.Start from a product-shaped screenUse the WhatsApp-style, Twitch-style, TikTok Live-style, and support console starters as visual targets for real products.Understand capture, produce, consume, renderOnce the room connects, use the lifecycle guide to reason about media state, custom rendering, helper calls, and advanced flows.Use exact signatures only when neededStay in the curated SDK guide for setup. Jump into generated API docs only for exact classes, methods, props, and types.Configure dashboard and platform featuresUse the developer console guide for dashboard-driven platform features like rooms, domains, recordings, SIP, widgets, and keys.
Copy-ready starters
Generated API docs Small snippets, clear boundaries.
These examples show shape and intent. Keep production credential handling on your backend and move to the SDK page once you choose a framework.
ts
Backend boundary shape
// Keep MediaSFU credentials on the server.
app.post('/api/rooms/create', async (request, response) => {
const room = await createRoomForClient({
apiUserName: process.env.MEDIASFU_API_USERNAME,
apiKey: process.env.MEDIASFU_API_KEY,
roomName: request.body.roomName,
mode: request.body.mode,
});
response.json(room);
});tsx
React prebuilt room mount
import { MediasfuGeneric } from 'mediasfu-reactjs';
import 'mediasfu-reactjs/dist/main.css';
export function Room({ roomCredentials }) {
return (
<MediasfuGeneric
options={{ credentials: roomCredentials }}
/>
);
}bash
Native package installs
flutter pub add mediasfu_sdk
# Android-only Kotlin projects
implementation("com.mediasfu:mediasfu-sdk-android:1.0.1")
# Kotlin Multiplatform projects
implementation("com.mediasfu:mediasfu-sdk:1.0.1")Choose by audience
Open documentation mapStart from the guide that matches the job.
Use /user-guide for dashboard walkthroughs, /documentation for dashboard and API feature configuration, /docs/ for SDK implementation, /docs/api/ for generated symbols, and /storybook/ for React UI inspection.