MediaSFU Angular
    Preparing search index...

    Class MediaSettingsModal

    MediaSettingsModal - Modal for selecting audio/video devices and virtual backgrounds

    Provides device selection controls for camera, microphone, and audio output. Includes camera switching (front/back), device dropdown selectors, and virtual background access.

    Supports three levels of customization:

    1. Basic Usage: Use default modal UI with device dropdowns and switch buttons
    2. Style Customization: Override modal appearance with overlayStyle and contentStyle
    3. Full Override: Provide a custom template via customTemplate for complete control

    Key Features:

    • Camera device selection dropdown
    • Microphone device selection dropdown
    • Front/back camera toggle (mobile)
    • Virtual background button
    • Real-time device switching
    • Default device persistence

    Basic Usage:

    <app-media-settings-modal
      [isMediaSettingsModalVisible]="showMediaSettings"
      [parameters]="mediaParams"
      [switchCameraOnPress]="switchCamera"
      [switchVideoOnPress]="switchVideo"
      [switchAudioOnPress]="switchAudio"
      [onMediaSettingsClose]="closeMediaSettings">
    </app-media-settings-modal>

    Style Customization:

    <app-media-settings-modal
      [isMediaSettingsModalVisible]="showMediaSettings"
      [parameters]="mediaParams"
      [overlayStyle]="{
        backgroundColor: 'rgba(0, 0, 0, 0.75)'
      }"
      [contentStyle]="{
        backgroundColor: '#ffffff',
        borderRadius: '16px',
        padding: '30px',
        minWidth: '400px'
      }"
      [position]="'center'"
      [backgroundColor]="'#f5f5f5'"
      [onMediaSettingsClose]="closeMediaSettings">
    </app-media-settings-modal>

    Custom Template Override:

    <app-media-settings-modal
      [isMediaSettingsModalVisible]="showMediaSettings"
      [customTemplate]="customMediaTemplate"
      [onMediaSettingsClose]="closeMediaSettings">
    </app-media-settings-modal>

    <ng-template #customMediaTemplate let-videoInputs="videoInputs" let-audioInputs="audioInputs" let-onVideoSwitch="onVideoSwitch">
      <div class="custom-media-settings">
        <h3>Device Settings</h3>
        <label>
          Camera:
          <select (change)="onVideoSwitch($event)">
            <option *ngFor="let device of videoInputs" [value]="device.deviceId">
              {{ device.label }}
            </option>
          </select>
        </label>
        <label>
          Microphone:
          <select (change)="onAudioSwitch($event)">
            <option *ngFor="let device of audioInputs" [value]="device.deviceId">
              {{ device.label }}
            </option>
          </select>
        </label>
      </div>
    </ng-template>

    app-media-settings-modal

    true

    CommonModule, FontAwesomeModule, FormsModule

    isMediaSettingsModalVisible - Whether the modal is currently visible. Default: false

    onMediaSettingsClose - Callback function to close the modal. Default: () => {}

    switchCameraOnPress - Function to switch front/back camera. Default: switchVideoAltService.switchVideoAlt

    switchVideoOnPress - Function to switch video input device. Default: switchVideoService.switchVideo

    switchAudioOnPress - Function to switch audio input device. Default: switchAudioService.switchAudio

    parameters - Object containing videoInputs, audioInputs, default devices, and update functions. Default: {}

    position - Modal position on screen ('topRight', 'center', etc.). Default: 'topRight'

    backgroundColor - Background color of the modal content. Default: '#83c0e9'

    overlayStyle - Custom CSS styles for the modal overlay backdrop. Default: undefined

    contentStyle - Custom CSS styles for the modal content container. Default: undefined

    customTemplate - Custom TemplateRef to completely replace default modal template. Default: undefined

    ngOnInit - Initializes component, sets up default services, and ensures default device selections

    ngOnChanges - Updates modal settings when visibility or parameters change

    setupDefaultServices - Configures default device switching services if not provided

    updateParameters - Refreshes parameters from getUpdatedAllParams

    ensureDefaultSelections - Sets default selected devices if none selected

    initializeModalSettings - Initializes selected device states

    handleSwitchCamera - Handles front/back camera toggle

    handleVideoSwitch - Handles video device selection change

    handleAudioSwitch - Handles audio device selection change

    handleModalClose - Closes modal via onMediaSettingsClose callback

    showVirtual - Opens virtual background modal

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    modalContentStyle - Returns computed content styles with positioning

    Implements

    • OnInit
    • OnChanges
    Index

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges setupDefaultServices updateParameters ensureDefaultSelections initializeModalSettings modalContentStyle handleSwitchCamera handleVideoSwitch handleAudioSwitch handleModalClose showVirtual getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isMediaSettingsModalVisible onMediaSettingsClose switchCameraOnPress switchVideoOnPress switchAudioOnPress parameters position backgroundColor overlayStyle? contentStyle? customTemplate? faTimes faSyncAlt faCamera faMicrophone faPhotoFilm selectedVideoInput selectedAudioInput prevSelectedVideoInput prevSelectedAudioInput

    Constructors

    Methods

    • Returns {
          backgroundColor: string;
          borderRadius: string;
          padding: string;
          width: string;
          maxHeight: string;
          overflowY: string;
          top: string;
          bottom: string;
          left: string;
          right: string;
      }

    Properties

    isMediaSettingsModalVisible: boolean = false
    onMediaSettingsClose: () => void
    switchCameraOnPress: (params: any) => Promise<void>
    switchVideoOnPress: (params: any) => Promise<void>
    switchAudioOnPress: (params: any) => Promise<void>
    parameters: MediaSettingsModalParameters
    position: string = 'topRight'
    backgroundColor: string = '#83c0e9'
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: any
    faTimes: IconDefinition = faTimes
    faSyncAlt: IconDefinition = faSyncAlt
    faCamera: IconDefinition = faCamera
    faMicrophone: IconDefinition = faMicrophone
    faPhotoFilm: IconDefinition = faPhotoFilm
    selectedVideoInput: string
    selectedAudioInput: string
    prevSelectedVideoInput: string
    prevSelectedAudioInput: string

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties