add quality slider to webcam and implemented H264

Overlord-Server/public/assets/webcam.js

@@ -15,6 +15,10 @@ import { encodeMsgpack, decodeMsgpack } from "./msgpack-helpers.js";
   const refreshCameras = document.getElementById("refreshCameras");
   const fpsInput = document.getElementById("fpsInput");
   const applyFps = document.getElementById("applyFps");
+  const qualitySlider = document.getElementById("qualitySlider");
+  const qualityValue = document.getElementById("qualityValue");
+  const codecH264 = document.getElementById("codecH264");
+  const codecMode = document.getElementById("codecMode");
   const viewerFps = document.getElementById("viewerFps");
   const statusEl = document.getElementById("streamStatus");
   const canvas = document.getElementById("frameCanvas");
@@ -34,6 +38,43 @@ import { encodeMsgpack, decodeMsgpack } from "./msgpack-helpers.js";
   let hasRenderedFrame = false;
   let drawPending = false;
 
+  const codecPrefKey = "webcamCodecPreferH264";
+  let prefersH264 = typeof VideoDecoder === "function";
+
+  const storedCodecPref = localStorage.getItem(codecPrefKey);
+  if (storedCodecPref === "0") {
+    prefersH264 = false;
+  } else if (storedCodecPref === "1") {
+    prefersH264 = typeof VideoDecoder === "function";
+  }
+
+  if (codecH264) {
+    codecH264.checked = prefersH264;
+    codecH264.disabled = typeof VideoDecoder !== "function";
+  }
+
+  function setCodecModeLabel(mode, detail) {
+    if (!codecMode) return;
+    const suffix = detail ? ` (${detail})` : "";
+    codecMode.textContent = `Codec: ${String(mode || "auto").toUpperCase()}${suffix}`;
+  }
+
+  setCodecModeLabel(prefersH264 ? "h264" : "jpeg", "preferred");
+
+  function updateQualityLabel(val) {
+    if (qualityValue) {
+      qualityValue.textContent = `${val}%`;
+    }
+  }
+
+  function pushQuality(val) {
+    const q = Number(val) || 90;
+    const codec = prefersH264 ? "h264" : "jpeg";
+    console.debug("webcam: pushQuality val=", val, "q=", q, "codec=", codec);
+    setCodecModeLabel(codec, "requested");
+    send("webcam_set_quality", { quality: q, codec });
+  }
+
   function buildScreenshotFilename() {
     const ts = new Date().toISOString().replace(/[:.]/g, "-");
     return `webcam-${clientId}-${ts}.jpg`;
@@ -336,6 +377,7 @@ import { encodeMsgpack, decodeMsgpack } from "./msgpack-helpers.js";
     ws.onopen = () => {
       requestCameraList();
       applyFpsSettings();
+      pushQuality(qualitySlider ? qualitySlider.value : 90);
       if (desiredStreaming) {
         send("webcam_start");
         setStreamState("starting", "Starting");
@@ -411,6 +453,27 @@ import { encodeMsgpack, decodeMsgpack } from "./msgpack-helpers.js";
     }
   });
 
+  if (codecH264) {
+    codecH264.addEventListener("change", function () {
+      prefersH264 = !!codecH264.checked && typeof VideoDecoder === "function";
+      localStorage.setItem(codecPrefKey, prefersH264 ? "1" : "0");
+      if (!prefersH264) {
+        destroyVideoDecoder();
+      }
+      if (qualitySlider) {
+        pushQuality(qualitySlider.value);
+      }
+    });
+  }
+
+  if (qualitySlider) {
+    updateQualityLabel(qualitySlider.value);
+    qualitySlider.addEventListener("input", function () {
+      updateQualityLabel(qualitySlider.value);
+      pushQuality(qualitySlider.value);
+    });
+  }
+
   applyFps.addEventListener("click", () => {
     applyFpsSettings();
   });

Overlord-Server/public/webcam.html

@@ -52,6 +52,29 @@
               <i class="fa-solid fa-sliders"></i><span>Apply</span>
             </button>
           </div>
+          <div
+            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
+          >
+            <label for="qualitySlider" class="text-slate-200">Quality</label>
+            <input
+              id="qualitySlider"
+              type="range"
+              min="10"
+              max="100"
+              step="5"
+              value="90"
+              class="accent-sky-400"
+            />
+            <span id="qualityValue" class="pill pill-ghost text-slate-100">90%</span>
+          </div>
+          <div
+            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
+          >
+            <label class="flex items-center gap-2 text-slate-200" title="Prefer H.264 when available; disable to force JPEG">
+              <input type="checkbox" id="codecH264" checked /> H.264
+            </label>
+            <span id="codecMode" class="pill pill-ghost text-slate-100">Codec: auto</span>
+          </div>
           <div class="flex items-center gap-2">
             <button id="startBtn" class="button primary">
               <i class="fa-solid fa-play"></i><span>Start</span>