Variable MediaSettingsModal`Const`

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

MediaSettingsModal - Audio/Video device selection interface

MediaSettingsModal is a React Native component that provides an interface for participants to select their preferred audio and video input devices. It supports camera switching (front/back on mobile), microphone selection, and background effects integration.

Key Features:

Audio input device selection (microphone)
Video input device selection (camera)
Camera switch button (front/back on mobile)
Background effects modal integration
Real-time device switching
Available device enumeration
Position-configurable modal (4 corners)

UI Customization: This component can be replaced via uiOverrides.mediaSettingsModal to provide a completely custom media settings interface.

Component

Param: props

Configuration options for media settings

Returns

Rendered media settings modal

Example

// Basic usage - Device selection import React, { useState } from 'react'; import { MediaSettingsModal } from 'mediasfu-reactnative-expo';

function MediaControls() { const [isModalVisible, setModalVisible] = useState(false); const [selectedCamera, setSelectedCamera] = useState('camera1'); const [selectedMic, setSelectedMic] = useState('mic1');

const videoDevices = [ { deviceId: 'camera1', label: 'Front Camera', kind: 'videoinput' }, { deviceId: 'camera2', label: 'Back Camera', kind: 'videoinput' }, ];

const audioDevices = [ { deviceId: 'mic1', label: 'Built-in Microphone', kind: 'audioinput' }, { deviceId: 'mic2', label: 'Bluetooth Headset', kind: 'audioinput' }, ];

return ( <> <Button title="Media Settings" onPress={() => setModalVisible(true)} /> <MediaSettingsModal isMediaSettingsModalVisible={isModalVisible} onMediaSettingsClose={() => setModalVisible(false)} parameters={{ userDefaultVideoInputDevice: selectedCamera, userDefaultAudioInputDevice: selectedMic, videoInputs: videoDevices, audioInputs: audioDevices, isBackgroundModalVisible: false, updateIsBackgroundModalVisible: (visible) => console.log('Background modal:', visible), getUpdatedAllParams: () => ({ userDefaultVideoInputDevice: selectedCamera, userDefaultAudioInputDevice: selectedMic, videoInputs: videoDevices, audioInputs: audioDevices, }), }} /> ); };


@example
```tsx
// With position and background effects modal
const handleSwitchCamera = async (options: SwitchVideoAltOptions) => {
await switchVideoAlt(options);
console.log('Camera switched');
};

return (
<MediaSettingsModal
  isMediaSettingsModalVisible={showSettings}
  onMediaSettingsClose={() => setShowSettings(false)}
  switchCameraOnPress={handleSwitchCamera}
  parameters={mediaParameters}
  position="bottomLeft"
  backgroundColor="#2c3e50"
/>
);

@example

// Using custom UI via uiOverrides
const config = {
  uiOverrides: {
    mediaSettingsModal: {
      component: MyCustomMediaSettings,
      injectedProps: {
        theme: 'dark',
        showAdvancedOptions: true,
      },
    },
  },
};

return <MyMediaComponent config={config} />;