Skip to main content

Embed a Room Inside Your Application

An embedded room must use one layout boundary. The primary media, mini cards, controls, participant panel, chat, modals, and orientation changes all resolve inside that boundary. Fixing only the outer CSS box leaves internal media using the viewport and causes clipping or overflow.

Browser rule​

Give the parent a real size, then pass the SDK's supported container fractions or dimensions. For a 70/30 product workspace, the room may occupy 70% of the available width while still receiving the full height of its parent.

.product-shell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(18rem, 3fr); height: 100dvh; }
.room-panel { min-width: 0; min-height: 0; overflow: hidden; }

Screens use object-fit: contain and never mirror. Cameras use the product's camera fit, normally cover; only the local camera preview is mirrored.

ReactJS 4.3.0​

<section className="room-panel">
  <ModernMediasfuGeneric
    containerWidthFraction={0.7}
    containerHeightFraction={1}
  />
</section>

The ReactJS contract carries these values through MainContainer, MainAspect, and MainScreen. If you override any of those components, forward both values rather than replacing them with viewport measurements.

Angular 2.3.1​

<section class="room-panel">
  <app-mediasfu-generic
    [containerWidthFraction]="0.7"
    [containerHeightFraction]="1">
  </app-mediasfu-generic>
</section>

Keep the parent sized during Angular change detection; do not publish updated room parameters while computing the layout.

Vue 1.1.1​

<section class="room-panel">
  <ModernMediasfuGeneric
    :container-width-fraction="0.7"
    :container-height-fraction="1" />
</section>

Fractions are props, not a value to derive by republishing parameters from a computed property or watcher.

React Native 2.4.0​

Measure the actual parent with onLayout and keep the room inside that view. Use the native SDK's supported embedded-container props; do not multiply browser viewport fractions by Dimensions.get('window').

<View style={{ flex: 1, minWidth: 0 }} onLayout={(event) => setRoomBounds(event.nativeEvent.layout)}>
  <MediasfuGeneric containerDimensions={roomBounds} />
</View>

Recalculate after rotation, split-screen resizing, keyboard changes, and safe area changes. Confirm controls and sidebars use the same measured boundary.

Expo 2.5.0​

Use the React Native measured-parent pattern in an Expo development build. Verify compact width, rotation, keyboard, and safe-area behavior on physical devices; Expo Go is not the final layout/runtime target for the native WebRTC room.

Flutter 2.3.0​

LayoutBuilder(
  builder: (context, constraints) => SizedBox(
    width: constraints.maxWidth,
    height: constraints.maxHeight,
    child: ModernMediasfuGeneric(
      options: ModernMediasfuGenericOptions(
        containerWidthFraction: 1.0,
        containerHeightFraction: 1.0,
      ),
    ),
  ),
)

The Flutter room is already inside an explicitly measured box, so its internal fractions normally remain 1.0. Use containerBuilder when your product needs a custom boundary wrapper. Avoid deriving embedded size only from global MediaQuery when the room occupies a smaller panel.

Android and Kotlin Multiplatform 1.0.5​

BoxWithConstraints(Modifier.fillMaxSize()) {
    MediasfuGeneric(
        options = MediasfuGenericOptions(
            containerWidthFraction = 1f,
            containerHeightFraction = 1f
        )
    )
}

Let Compose constraints define the native boundary. Fractions apply inside that boundary; they are not browser viewport percentages. Keep state publication out of composition and release platform renderers when the owner leaves the tree.

Swift and Apple platforms 0.1.3​

Host the MediaSFUIosHostBridge view controller inside an explicitly constrained SwiftUI/UIKit container. Safe areas, rotation, and split-view size changes are native layout events. The Apple bridge does not turn React-style fractions into a public Swift layout contract, so size the hosted controller through UIKit or SwiftUI rather than inventing fraction properties.

Unity 0.1.0-preview.2​

Use one RectTransform for the room canvas and attach all video renderers, controls, participant rails, and panels beneath it. Respond to canvas and safe area changes, and use aspect-fit for screen content. Unity has no browser-style room fraction API; its scene hierarchy is the explicit boundary.

Shared core 1.1.0​

Shared core owns room and media behavior but renders no container. A consuming framework must bind layout props and forward them through its own component tree. A field in shared types does not prove that a framework package correctly uses it.

Responsive acceptance checklist​

  • Test wide desktop, narrow desktop, phone portrait/landscape, split screen, and keyboard open.
  • Verify no room child escapes the parent or introduces horizontal page scroll.
  • Open chat/participants/settings and confirm the main media resizes within the same boundary.
  • Start screen share and confirm contain/no mirror behavior.
  • Page through participant video while all remote audio remains mounted.
  • Rotate or resize during active media and confirm renderers recover without duplicate tracks.
  • Leave/end and confirm no renderer remains attached to the old boundary.

Continue with headless UI, media lifecycle, and large rooms and moderation.