Choose the UI Ownership Level for Your SDK

Choose your SDK first, then choose how much visible room UI your application owns. MediaSFU supports three integration approaches, but the exact exports differ by platform.

The three supported approaches​

Hybrid does not mean running two room engines. One engine owns the socket, transports, producers, consumers, room state, and modal lifecycle. Your layout mounts components against the latest parameter publication from that engine.

Reconstruct the standard modern UI from one engine​

ModernMediasfuGenericHead performs a pure read of an existing engine's current parameter bag and renders the normal modern component tree. It does not create or join a room. Never mount a second Generic component to supply the visible tree.

React example:

import {useRef, useState} from 'react';
import {
  ModernMediasfuGeneric,
  ModernMediasfuGenericHead,
  type HeadlessParameters,
} from 'mediasfu-reactjs';

export function RepositionedStandardRoom() {
  const seed = useRef<HeadlessParameters>({}).current;
  const [parameters, setParameters] = useState<HeadlessParameters>(seed);

  return <div className="product-room-shell">
    <ModernMediasfuGeneric
      returnUI={false}
      renderUIExternally
      sourceParameters={seed}
      updateSourceParameters={setParameters}
    />
    <ModernMediasfuGenericHead parameters={parameters} />
  </div>;
}

Angular uses the same ownership rule: configure the one MediasfuGeneric engine with [returnUI]="false" and [renderUIExternally]="true", publish its current parameters, and pass them to <app-modern-mediasfu-generic-head>. Kotlin/Compose, React Native, and Expo also require the renderer and room engine to share one current room state.

Quick decision​

Prove create, join, local media, remote audio/video, errors, and leave with the supplied room before replacing its presentation.

ReactJS 4.3.7​

• Supplied room: returnUI={true}.
• Targeted changes: uiOverrides and custom card props.
• Custom workspace: customComponent.
• App-owned shell: returnUI={false}, sourceParameters, and updateSourceParameters.

Continue with React UI overrides.

For selected dialogs and controls, continue with the hybrid virtual-background example.

Angular 2.4.1​

• Supplied room: Angular MediaSFU component with returnUI enabled.
• Targeted changes: Angular MediasfuUICustomOverrides component types.
• Custom workspace: Angular templates/components receiving current room state.
• App-owned shell: disable supplied rendering and preserve the room parameter and lifecycle contracts in your Angular application.

Continue with Angular UI overrides.

Vue 1.2.1​

• Supplied room: MediasfuGeneric or ModernMediasfuGeneric.
• Targeted changes: Vue MediasfuUICustomOverrides components.
• Custom workspace: customComponent.
• App-owned shell: returnUI disabled with current room parameters retained.

Continue with Vue UI overrides.

React Native 2.4.5​

• Supplied room: the package's native MediaSFU component.
• Targeted changes: native uiOverrides and custom cards.
• Custom workspace: customComponent with current room parameters.
• App-owned shell: returnUI={false} and React Native room state/actions.

Continue with React Native UI overrides.

Expo 2.5.5​

• Supplied room: the Expo package's MediaSFU component.
• Targeted changes: Expo/React Native uiOverrides.
• Custom workspace: customComponent.
• App-owned shell: returnUI={false} after native media configuration is complete.

Continue with Expo UI overrides.

Flutter 2.3.6​

• Supplied room: MediasfuGeneric or a fixed room shape.
• Targeted changes: MediasfuUICustomOverrides and custom builders.
• Custom workspace: the custom workspace/component builder.
• App-owned shell: returnUI: false with MediasfuParameters and app widgets.

Continue with Flutter UI overrides.

Android 1.0.7​

• Supplied room: Android/Compose MediaSFU room.
• Targeted changes: MediasfuUiOverrides and Compose wrappers.
• Custom workspace: app composables driven by MediasfuGenericState.
• App-owned shell: your Compose navigation and room-state presentation.

Continue with Android UI overrides.

Kotlin Multiplatform 1.0.7​

• Supplied room: the KMP room UI available to the target.
• Targeted changes: MediasfuUiOverrides on Compose targets.
• Custom workspace: target-native UI driven by shared room state.
• App-owned shell: shared operations plus each platform's presentation layer.

Continue with Kotlin UI overrides.

Swift and Apple platforms 0.1.3​

The Apple integration uses an app-owned SwiftUI/UIKit container around the hosted room controller. It does not expose the web SDK's returnUI or uiOverrides props. Customize the surrounding product shell and use the published bridge controls for room media.

Continue with Apple presentation ownership.

Unity 0.1.0-preview.2​

Unity is UI-independent. Your scene owns every visible element while MediaSfuClient provides room and media operations. There is no prebuilt meeting shell to turn off.

Continue with Unity scene ownership.

Shared core 1.2.5​

Shared core supplies no UI. Your framework owns the room shell, media elements, controls, alerts, accessibility, and teardown from the beginning.

Continue with shared-core UI ownership.

Before choosing full app ownership​

Confirm that your replacement handles remote audio, remote video, pagination, paused producers, alerts, screen-share stop, collaboration surfaces, exit, and second-call cleanup. Use the custom UI responsibility checklist.