Setup-Button pro Kamera: Relay ruft SETUP_<name>-URL auf

.env.example

@@ -4,6 +4,9 @@ CAMERA_cam1=http://IP:PORT/pfad
 CAMERA_cam2=http://IP:PORT/pfad
 CAMERA_cam3=http://IP:PORT/pfad
 
+# Optional: Konfigurations-URL pro Kamera (Button "Setup" im Frontend), z.B. ESP32-CAM Auflösung
+#SETUP_cam1=http://IP/control?var=framesize&val=11
+
 PORT=8000
 # Optional: Login (nur sinnvoll mit HTTPS in Zoraxy)
 #AUTH_USER=joachim

README.md

@@ -29,6 +29,7 @@ cp .env.example .env
 | Variable | Beschreibung | Standard |
 |---|---|---|
 | `CAMERA_<name>` | Stream-URL einer Kamera, eine Zeile pro Kamera. Der Name wird Teil der URL (`/cam1/`). | – (mindestens eine nötig) |
+| `SETUP_<name>` | Optional: Konfigurations-URL der Kamera (z. B. `http://IP/control?var=framesize&val=11`). Das Relay ruft sie auf, wenn im Frontend „Setup“ geklickt wird. | – |
 | `PORT` | Port, auf dem der Relay lauscht | `8000` |
 | `AUTH_USER` / `AUTH_PASS` | Optional: Basic-Auth. Nur sinnvoll mit HTTPS (z. B. in Zoraxy). | aus |
 

frontend.html

@@ -44,6 +44,7 @@ main{padding:22px;max-width:1800px;margin:0 auto}
 .btn svg{width:15px;height:15px}
 .btn:hover{filter:brightness(1.15);box-shadow:0 4px 16px rgba(139,92,246,.4)}
 .btn:active{transform:scale(.95)}
+.btn:disabled{opacity:.7;cursor:default}
 .btn.alt{background:#222a3a;box-shadow:none;color:var(--fg);border:1px solid var(--line)}
 .btn.alt:hover{border-color:var(--accent);color:var(--accent)}
 .focus .tile.big .view{aspect-ratio:auto;height:min(75vh,56.25vw)}
@@ -81,6 +82,7 @@ const el = (tag, cls, text) => {
 };
 const ICONS = {
   cam: '<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/>',
+  cog: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>',
   full: '<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>',
   off: '<path d="M1 1l22 22M21 21H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3m3-3h6l2 3h4a2 2 0 0 1 2 2v9.34m-7.72-2.06a4 4 0 1 1-5.56-5.56"/>'
 };
@@ -88,7 +90,7 @@ const icon = k => { const s = document.createElementNS("http://www.w3.org/2000/s
 const btn = (label, ic, fn, cls) => { const b = el("button", "btn" + (cls ? " " + cls : "")); b.title = label; b.append(icon(ic), el("span", "", label)); b.onclick = fn; return b; };
 
 // mode: "live" = MJPEG-Stream, "thumb" = Einzelbild im Intervall
-function makeTile(name, mode) {
+function makeTile(name, mode, hasSetup) {
   const t = el("figure", "tile");
   const view = el("div", "view");
   const img = el("img");
@@ -109,6 +111,21 @@ function makeTile(name, mode) {
     a.click();
   });
   const full = btn("Vollbild", "full", () => document.fullscreenElement ? document.exitFullscreen() : t.requestFullscreen(), "alt");
+  if (hasSetup) {
+    const setup = btn("Setup", "cog", async () => {
+      setup.disabled = true;
+      const label = setup.querySelector("span");
+      try {
+        const r = await fetch(ROOT + name + "/setup", { method: "POST" });
+        if (!r.ok) throw new Error(r.status);
+        label.textContent = "Gesendet ✓";
+      } catch (e) {
+        label.textContent = "Fehler ✗";
+      }
+      setTimeout(() => { label.textContent = "Setup"; setup.disabled = false; }, 2500);
+    }, "alt");
+    actions.append(setup);
+  }
   actions.append(snap, full);
   cap.append(el("span", "dot"), link, state, el("span", "sp"), actions);
   t.append(view, cap);
@@ -145,20 +162,22 @@ function setOnline(o, on) {
   o.online = on;
 }
 
-function build(names) {
+function build(cams) {
+  const names = cams.map(c => c.name);
+  const setupOf = n => cams.find(c => c.name === n).setup;
   order = names;
   app.replaceChildren();
   if (CURRENT && names.includes(CURRENT)) {
     app.className = "focus";
-    const big = makeTile(CURRENT, "live");
+    const big = makeTile(CURRENT, "live", setupOf(CURRENT));
     big.classList.add("big");
     app.append(big);
     const strip = el("div", "strip");
-    names.filter(n => n !== CURRENT).forEach(n => strip.append(makeTile(n, "thumb")));
+    names.filter(n => n !== CURRENT).forEach(n => strip.append(makeTile(n, "thumb", false)));
     if (strip.children.length) app.append(strip);
   } else {
     const grid = el("div", "grid");
-    names.forEach(n => grid.append(makeTile(n, "live")));
+    names.forEach(n => grid.append(makeTile(n, "live", setupOf(n))));
     app.append(grid);
   }
 }
@@ -170,7 +189,7 @@ async function poll() {
     const data = await r.json();
     banner.style.display = "none";
     const names = data.cameras.map(c => c.name);
-    if (names.join() !== order.join()) build(names);
+    if (names.join() !== order.join()) build(data.cameras);
     data.cameras.forEach(c => setOnline(tiles[c.name], c.online));
     const n = data.cameras.filter(c => c.online).length;
     document.getElementById("count").innerHTML = "<b>" + n + "</b> / " + data.cameras.length + " online";

relay.py

@@ -8,11 +8,14 @@ Endpunkte:
   /status.json           Status aller Kameras (vom Frontend abgefragt)
   /<name>/stream.mjpg    Livestream (multipart/x-mixed-replace)
   /<name>/snapshot.jpg   aktuelles Einzelbild
+  POST /<name>/setup     ruft die in SETUP_<name> hinterlegte Kamera-URL auf
   /stream.mjpg           Alias für die erste Kamera (Abwärtskompatibilität)
   /health                Status aller Kameras
 
 Konfiguration über die Datei .env (neben relay.py) oder Umgebungsvariablen:
   CAMERA_<name>=<url>     eine Zeile pro Kamera, z.B. CAMERA_cam1=http://...
+  SETUP_<name>=<url>      optional: Konfigurations-URL der Kamera (Button "Setup" im Frontend),
+                          z.B. http://IP/control?var=framesize&val=11
   PORT        (default 8000)
   AUTH_USER / AUTH_PASS   optional: Basic-Auth (nur sinnvoll mit HTTPS in Zoraxy)
 """
@@ -45,6 +48,8 @@ load_env(os.path.join(os.path.dirname(os.path.abspath(__file__)), ".env"))
 CAMERAS = {k[7:].lower(): v for k, v in os.environ.items() if k.startswith("CAMERA_") and v}
 if not CAMERAS:
     raise SystemExit("Keine Kameras konfiguriert: CAMERA_<name>=<url> in .env eintragen")
+SETUPS = {k[6:].lower(): v for k, v in os.environ.items()
+          if k.startswith("SETUP_") and v and k[6:].lower() in CAMERAS}
 PORT = int(os.environ.get("PORT", "8000"))
 AUTH_USER = os.environ.get("AUTH_USER", "")
 AUTH_PASS = os.environ.get("AUTH_PASS", "")
@@ -148,7 +153,7 @@ class Handler(BaseHTTPRequestHandler):
         if not parts:
             return self.send_bytes(200, "text/html; charset=utf-8", page("", ""))
         if parts == ["status.json"]:
-            body = json.dumps({"cameras": [{"name": n, "online": is_online(h)}
+            body = json.dumps({"cameras": [{"name": n, "online": is_online(h), "setup": n in SETUPS}
                                            for n, h in hubs.items()]}).encode()
             return self.send_bytes(200, "application/json", body)
         if parts == ["stream.mjpg"] or parts == ["snapshot.jpg"]:
@@ -170,6 +175,21 @@ class Handler(BaseHTTPRequestHandler):
             return self.stream(hub)
         self.send_bytes(404, "text/plain", b"Nicht gefunden")
 
+    def do_POST(self):
+        if not self.authorized():
+            return self.send_bytes(401, "text/plain", b"Login erforderlich",
+                                   {"WWW-Authenticate": 'Basic realm="Webcam"'})
+        parts = [p for p in self.path.split("?")[0].split("/") if p]
+        if len(parts) != 2 or parts[1] != "setup" or parts[0] not in SETUPS:
+            return self.send_bytes(404, "text/plain", b"Nicht gefunden")
+        try:
+            r = requests.get(SETUPS[parts[0]], timeout=5)
+            r.raise_for_status()
+        except requests.RequestException as ex:
+            print(f"{parts[0]}: Setup fehlgeschlagen: {ex}", flush=True)
+            return self.send_bytes(502, "text/plain", b"Kamera nicht erreichbar")
+        self.send_bytes(200, "text/plain", b"ok")
+
     def stream(self, hub):
         self.send_response(200)
         self.send_header("Content-Type", f"multipart/x-mixed-replace; boundary={BOUNDARY}")