SpacesTek Advanced

SpacesTek Advanced is a multi-framework MediaSFU reference application for custom social audio rooms, video spaces, WebRTC conferencing, screen sharing, participant moderation, secure room creation, and headless media rendering.

The same product is implemented in React, Angular, React Native, Expo, and Flutter so teams can compare framework patterns without changing the MediaSFU room model.

Quick start · Secure proxy · MediaSFU docs · API Sandbox

What this repository demonstrates

• A polished application-owned room UI backed by MediaSFU.
• ModernMediasfuGeneric where the SDK provides it, with classic/headless equivalents where a framework does not yet expose the Modern shell.
• Screen-share-first media resolution, followed by remote camera and local camera.
• Correct remote audio mounting for headless rooms.
• Microphone, camera, camera flip, device selection, leave/end, moderation, join approval, and request-to-speak flows.
• A server-side create/join proxy that keeps API credentials out of web and mobile bundles.
• The distinction between MediaSFU Cloud and MediaSFU Open self-hosting.
• Custom components and direct stream rendering without forking the SDK.

Choose a client

Framework	Folder	Best starting point
React	mediasfu_reactjs	Modern headless room and direct browser MediaStream rendering
Angular	mediasfu_angular	Injectable room adapters and Angular headless state
React Native	mediasfu_react_native	Bare native Android/iOS integration
Expo	mediasfu_react_native_expo	Expo development build; not Expo Go
Flutter	mediasfu_flutter	Modern Flutter room, headless media surface, and proxy callbacks
Backend	backend	Space data plus the production-safe MediaSFU room proxy

Start with QUICKSTART.md, then use the README inside your chosen client.

Architecture

SpacesTek UI
  ├─ app state: spaces, roles, requests, moderation
  ├─ headless media surface: video selection + all audio renderers
  └─ create/join adapter
           │
           ▼
SpacesTek backend (credentials, validation, rate-limit boundary)
           │
           ├─ MediaSFU Cloud rooms API
           └─ or your self-hosted MediaSFU Open server

MediaSFU SDK room engine
  ├─ produces microphone, camera, screen, and custom streams
  ├─ consumes remote audio/video
  └─ publishes current room/media state to the app

A published parameter bag is a snapshot. Always read the latest bag and use pure getCurrentParams() where available. getUpdatedAllParams() republishes state; calling it from rendering, polling, pagination, or selectors can create a feedback loop.

MediaSFU Cloud versus MediaSFU Open

MediaSFU Cloud is the hosted MediaSFU service. Obtain API access at mediasfu.com, explore request payloads in the MediaSFU API Sandbox, and keep API credentials on your backend.

MediaSFU Open is the MediaSFU media server that you run and operate yourself. Point the SDK's localLink at your server. It is not another hosted credential option, and users should not expect MediaSFU to operate that local server for them.

For a private local experiment, entering an API username and key in the SDK UI is a convenient shortcut. For any shared, published, or production app, proxy both room creation and joining through your backend. See the secure backend proxy guide.

Build styles

Use the prebuilt room UI when you want the fastest complete experience. Use custom component props and UI overrides when you want to keep the SDK's room shell but replace branded regions. Use headless mode when your product owns the entire visible surface.

In headless mode:

1. wire every source publication and the explicit media-change callback;
2. re-read current parameters instead of retaining an old bag;
3. render screen share, remote video, and local video according to product priority;
4. mount every returned audio component;
5. call SDK controls/actions rather than mutating streams directly;
6. expose readiness and refusal reasons to the user.

The React client README provides the most compact worked explanation. The MediaSFU Build Style Guide covers prebuilt, custom-component, UI-override, and headless choices.

Screens

These repository images show the product flow. When you document your own deployment, keep room identifiers, credentials, and private configuration out of screenshots.

Test the integration

Run the framework's normal test and production-build commands, then exercise a complete two-participant room:

1. create through the backend and join from a second client;
2. produce and consume microphone and camera media in both directions;
3. start screen sharing and confirm it becomes the selected surface;
4. verify remote audio remains mounted while video selection changes;
5. exercise controls, leave/end the room, and confirm cleanup.

Live room example

The Angular live-room test notes document two independent browser participants connected through the secure backend proxy. It verifies room creation, joining, deterministic video production, remote decode, and leave behavior. Audible remote audio, screen sharing, and Flutter live-room behavior require separate target-platform testing.

More resources

• MediaSFU SDK documentation
• React SDK guide
• Flutter SDK guide
• Storybook visual preview guide
• SpacesTek Final
• MediaSFU Agents

The original long-form repository guide is preserved in README_DETAILED.md for historical context.

Contributing and license

Read CONTRIBUTING.md. This project is licensed under the MIT License.