MediaSFU React Native
    Preparing search index...

    Variable MediaSettingsModalConst

    MediaSettingsModal: React.FC<MediaSettingsModalOptions> = ...

    MediaSettingsModal - Audio/video device selection interface.

    Offers participants a guided control surface for swapping microphones, cameras, and launching background effects. Designed for quick device management across desktop and mobile with override hooks for bespoke UI.

    Key Features:

    • Enumerates available audio and video input devices with friendly labels.
    • Provides camera flip support on mobile via switchCameraOnPress.
    • Integrates background effect modal visibility toggles.
    • Applies device switches instantly using supplied handler callbacks.
    • Supports modal placement at any screen corner.
    • Accepts additional styling through the style prop for brand alignment.
    • Exposes override hooks to replace default content or container markup.
    • Relies on getUpdatedAllParams for up-to-date device inventories.

    UI Customization: Replace via uiOverrides.mediaSettingsModal to deliver a tailored media settings panel while continuing to use the provided stream utilities.

    Component properties.

    Rendered media settings modal.

    // Basic device selection workflow
    <MediaSettingsModal
      isMediaSettingsModalVisible={visible}
      onMediaSettingsClose={() => setVisible(false)}
      parameters={parameters}
    />

    // Custom switch handlers
    <MediaSettingsModal
      isMediaSettingsModalVisible={isOpen}
      onMediaSettingsClose={closeModal}
      parameters={params}
      switchCameraOnPress={handleCameraSwitch}
      switchVideoOnPress={handleVideoSwitch}
      switchAudioOnPress={handleAudioSwitch}
    />

    // uiOverrides integration for branded dialog
    const MediaSettings = withOverride(uiOverrides.mediaSettingsModal, MediaSettingsModal);
    <MediaSettings
      isMediaSettingsModalVisible={open}
      onMediaSettingsClose={close}
      parameters={params}
      backgroundColor="#1a1a1a"
      style={{ borderRadius: 24 }}
    />

    Settings

    Member Visibility