Quick 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.

Start with docs Open console guide

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.

10SDK paths

Web + nativeDeployment targets

Prebuilt to headlessUI ownership

Cloud or OpenBackend choice

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 GuidesTen maintained paths across React, Angular, Vue, React Native, Expo, Flutter, Kotlin, Swift, Unity, and shared TypeScript.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 with an AI coding agentMCP Integration ToolkitUse the free read-only MCP for docs and SDK guidance, or add a scoped disposable-key endpoint for confirmed room-lifecycle, event-settings, and SIP actions.Open

Build path

Choose how much of MediaSFU should be visible.

Full UI-mode guide

Selected path

Fastest working room

Use a framework SDK and let MediaSFU render the room while you validate credentials, permissions, and room flow.

docs/usage/quickstart docs/sdks documentation#rooms

SDK matrix

All SDKs, with the best matches first.

All ten SDK paths remain visible as you compare build modes. Recommended matches are sorted first; install commands resolve the current registry release where supported, while native guides provide pinned baselines.

Compare all SDKs

mediasfu-reactjs

ReactJS

npm

WebReact

Best match for selected path

React web apps that need the richest documented MediaSFU UI and headless surface.

npm i mediasfu-reactjs

SDK guide API docs

mediasfu-angular

Angular

npm

WebAngular

Best match for selected path

Angular apps that prefer DI-friendly wrappers and shared-backed room behavior.

npm i mediasfu-angular

SDK guide API docs

mediasfu-reactnative

React Native

npm

iOSAndroid

Best match for selected path

Bare React Native apps that need native mobile media, room UI, and device permissions.

npm i mediasfu-reactnative

SDK guide API docs

mediasfu-reactnative-expo

React Native Expo

npm / Expo

iOSAndroidExpo

Best match for selected path

Expo-managed mobile apps that want MediaSFU room flows inside an Expo app shell.

npm i mediasfu-reactnative-expo

SDK guide API docs

mediasfu-vue

Vue

npm

WebVue 3

Best match for selected path

Vue 3 applications that want composition-friendly SDK setup and UI control.

npm i mediasfu-vue

SDK guide API docs

mediasfu_sdk

Flutter

pub.dev

MobileWebDesktop

Best match for selected path

Flutter apps across mobile, web, and desktop from one Dart codebase.

flutter pub add mediasfu_sdk

SDK guide API docs

com.mediasfu:mediasfu-sdk-android

Kotlin

Maven

AndroidKMP

Best match for selected path

Native Android and Kotlin Multiplatform apps with Compose-first MediaSFU surfaces.

implementation("com.mediasfu:mediasfu-sdk-android:1.0.1")

SDK guide API docs

mediasfu-apple-sdk

Swift / Apple

Swift Package Manager

iOSiPadOSmacOS

Also supported

Native Apple apps that need Swift-first room, media, and device control across supported Apple platforms.

https://github.com/MediaSFU/mediasfu-apple-sdk.git

SDK guide

mediasfu-unity-sdk

Unity

Unity Package Manager

UnityC#WebRTC

Also supported

Unity experiences that need real-time voice, video, and room state inside a game or immersive application.

https://github.com/MediaSFU/mediasfu-unity-sdk.git

SDK guide

mediasfu-shared

Shared Core

npm

TypeScriptHeadless

Also supported

Framework-agnostic TypeScript logic when you own the full UI and orchestration layer.

npm i mediasfu-shared socket.io-client mediasoup-client

SDK guide API docs

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

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.

Generated API docs

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 }}
    />
  );
}

text

Native and immersive package sources

# Flutter
flutter pub add mediasfu_sdk

# Swift Package Manager
https://github.com/MediaSFU/mediasfu-apple-sdk.git

# Unity Package Manager: Add package from Git URL
https://github.com/MediaSFU/mediasfu-unity-sdk.git

# Kotlin / Android
implementation("com.mediasfu:mediasfu-sdk-android:1.0.1")

# Kotlin Multiplatform
implementation("com.mediasfu:mediasfu-sdk:1.0.1")

Choose by audience

Start from the guide that matches the job.

Use the dashboard guide for no-code operations, the developer console guide for API features, SDK guides for framework setup, generated references for exact symbols, and Storybook for React UI inspection.

Open documentation map