Compress

public/config.js

@@ -7,6 +7,12 @@
 const OFF = '__off__';
 let liveSizes = [];
 
+// UI bietet nur diese zwei Modi an (mjpeg-Re-Encode bleibt API/Env vorbehalten).
+const ENCODE_OPTIONS = [
+  { value: 'copybsf', label: 'MJPEG' },
+  { value: 'h264', label: 'H.264 (GPU)' },
+];
+
 async function load() {
   const r = await fetch('/api/config');
   if (!r.ok) throw new Error(`HTTP ${r.status}`);
@@ -46,20 +52,35 @@ function render(cameras) {
     }
     tdSel.appendChild(sel);
 
+    const tdEnc = document.createElement('td');
+    const encSel = document.createElement('select');
+    encSel.dataset.encId = cam.id;
+    // copybsf und (unsichtbar) mjpeg gelten beide als „MJPEG" in der UI.
+    const curEnc = cam.encode === 'h264' ? 'h264' : 'copybsf';
+    for (const o of ENCODE_OPTIONS) {
+      encSel.add(new Option(o.label, o.value, false, curEnc === o.value));
+    }
+    tdEnc.appendChild(encSel);
+
     const tdCur = document.createElement('td');
     tdCur.className = 'cur';
-    tdCur.textContent = isOff ? 'aus' : (cam.liveSize || '?');
+    tdCur.textContent = isOff ? 'aus' : `${cam.liveSize || '?'} · ${curEnc === 'h264' ? 'H.264' : 'MJPEG'}`;
 
-    tr.append(tdId, tdName, tdSel, tdCur);
+    tr.append(tdId, tdName, tdSel, tdEnc, tdCur);
     tbody.appendChild(tr);
   }
 }
 
 function collect() {
+  const encOf = (id) => {
+    const e = document.querySelector(`select[data-enc-id="${id}"]`);
+    return e ? e.value : undefined;
+  };
   return Array.from(document.querySelectorAll('select[data-id]')).map((sel) => {
     const id = sel.dataset.id;
-    if (sel.value === OFF) return { id, stream: false };
-    return { id, stream: true, liveSize: sel.value };
+    const encode = encOf(id);
+    if (sel.value === OFF) return { id, stream: false, ...(encode ? { encode } : {}) };
+    return { id, stream: true, liveSize: sel.value, ...(encode ? { encode } : {}) };
   });
 }