Const// 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} />;
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: