feat(11): add music-themed virtual backgrounds to companion page

- 5 SVG backgrounds: Studio Neon, Concert Stage, Vinyl Wall, Synthwave, Jam Room
- Dropdown offers: No Effect, Blur, Green Screen, plus the 5 backgrounds
- Uses VDO.Ninja &effects=4&imageSrc= for virtual backgrounds
- Removed &webcam so VDO.Ninja shows setup/preview before joining
- User picks background first, then clicks START in VDO.Ninja
- Selection persists via localStorage

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: mkschulze

companion/index.html

@@ -24,7 +24,11 @@ <h1>JamWide Video</h1>
       <option value="none">No Effect</option>
       <option value="blur">Blur Background</option>
       <option value="greenscreen">Green Screen</option>
-      <option value="image">Virtual Background</option>
+      <option value="bg-studio-neon">Studio Neon</option>
+      <option value="bg-concert-stage">Concert Stage</option>
+      <option value="bg-vinyl-wall">Vinyl Wall</option>
+      <option value="bg-synth-wave">Synthwave</option>
+      <option value="bg-jam-room">Jam Room</option>
     </select>
     <span id="status-badge" class="badge-disconnected">Disconnected</span>
   </header>

companion/public/backgrounds/concert-stage.svg

@@ -69,9 +69,18 @@ export function setSessionInfo(roomId: string): void {
 
 // ── Background Effects ──
 
-export type BgEffect = 'none' | 'blur' | 'greenscreen' | 'image';
+export type BgEffect = 'none' | 'blur' | 'greenscreen' | 'bg-studio-neon' | 'bg-concert-stage' | 'bg-vinyl-wall' | 'bg-synth-wave' | 'bg-jam-room';
 
 const EFFECT_STORAGE_KEY = 'jamwide-bg-effect';
+const BG_BASE_URL = 'https://jamwide.audio/video/backgrounds/';
+
+const BACKGROUND_IMAGES: Record<string, string> = {
+  'bg-studio-neon': 'studio-neon.svg',
+  'bg-concert-stage': 'concert-stage.svg',
+  'bg-vinyl-wall': 'vinyl-wall.svg',
+  'bg-synth-wave': 'synth-wave.svg',
+  'bg-jam-room': 'jam-room.svg',
+};
 
 export function getSavedEffect(): BgEffect {
   return (localStorage.getItem(EFFECT_STORAGE_KEY) as BgEffect) || 'none';
@@ -81,20 +90,22 @@ export function saveEffect(effect: BgEffect): void {
   localStorage.setItem(EFFECT_STORAGE_KEY, effect);
 }
 
-function effectToParam(effect: BgEffect): string {
-  switch (effect) {
-    case 'blur': return '&effects=3';
-    case 'greenscreen': return '&effects=5';
-    case 'image': return '&effects=4';
-    default: return '';
+function effectToParams(effect: BgEffect): string {
+  if (effect === 'blur') return '&effects=3';
+  if (effect === 'greenscreen') return '&effects=5';
+  const bgFile = BACKGROUND_IMAGES[effect];
+  if (bgFile) {
+    const imgUrl = BG_BASE_URL + bgFile;
+    return '&effects=4&imageSrc=' + encodeURIComponent(imgUrl);
   }
+  return '';
 }
 
 // ── VDO.Ninja URL Builder ──
 
 export function buildVdoNinjaUrl(room: string, push: string, effect?: BgEffect): string {
-  const base = `https://vdo.ninja/?room=${encodeURIComponent(room)}&push=${encodeURIComponent(push)}&noaudio&cleanoutput&webcam`;
-  const fx = effectToParam(effect ?? getSavedEffect());
+  const base = `https://vdo.ninja/?room=${encodeURIComponent(room)}&push=${encodeURIComponent(push)}&noaudio&cleanoutput`;
+  const fx = effectToParams(effect ?? getSavedEffect());
   return base + fx;
 }