From f618fdac4283598280a9b90707189bc498c82181 Mon Sep 17 00:00:00 2001
From: chk <79915315+ChKendel@users.noreply.github.com>
Date: Wed, 3 Jun 2026 21:07:46 +0200
Subject: [PATCH] Claude: Fix

---
 doc/01_WebcamRoadmap.md | 24 +++++++----
 public/viewer.js        | 93 +++++++++++++++++++----------------------
 server.js               | 55 +++++++++++++-----------
 3 files changed, 90 insertions(+), 82 deletions(-)

diff --git a/doc/01_WebcamRoadmap.md b/doc/01_WebcamRoadmap.md
index ea5a983..a61d288 100644
--- a/doc/01_WebcamRoadmap.md
+++ b/doc/01_WebcamRoadmap.md
@@ -72,13 +72,23 @@ Encoding, ICE-Negotiation, robuster Client mit Auto-Fallback (WebRTC→MSE→MJP
 - [ ] Prüfen ob Kamera natives H.264 liefert (`v4l2-ctl --list-formats`) → kein Re-Encode
 
 ### Phase 4 – Internet-Härtung (offen, vor Produktiv-Schaltung)
-- [ ] **TLS**: Reverse Proxy (Caddy/nginx/traefik) mit HTTPS vor Port 8444
-      (WebRTC im Browser läuft über Internet zuverlässig nur im secure context)
-- [ ] **WebRTC-Candidate**: `stun:8555` testen; falls NAT-Probleme → feste public IP/Domain
-      in der go2rtc-Config eintragen (`candidates: [robot.example.com:8555]`)
-- [ ] **TURN**: nur falls reines STUN + Port-Forward UDP 8555 nicht reicht → coturn
-- [ ] **Zugriffsschutz**: Basic-Auth oder Token am Reverse Proxy (1–3 bekannte User)
-- [ ] **Firewall**: TCP 8444 + UDP 8555 forwarden; Port 1984 NICHT exponieren
+- [ ] **TLS via Caddy** – empfohlen, weil Caddy WebSocket-Proxy nativ und zuverlässig kann.
+      Aktuell verbindet Browser `/api/ws` direkt zu go2rtc Port 1984.
+      Caddy bündelt beides hinter einer Domain:
+      ```
+      robot.example.com {
+        handle /api/ws*           { reverse_proxy localhost:1984 }
+        handle /api/stream*       { reverse_proxy localhost:1984 }
+        handle /video-*.js        { reverse_proxy localhost:1984 }
+        handle                    { reverse_proxy localhost:8444 }
+      }
+      ```
+      Danach: viewer.js `go2rtcPort` auf 443 (wss://) setzen, Node GO2RTC_PORT=443.
+- [ ] **WebRTC-Candidate**: `stun:8555` testen; bei NAT-Problemen → feste IP/Domain:
+      `candidates: [robot.example.com:8555]` in go2rtc-Config
+- [ ] **TURN**: nur wenn STUN + UDP 8555 nicht reicht (sehr restriktive NATs)
+- [ ] **Zugriffsschutz**: Basic-Auth am Caddy (1–3 bekannte User)
+- [ ] **Firewall**: TCP 443 (Caddy) + UDP 8555 (WebRTC) forwarden; 1984 + 8444 intern
 
 ### Phase 5 – Robustheit (optional)
 - [ ] Kamera hot-plug: go2rtc-Verhalten bei Device-Verlust prüfen
diff --git a/public/viewer.js b/public/viewer.js
index ea43023..ddc3e73 100644
--- a/public/viewer.js
+++ b/public/viewer.js
@@ -1,38 +1,37 @@
 'use strict';
 
 // go2rtc Player-Modi – Fallback-Reihenfolge: WebRTC → MSE → MJPEG
-// Schlägt WebRTC fehl, springt der go2rtc-Player automatisch weiter → kein schwarzes Bild.
 const MODE = 'webrtc,mse,mjpeg';
 
-// ── Logging-Hilfe (sichtbar in Browser DevTools → Console) ──────────────────
-const LOG_PREFIX = '[AppRobotWebcam]';
-function log(cam, msg)       { console.log(`${LOG_PREFIX}[${cam}] ${msg}`); }
-function warn(cam, msg)      { console.warn(`${LOG_PREFIX}[${cam}] ⚠ ${msg}`); }
-function logErr(cam, msg, e) { console.error(`${LOG_PREFIX}[${cam}] ✗ ${msg}`, e ?? ''); }
+// ── Logging (sichtbar in Browser DevTools → Console → F12) ──────────────────
+const P = '[WebcamViewer]';
+const log  = (c, m)    => console.log(`${P}[${c}] ${m}`);
+const warn = (c, m)    => console.warn(`${P}[${c}] ⚠ ${m}`);
+const err  = (c, m, e) => console.error(`${P}[${c}] ✗ ${m}`, e ?? '');
 
 // ── Kamera-View aufbauen ─────────────────────────────────────────────────────
-function buildCamera(camId, container) {
-  const wsUrl = `/api/ws?src=${encodeURIComponent(camId)}`;
-  log(camId, `View erstellt  mode=${MODE}  ws=${wsUrl}`);
+function buildCamera(camId, go2rtcPort, container) {
+  // WebSocket direkt zu go2rtc – kein Proxy-Zwischenschritt, garantiert stabil.
+  // Protokoll: ws:// auf LAN (http). Für Internet mit TLS wird aus ws: wss: (Caddy).
+  const wsUrl = `ws://${location.hostname}:${go2rtcPort}/api/ws?src=${encodeURIComponent(camId)}`;
+  log(camId, `View erstellt  mode="${MODE}"  ws=${wsUrl}`);
 
   const box = document.createElement('div');
   box.className = 'cam-box';
 
-  // go2rtc Web-Component: verbindet sich via WebSocket zu /api/ws (→ Node-Proxy → go2rtc)
   const stream = document.createElement('video-stream');
   stream.mode  = MODE;
 
-  // Events vom inneren <video>-Element abfangen (capture-Phase = vor dem Element selbst)
-  stream.addEventListener('play',    () => log(camId, '▶ spielt'), true);
-  stream.addEventListener('playing', () => log(camId, '▶ Bild läuft'), true);
-  stream.addEventListener('pause',   () => warn(camId, 'pausiert'), true);
-  stream.addEventListener('stalled', () => warn(camId, 'stalled (kein Daten)'), true);
-  stream.addEventListener('waiting', () => warn(camId, 'waiting (Buffer leer)'), true);
-  stream.addEventListener('error',   (e) => logErr(camId, 'Video-Fehler', e), true);
+  // Events vom inneren <video>-Element (capture-Phase)
+  stream.addEventListener('play',    ()  => log(camId,  '▶ spielt'),              true);
+  stream.addEventListener('playing', ()  => log(camId,  '▶ Bild läuft'),          true);
+  stream.addEventListener('pause',   ()  => warn(camId, 'pausiert'),              true);
+  stream.addEventListener('stalled', ()  => warn(camId, 'stalled (keine Daten)'), true);
+  stream.addEventListener('waiting', ()  => warn(camId, 'waiting (Buffer leer)'), true);
+  stream.addEventListener('error',   (e) => err(camId,  'Video-Fehler', e),       true);
 
-  // src setzen startet die Verbindung
-  log(camId, `Verbinde → ${wsUrl}`);
-  stream.src = wsUrl;
+  log(camId, `Verbinde WebSocket → ${wsUrl}`);
+  stream.src = wsUrl;   // setzt den VideoRTC-src und startet die Verbindung
 
   box.appendChild(stream);
 
@@ -46,9 +45,9 @@ function buildCamera(camId, container) {
   const snapBtn = document.createElement('button');
   snapBtn.textContent = 'Snapshot';
   snapBtn.onclick = () => {
-    log(camId, 'Snapshot download →  /api/snapshot/' + camId);
+    log(camId, `Snapshot → /api/snapshot/${camId}`);
     const a = document.createElement('a');
-    a.href     = `/api/snapshot/${camId}`;
+    a.href = `/api/snapshot/${camId}`;
     a.download = `${camId}_${Date.now()}.jpg`;
     a.click();
   };
@@ -56,61 +55,55 @@ function buildCamera(camId, container) {
   box.appendChild(actions);
 
   container.appendChild(box);
-
-  // Connectivity-Check nach 5 s: ist die WebSocket-Verbindung zu /api/ws nutzbar?
-  setTimeout(async () => {
-    try {
-      const r = await fetch('/api/streams');
-      if (r.ok) {
-        const d = await r.json();
-        log(camId, `go2rtc streams: ${Object.keys(d).join(', ')}`);
-      } else {
-        warn(camId, `/api/streams → HTTP ${r.status}`);
-      }
-    } catch (err) {
-      logErr(camId, '/api/streams nicht erreichbar (Proxy defekt?)', err);
-    }
-  }, 5000);
 }
 
 // ── Init ─────────────────────────────────────────────────────────────────────
 async function init() {
   log('init', 'Starte...');
 
+  // go2rtc-Port vom Server holen (damit er nicht im Client hart kodiert ist)
+  let go2rtcPort = 1984;
+  try {
+    const r = await fetch('/config.json');
+    const d = await r.json();
+    go2rtcPort = d.go2rtcPort ?? 1984;
+    log('init', `go2rtc WebSocket-Port: ${go2rtcPort}`);
+  } catch (e) {
+    warn('init', `Konnte /config.json nicht laden, nehme Port ${go2rtcPort}`);
+  }
+
   // go2rtc Web-Component muss geladen sein bevor .src gesetzt wird
   try {
     await customElements.whenDefined('video-stream');
     log('init', '<video-stream> definiert');
-  } catch (err) {
-    logErr('init', '<video-stream> nicht geladen – /video-stream.js erreichbar?', err);
+  } catch (e) {
+    err('init', '<video-stream> nicht geladen – /video-stream.js erreichbar?', e);
     return;
   }
 
   const container  = document.getElementById('cameras');
   const statusText = document.getElementById('statusText');
 
-  // Kamera-Liste von go2rtc (via Node-Proxy /api/snapshot → /api/streams)
+  // Kamera-Liste von go2rtc via Node-Proxy
   let cams = [];
   try {
     const r = await fetch('/api/snapshot');
     log('init', `/api/snapshot → HTTP ${r.status}`);
-    const d = await r.json();
-    if (Array.isArray(d.cameras) && d.cameras.length) {
-      cams = d.cameras.map(c => c.id);
-      log('init', `Kameras: ${cams.join(', ')}`);
-    } else {
-      warn('init', 'Keine Kameras in go2rtc – Config OK? go2rtc läuft?');
+    if (r.ok) {
+      const d = await r.json();
+      cams = (d.cameras ?? []).map(c => c.id);
+      log('init', `Kameras: ${cams.join(', ') || '(keine)'}`);
     }
-  } catch (err) {
-    logErr('init', '/api/snapshot nicht erreichbar – Fallback cam0/cam1', err);
+  } catch (e) {
+    err('init', '/api/snapshot Fehler – Fallback', e);
   }
 
   if (cams.length === 0) {
-    warn('init', 'Fallback: nehme cam0 und cam1 an');
+    warn('init', 'Fallback auf cam0, cam1');
     cams = ['cam0', 'cam1'];
   }
 
-  cams.forEach(id => buildCamera(id, container));
+  cams.forEach(id => buildCamera(id, go2rtcPort, container));
   statusText.textContent = `${cams.length} Kamera${cams.length !== 1 ? 's' : ''} · WebRTC`;
   log('init', 'Fertig');
 }
diff --git a/server.js b/server.js
index 2fe88ee..62d2980 100644
--- a/server.js
+++ b/server.js
@@ -6,16 +6,17 @@ const path    = require('path');
 const { createProxyMiddleware } = require('http-proxy-middleware');
 const { createSnapshotRouter }  = require('./src/snapshotService');
 
-const PORT       = parseInt(process.env.PORT ?? '8444', 10);
-const GO2RTC_URL = process.env.GO2RTC_URL ?? 'http://localhost:1984';
+const PORT        = parseInt(process.env.PORT       ?? '8444', 10);
+const GO2RTC_URL  = process.env.GO2RTC_URL ?? 'http://localhost:1984';
+const GO2RTC_PORT = parseInt(process.env.GO2RTC_PORT ?? '1984', 10);
 
 const app = express();
 
-// ── Stabile Snapshot-API (vor dem Proxy registrieren!) ────────────────────────
-// Für das Homing-Projekt: GET /api/snapshot/cam0 → JPEG
+// ── 1. Eigene Endpunkte (vor dem Proxy registrieren) ─────────────────────────
+
+// Stabile Snapshot-API für das Homing-Projekt
 app.use('/api/snapshot', createSnapshotRouter(GO2RTC_URL));
 
-// ── Health ────────────────────────────────────────────────────────────────────
 app.get('/health', async (_req, res) => {
   try {
     const r = await fetch(`${GO2RTC_URL}/api/streams`);
@@ -26,36 +27,40 @@ app.get('/health', async (_req, res) => {
   }
 });
 
-// ── Reverse-Proxy zu go2rtc ───────────────────────────────────────────────────
-// Reicht nur die nötigen Pfade durch (go2rtc-Admin bleibt damit unerreichbar):
-//   /api/ws          WebRTC/MSE-Signaling (WebSocket)
-//   /api/frame.jpeg  Snapshots
-//   /api/stream.*    MJPEG/MP4-Fallback
-//   /api/streams     Stream-Liste
-//   /video-rtc.js, /video-stream.js   go2rtc's offizieller Player
+// Gibt dem Viewer die go2rtc-Port-Nummer mit – Browser baut WS direkt zu go2rtc.
+// Trennung HTTP (Node) / WebSocket (go2rtc) ist sauberer als ein fragiler WS-Proxy.
+app.get('/config.json', (_req, res) => {
+  res.json({ go2rtcPort: GO2RTC_PORT });
+});
+
+// ── 2. HTTP-Proxy zu go2rtc (nur für Script-Dateien und API ohne WS) ─────────
+// /api/ws NICHT hier proxy-en – das macht der Browser direkt (s. viewer.js).
 const go2rtcProxy = createProxyMiddleware({
-  target:       GO2RTC_URL,
+  target:      GO2RTC_URL,
   changeOrigin: true,
-  ws:           true,
-  // Plain-Pfade: dürfen NICHT mit Globs (/api/**) gemischt werden (HPM v3)
-  // '/api' matcht alles ab /api/... — kein ** nötig
-  pathFilter:   ['/api', '/video-rtc.js', '/video-stream.js'],
-  logger:       console,
+  pathFilter:  ['/api', '/video-rtc.js', '/video-stream.js'],
+  logger:      console,
+  on: {
+    error: (err, req, res) => {
+      console.error('[HPM] proxy error:', err.message);
+      if (!res.headersSent) res.status(502).json({ error: 'go2rtc nicht erreichbar' });
+    },
+  },
 });
 app.use(go2rtcProxy);
 
-// ── Eigener Viewer ─────────────────────────────────────────────────────────────
+// ── 3. Statische Dateien (eigener Viewer) ────────────────────────────────────
 app.use(express.static(path.join(__dirname, 'public')));
 
-// ── Start ───────────────────────────────────────────────────────────────────────
+// ── Start ─────────────────────────────────────────────────────────────────────
 const server = http.createServer(app);
-server.on('upgrade', go2rtcProxy.upgrade);   // WebSocket-Signaling durchreichen
 
 server.listen(PORT, '0.0.0.0', () => {
-  console.log(`AppRobotWebcam on http://0.0.0.0:${PORT}`);
-  console.log(`  go2rtc backend:  ${GO2RTC_URL}`);
-  console.log(`  Viewer:          http://0.0.0.0:${PORT}/`);
-  console.log(`  Snapshot (API):  http://0.0.0.0:${PORT}/api/snapshot/cam0`);
+  console.log(`AppRobotWebcam  http://0.0.0.0:${PORT}`);
+  console.log(`  go2rtc HTTP:  ${GO2RTC_URL}`);
+  console.log(`  go2rtc WS:    ws://[host]:${GO2RTC_PORT}  (Browser verbindet direkt)`);
+  console.log(`  Viewer:       http://0.0.0.0:${PORT}/`);
+  console.log(`  Snapshot API: http://0.0.0.0:${PORT}/api/snapshot/cam0`);
 });
 
 const shutdown = (sig) => {