Usage Paths
Choose the fastest path into MediaSFU based on how much UI you want to keep, replace, or remove.
Start with one of these paths
- Quickstart — fastest route into a working framework integration.
- Beginner paths — the practical first route for choosing an SDK, securing credentials, and picking the right product-shaped starting point.
- Secure backend proxy — production-safe create/join flow without frontend-held credentials.
- Choose your UI mode — decide between
returnUI={true},returnUI={false},customComponent, anduiOverrides. - Build style guide — choose between prebuilt UI, overrides, custom components, and headless/shared-core.
- Storybook visual preview — use the React Storybook companion to inspect overrideable surfaces before implementation.
- Headless mode — use MediaSFU business logic and workflows without shipping the default UI.
- UI overrides — keep the prebuilt experience but replace targeted surfaces.
- Custom component replacement — replace larger UI blocks with your own components.
- Media lifecycle — understand how capture, produce, consume, and render flows fit together.
- Starter screens — build product-shaped experiences such as call screens and host dashboards.
- Recipes — jump to implementation patterns by feature.
Choose by intent
| If you want to... | Start here |
|---|---|
| Get a framework running quickly | Quickstart |
| Follow the simplest beginner journey end to end | Beginner paths |
| Keep production credentials off the frontend | Secure backend proxy |
| Decide whether MediaSFU should render the visible UI | Choose your UI mode |
| Decide how much of the MediaSFU UI to keep | Build style guide |
| Preview cards and overrideable surfaces visually first | Storybook visual preview |
| Ship something close to a meeting room with brand changes | UI overrides |
| Build your own shell around MediaSFU logic | Headless mode |
| Swap selected UI surfaces while keeping the rest | UI overrides |
| Replace substantial UI sections | Custom component replacement |
| Build something that no longer looks like a meeting room | Custom component replacement |
| Understand publish and consume flow after connection works | Media lifecycle |
| Start from a product-shaped tutorial instead of a generic room | Starter screens |
| Implement a specific feature flow | Recipes |
Framework entry points
- MediaSFU ReactJS
- MediaSFU Angular
- MediaSFU React Native
- MediaSFU React Native Expo
- MediaSFU Vue
- mediasfu-shared
How to use these pages
- Start with the path that matches the decision in front of you: setup, security, UI ownership, lifecycle, or a product-shaped starter.
- Use the SDK pages for framework-specific install and component details, then use API Reference when you need method signatures or generated types.
- Stay near prebuilt UI when your product still behaves like a room, and move toward headless or shared-core when it behaves more like a call surface, operator console, or live-host workspace.
- A strong beginner sequence is: Quickstart -> Beginner paths -> Secure backend proxy -> Choose your UI mode -> Build style guide -> Starter screens.