Function BackgroundModal

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:

• Virtual background image selection from presets
• Custom background image upload
• Real-time background segmentation (MediaPipe)
• Video preview before applying
• Background blur effects
• Seamless video stream replacement
• Canvas-based image processing
• Recording-compatible backgrounds
• Automatic video transport handling
• Memory-efficient stream management
• Extensive HTML attributes customization
• Custom render hooks for UI flexibility

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

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

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

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