Skip to main content

Build a Custom Workspace by SDK

A custom workspace replaces the main visible room area while preserving the SDK's room, transport, and media lifecycle. Open your SDK section; component types and state handoffs are package-specific.

ReactJS 4.3.2​

Use customComponent when one React workspace should replace the supplied main room. Use uiOverrides when only cards, grids, controls, or modals need to change. For a completely app-owned shell, use returnUI={false} and implement the custom UI checklist.

Angular 2.3.2​

Build the workspace as Angular components and templates. Keep the active room parameter handoff, participant state, audio/video rendering, alerts, and exit behavior connected. Use MediasfuUICustomOverrides for smaller replacements.

Vue 1.1.2​

Supply a Vue component through the package's customComponent contract. Keep Vue renderers for remote audio/video and retain the current room parameter updates. Use Vue uiOverrides for targeted surfaces.

React Native 2.4.2​

Supply a React Native customComponent that consumes current room parameters. Render native audio/video surfaces, permission errors, background transitions, and cleanup. Do not reuse browser DOM components.

Expo 2.5.2​

Use the Expo package's customComponent after native permissions and media dependencies work in a development build. Retest the custom workspace on each shipping target, not only Expo web.

Flutter 2.3.1​

Use the Flutter custom workspace/component builder with the current MediasfuParameters. Keep audio-only widgets mounted and retain the package's permission, pagination, screen-share, alert, and exit flows.

Android 1.0.6​

Build an app-owned Compose workspace driven by MediasfuGenericState. Use its participant list and media actions rather than duplicating transport logic in the composable.

Kotlin Multiplatform 1.0.6​

Compose targets can build around MediasfuGenericState and MediasfuUiOverrides. Other targets use their native presentation layer with the KMP room state and operations.

Swift and Apple platforms 0.1.3​

Build the product workspace in SwiftUI or UIKit and embed the hosted room view controller where the live room belongs. The Apple package does not publish a customComponent prop.

Unity 0.1.0-preview.2​

The Unity scene is the custom workspace. Bind scene controls, participant renderers, and status UI to MediaSfuClient events and methods. Dispose client and media-backend resources when the scene exits.

Shared core 1.2.0​

Your framework workspace is the only visible UI. You must render audio/video, participants, controls, alerts, collaboration surfaces, and cleanup around the shared-core state and methods.

Safe implementation order​

  1. Validate the SDK's supplied or minimal room.
  2. Replace one visible surface.
  3. Test the affected operation with two users.
  4. Add permission denial, disconnect, and leave handling.
  5. Verify a second call on the same device.

See UI overrides by SDK and examples by SDK.