Add real-time device preview and audio level monitoring to encoder selectors

[andrescera]

Summary

Add always-on video preview and audio waveform/level display next to the device selectors in EncoderCard.svelte, consuming a WebRTC preview stream from the backend ceracoder instance.

Background

The frontend currently shows device selectors (video input + audio input) but no live preview. Since the frontend runs remotely from the capture hardware, we need a backend-provided preview stream. Users want to:

• See what the selected video device is capturing (low-res live preview)
• Monitor audio levels in real-time (waveform/level meter)

Requirements

UI Components

1. Video preview: <video> element next to video device selector

   • Display WebRTC stream from backend (640x360 or 720p, 15-24fps)
   • Show fallback message if device unavailable or permissions denied
   • Auto-update when device selection changes

2. Audio waveform/level meter: Canvas or level bar next to audio device selector

   • Render real-time waveform or VU meter
   • Consume either:
     • Audio level messages from backend (level element RMS/peak data), OR
     • Derive from incoming WebRTC audio track (Web Audio API AnalyserNode)
   • Auto-update when device selection changes

Backend Integration

• Consume WebRTC preview via signaling channel (SDP/ICE from backend)
• Handle device change: tear down old stream, renegotiate for new device
• Graceful error handling: permissions denied, device unavailable, network issues

Lifecycle

• Always-on per device selection (no manual toggle required initially)
• Clean up streams on device change or component unmount
• Guard against stale streams/memory leaks

Acceptance Criteria

• Video preview <video> element renders WebRTC stream next to video selector
• Audio waveform/level meter renders real-time data next to audio selector
• Preview updates when user changes device selection
• Graceful error states (permissions, unavailable device, network failure)
• Proper stream cleanup on unmount and device change
• No memory leaks or stale WebRTC connections

Design Notes

• Place video preview below or beside video device dropdown
• Place waveform/level meter below or beside audio device dropdown
• Keep UI responsive; preview should not block main encoding controls
• Consider adding optional "pause preview" toggle for later iteration

Related

• ceracoder issue Tweak styles #11: Add WebRTC preview pipeline support for remote UI monitoring ceracoder#11

Files to Modify

• CeraUI/apps/frontend/src/main/shared/EncoderCard.svelte (or create separate preview components)