Media Settings Panel Documentation

Overview

This component provides a user interface for managing media device settings in a video conferencing application. It allows users to select and configure their camera, microphone, and speaker devices, with real-time preview capabilities.

Key Features

1. Device Management:

   • Camera selection and switching
   • Microphone selection with audio level monitoring
   • Speaker selection with test functionality
   • Low frequency audio toggle for microphones

2. Real-time Feedback:

   • Audio level visualization
   • Speaker test with visual feedback
   • Automatic device refresh when hardware changes

3. User Experience:

   • Clean, organized interface
   • Immediate application of settings
   • Error handling for unsupported features

Component Structure

Module Context (Utility Functions)

export const openMediaDevices = async (constraints) => {
  // Wrapper for getUserMedia
};

export async function getStream(audioSource?: string, videoSource?: string) {
  // Gets media stream with specified devices
}

export async function attachSinkId(element: HTMLAudioElement, sinkId: string) {
  // Sets audio output device
}

export async function getDevices() {
  // Enumerates available media devices
}

Props

export let selectedCamera: string;         // Currently selected camera ID
export let selectedMic: string;           // Currently selected microphone ID
export let selectedSpeaker: string;       // Currently selected speaker ID
export let enableLowFrequencies: boolean; // Low frequency audio setting

State Management

let speakerTestOn = false;                // Speaker test active state
let speakerTestElement: HTMLAudioElement; // Audio element for speaker test
let localAudioStream: MediaStream;        // Current microphone stream

let cameras = [];                         // Available video devices
let mics = [];                            // Available audio input devices
let speakers = [];                        // Available audio output devices

let isSupported;                          // Browser support flag
let error;                                // Error state

UI Components

Main Panel Structure

<aside class="bg-white h-full w-full border-l border-gray-200 flex flex-col">
  <!-- Header -->
  <div class="flex justify-between border-b p-2">
    <span class="text-lg">Settings</span>
    <button on:click={() => dispatch('close')}>
      <Icon src={Close} size=20/>
    </button>
  </div>

  <!-- Settings Content -->
  <div class="py-2 flex-grow overflow-y-auto mx-2">
    <div class="text-gray-700 text-sm">
      <!-- Camera Settings -->
      <div class="font-bold mb-2 text-[#2d4e8c]">Camera</div>
      <select bind:value={selectedCamera}>
        {#each cameras as camera}
          <option value={camera.deviceId}>{camera.label}</option>
        {/each}
      </select>

      <!-- Audio Settings -->
      <div class="font-bold mb-2 text-[#2d4e8c]">Audio</div>
      
      <!-- Microphone Settings -->
      <div class="mb-4">
        <select bind:value={selectedMic} on:change={getAudioPreview}>
          {#each mics as mic}
            <option value={mic.deviceId}>{mic.label}</option>
          {/each}
        </select>
        <Toggle bind:toggled={enableLowFrequencies}>
          Low Frequencies permitted/not permitted
        </Toggle>
        <AudioLevelIndicator stream={localAudioStream}/>
      </div>

      <!-- Speaker Settings -->
      <div class="mt-2">
        <select bind:value={selectedSpeaker} on:change={onSpeakerChange}>
          {#each speakers as speaker}
            <option value={speaker.deviceId}>{speaker.label}</option>
          {/each}
        </select>
        <button on:click={toggleSpeakerTest}>
          <Icon src={speakerTestOn ? VolumeUp : VolumeDown} size="24"/>
          Test speakers
        </button>
        <audio bind:this={speakerTestElement} src="/assets/media/test.mp3"/>
      </div>
    </div>
  </div>
</aside>

Technical Implementation

Core Functionality

1. Device Management:

   • Automatically refreshes device list when hardware changes
   • Maintains selected devices between refreshes
   • Handles device permission changes

2. Audio Monitoring:

   • Creates microphone stream for level visualization
   • Cleans up streams when component unmounts
   • Handles device change events

3. Output Routing:

   • Supports audio output device selection
   • Provides speaker test functionality
   • Falls back gracefully on unsupported browsers

Event Handling

1. Device Selection:

   • Camera changes dispatch cameraChanged event
   • Microphone changes dispatch micChanged event
   • Speaker changes dispatch speakerChanged event

2. User Interactions:

   • Speaker test toggle
   • Low frequency audio toggle
   • Device selection changes

Lifecycle Management

1. Initialization:

   • Sets up initial device selections
   • Starts audio preview
   • Attaches device change listeners

2. Cleanup:

   • Removes event listeners
   • Stops media streams
   • Cleans up audio elements

Usage Example

<script>
  import SettingsControls from "./settingsControls.svelte";
  
  let selectedCamera = null;
  let selectedMic = null;
  let selectedSpeaker = null;
  let enableLowFrequencies = false;
  
  function handleClose() {
    // Close settings panel
  }
</script>

<SettingsControls
  bind:selectedCamera
  bind:selectedMic
  bind:selectedSpeaker
  bind:enableLowFrequencies
  on:close={handleClose}
/>

Dependencies

• @steeze-ui/svelte-icon for icons
• @steeze-ui/remix-icons (Close, VolumeUp, VolumeDown)
• svelte-toggle for toggle switch
• Custom AudioLevelIndicator component
• Browser MediaDevices API

Styling Notes

• Clean white background with subtle borders
• Blue accent color for section headers
• Consistent spacing and padding
• Responsive layout
• Hidden audio elements for testing

Accessibility Features

• Semantic HTML structure
• Clear visual hierarchy
• Interactive elements have hover/focus states
• Labels for all form controls
• Keyboard-navigable interface