MediaSFU ReactJS
    Preparing search index...

    Variable MediaSettingsModalConst

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

    MediaSettingsModal - Comprehensive device selection and media configuration interface

    A feature-rich modal for managing audio/video inputs, camera switching, and virtual backgrounds. Supports device enumeration, real-time switching, front/back camera toggle (mobile), and integrates with background customization. Perfect for pre-call setup or in-call media adjustments.

    Features:

    • Video input device selection (webcams, external cameras)
    • Audio input device selection (microphones, headsets)
    • Front/back camera switching for mobile devices
    • Virtual background access integration
    • Real-time device switching without dropping call
    • Device refresh capability
    • Selected device persistence
    • Responsive positioning (topRight, topLeft, bottomRight, bottomLeft)
    • Custom styling support

    Configuration options

    Modal visibility state

    Callback when modal is closed

    Camera front/back toggle handler

    Video input switch handler

    Audio input switch handler

    Device and state parameters

    Currently selected video device ID

    Available video input devices

    Available audio input devices

    Currently selected audio device ID

    Background modal state

    Update background modal visibility

    Retrieve latest parameters

    Modal screen position

    Modal background color

    Rendered media settings modal

    // Basic media settings modal

    import React, { useState } from 'react';
    import { MediaSettingsModal } from 'mediasfu-reactjs';

    function MediaControls({ parameters }) {
      const [isVisible, setIsVisible] = useState(false);

      return (
        <>
          <button onClick={() => setIsVisible(true)}>
            Media Settings
          </button>
          <MediaSettingsModal
            isMediaSettingsModalVisible={isVisible}
            onMediaSettingsClose={() => setIsVisible(false)}
            parameters={parameters}
            position="topRight"
            backgroundColor="#0f172a"
          />
        </>
      );
    }

    // Custom styled with device analytics

    import { MediaSettingsModal } from 'mediasfu-reactjs';

    function AnalyticsMediaSettings({ isVisible, onClose, parameters }) {
      const handleSwitchVideo = async (options) => {
        analytics.track('video_device_switched', {
          deviceId: options.videoPreference,
          deviceLabel: parameters.videoInputs.find(d => d.deviceId === options.videoPreference)?.label,
        });
        return parameters.switchVideo(options);
      };

      const handleSwitchAudio = async (options) => {
        analytics.track('audio_device_switched', {
          deviceId: options.audioPreference,
          deviceLabel: parameters.audioInputs.find(d => d.deviceId === options.audioPreference)?.label,
        });
        return parameters.switchAudio(options);
      };

      return (
        <MediaSettingsModal
          isMediaSettingsModalVisible={isVisible}
          onMediaSettingsClose={onClose}
          switchVideoOnPress={handleSwitchVideo}
          switchAudioOnPress={handleSwitchAudio}
          parameters={parameters}
          position="bottomRight"
          backgroundColor="#1e3a8a"
        />
      );
    }

    // Branded settings with device count display

    import { MediaSettingsModal } from 'mediasfu-reactjs';

    function BrandedSettings({ isVisible, onClose, parameters }) {
      return (
        <div>
          <div style={{
            display: 'flex',
            gap: 12,
            marginBottom: 16,
            padding: 12,
            background: '#f8fafc',
            borderRadius: 8,
          }}>
            <div>
              <span style={{ fontWeight: 600 }}>Cameras:</span> {parameters.videoInputs.length}
            </div>
            <div>
              <span style={{ fontWeight: 600 }}>Microphones:</span> {parameters.audioInputs.length}
            </div>
          </div>
          <MediaSettingsModal
            isMediaSettingsModalVisible={isVisible}
            onMediaSettingsClose={onClose}
            parameters={parameters}
            position="topLeft"
            backgroundColor="#7c3aed"
          />
        </div>
      );
    }

    // Override with MediasfuGeneric uiOverrides

    import { MediasfuGeneric, MediaSettingsModal } from 'mediasfu-reactjs';

    const uiOverrides = {
      mediaSettingsModal: {
        component: (props) => (
          <MediaSettingsModal
            {...props}
            backgroundColor="#0f172a"
            position="topRight"
            switchVideoOnPress={async (options) => {
              console.log('Video device switched:', options.videoPreference);
              return props.switchVideoOnPress?.(options);
            }}
            switchAudioOnPress={async (options) => {
              console.log('Audio device switched:', options.audioPreference);
              return props.switchAudioOnPress?.(options);
            }}
          />
        ),
      },
    };

    <MediasfuGeneric uiOverrides={uiOverrides} />;

    Settings

    Member Visibility