Const// Basic virtual background selector
import React, { useState } from 'react';
import { BackgroundModal } from 'mediasfu-reactjs';
function BackgroundControl({ parameters }) {
const [isVisible, setIsVisible] = useState(false);
return (
<>
<button onClick={() => setIsVisible(true)}>
Virtual Background {parameters.appliedBackground ? '✓' : ''}
</button>
<BackgroundModal
isVisible={isVisible}
onClose={() => setIsVisible(false)}
parameters={parameters}
position="topRight"
backgroundColor="#0f172a"
/>
</>
);
}
// Custom styled with preview status
import { BackgroundModal } from 'mediasfu-reactjs';
function BrandedBackground({ isVisible, onClose, parameters }) {
return (
<BackgroundModal
isVisible={isVisible}
onClose={onClose}
parameters={parameters}
backgroundColor="#1e3a8a"
position="topLeft"
contentProps={{
style: {
maxHeight: '90vh',
borderRadius: 20,
border: '2px solid #3b82f6',
},
}}
applyButtonProps={{
style: {
background: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
color: 'white',
padding: '12px 28px',
borderRadius: 12,
fontWeight: 600,
},
}}
saveButtonProps={{
style: {
background: 'linear-gradient(135deg, #22c55e 0%, #14532d 100%)',
color: 'white',
padding: '12px 28px',
borderRadius: 12,
fontWeight: 600,
},
}}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<span>Virtual Background</span>
{parameters.appliedBackground && (
<span style={{ fontSize: 14, color: '#22c55e' }}>● Active</span>
)}
</div>
}
/>
);
}
// Analytics tracking for background changes
import { BackgroundModal } from 'mediasfu-reactjs';
function AnalyticsBackground({ isVisible, onClose, parameters }) {
return (
<BackgroundModal
isVisible={isVisible}
onClose={onClose}
parameters={{
...parameters,
updateAppliedBackground: (applied) => {
if (applied) {
analytics.track('virtual_background_applied', {
backgroundType: parameters.selectedImage === 'none' ? 'none' :
parameters.selectedImage === 'blur' ? 'blur' : 'image',
customImage: !!parameters.customImage,
});
}
parameters.updateAppliedBackground(applied);
},
}}
renderBody={({ defaultBody }) => {
return (
<div>
<div style={{
padding: 12,
background: '#f8fafc',
borderRadius: 8,
marginBottom: 16,
}}>
<div style={{ fontWeight: 600, marginBottom: 4 }}>
Background Status
</div>
<div style={{ fontSize: 14 }}>
{parameters.appliedBackground
? `Active: ${parameters.selectedImage}`
: 'No background applied'}
</div>
</div>
{defaultBody}
</div>
);
}}
/>
);
}
// Override with MediasfuGeneric uiOverrides
import { MediasfuGeneric, BackgroundModal } from 'mediasfu-reactjs';
const uiOverrides = {
backgroundModal: {
component: (props) => (
<BackgroundModal
{...props}
backgroundColor="#0f172a"
position="topRight"
applyButtonProps={{
style: {
background: '#3b82f6',
borderRadius: 12,
padding: '12px 28px',
fontWeight: 600,
},
}}
saveButtonProps={{
style: {
background: '#22c55e',
borderRadius: 12,
padding: '12px 28px',
fontWeight: 600,
},
}}
/>
),
},
};
<MediasfuGeneric uiOverrides={uiOverrides} />;
BackgroundModal - Advanced virtual background and blur management interface
A sophisticated modal for configuring virtual backgrounds using MediaPipe Selfie Segmentation. Supports image uploads, preset backgrounds, real-time preview, blur effects, and seamless video transport integration. Perfect for professional meetings, virtual events, and privacy enhancement during video calls.
Features: