Function MediaSettingsModal

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

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"
      />
    </>
  );
}
Copy

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"
    />
  );
}
Copy

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>
  );
}
Copy

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} />;
Copy