ChK/appRobotWebcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

claude: webcam

Browse Source
This commit is contained in:
chk
2026-06-03 19:50:16 +02:00
parent 1a712ed877
commit 77c20bc3f1
9 changed files with 346 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
doc/01_WebcamRoadmap.md
View File

@@ -2,106 +2,89 @@
## Ziel ## Ziel
Sauberer, fokussierter Webcam-Streaming-Service als Docker-Container. Sauberer, fokussierter Webcam-Service als Docker-Container. Kein Robot-Control, kein
Kein Robot-Control, kein ArUco – nur zwei Verantwortlichkeiten: 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}`) 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 USB Kameras
│ │
▼ ▼
FFmpeg (v4l2 → MJPEG) go2rtc (Capture · H.264-Encode · WebRTC) ── intern, Port 1984 + UDP 8555
│ │
▼ ▼
Node.js Server (Express + ws) Node.js / Express ── öffentlich, Port 8444
├── WebSocket /ws/cam0, /ws/cam1 → Browser (Live-Stream) ├── / eigener Viewer (go2rtc <video-stream>-Component)
└── HTTP GET /api/snapshot/cam0 → Homing-Projekt (JPEG) ├── /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 | | Komponente | Wahl | Begründung |
|------------|------|------------| |------------|------|------------|
| Webserver | Node.js + Express | Wartbar, grosses Ecosystem, user-präferiert | | Streaming | go2rtc | WebRTC out-of-the-box, niedrige Latenz, internet-tauglich |
| WebSocket | `ws`-Library | Schlank, bewährt, kein Overhead | | Webserver | Node.js + Express | wartbar, user-präferiert |
| Video-Capture | FFmpeg | Stabil, flexibel, MJPEG-passthrough möglich | | Proxy | http-proxy-middleware | reicht HTTP + WebSocket transparent durch |
| Stream-Protokoll | MJPEG über WebSocket | Geringste Latenz, einfach im Browser | | Live-Protokoll | WebRTC (Fallback MSE/MJPEG) | niedrigste Latenz, skaliert über Internet |
| Snapshot-API | HTTP GET → raw JPEG | Einfachste Schnittstelle für Consumer | | Snapshot-API | HTTP GET → JPEG | einfachste Schnittstelle für Consumer |
| Container | `dockerfile_inline` in docker-compose | Kein separates Dockerfile, Portainer-tauglich | | Container | docker-compose, `configs` inline | kein Dockerfile-File, Portainer-tauglich |
--- ---
## Tasks ## 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 ### Phase 2 – Umstieg auf go2rtc / WebRTC ✅
- [x] `package.json` mit Abhängigkeiten (express, ws) - [x] go2rtc als Streaming-Backend (Kamera-Capture + WebRTC)
- [x] `docker-compose.yaml` mit `dockerfile_inline` (Node.js + FFmpeg, kein separates Dockerfile) - [x] go2rtc-Config in docker-compose eingebettet (`configs.content`)
- [x] `server.js` – HTTP + WebSocket-Server, Graceful Shutdown - [x] Node als Reverse-Proxy (`/api/ws`, `/api/frame.jpeg`, Player-Scripts)
- [x] `src/deviceDetect.js` – Kamera-Erkennung (env → by-id → /dev/video*) - [x] Eigener Viewer mit go2rtc `<video-stream>`-Component (Auto-Fallback)
- [x] `src/videoStream.js` – FFmpegStreamer (MJPEG splitten, WebSocket broadcast, Auto-Restart mit Backoff) - [x] Stabile Snapshot-API `/api/snapshot/cam{n}`
- [x] `src/snapshotService.js` – REST-Endpunkt: aktuellstes Frame aus laufendem Stream - [x] Auflösung fest 640×480 → Latenz „akzeptabel" (war vorher das Hauptproblem)
- [x] `public/index.html` + `public/viewer.js` – Basis-Viewer
### 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: ### Phase 4 – Internet-Härtung (offen, vor Produktiv-Schaltung)
- `/dev/video0` und `/dev/video2` im Container sichtbar - [ ] **TLS**: Reverse Proxy (Caddy/nginx/traefik) mit HTTPS vor Port 8444
- `group_add: video` greift (Zugriffsrechte) (WebRTC im Browser läuft über Internet zuverlässig nur im secure context)
- Fallback auf YUYV422 wenn MJPEG nicht unterstützt - [ ] **WebRTC-Candidate**: `stun:8555` testen; falls NAT-Probleme → feste public IP/Domain
- [ ] **Latenz messen** (Baseline): in der go2rtc-Config eintragen (`candidates: [robot.example.com:8555]`)
- Uhr auf Kamera richten, Screenshot → Differenz ablesen - [ ] **TURN**: nur falls reines STUN + Port-Forward UDP 8555 nicht reicht → coturn
- Zielwert: <100 ms Ende-zu-Ende (Kamera → Browser-Pixel) - [ ] **Zugriffsschutz**: Basic-Auth oder Token am Reverse Proxy (1–3 bekannte User)
- [ ] **Multi-Format-Fallback** implementieren: MJPEG → YUYV422 → RGB24 - [ ] **Firewall**: TCP 8444 + UDP 8555 forwarden; Port 1984 NICHT exponieren
- [ ] **Health-Endpunkt** `/health` erweitern: Kamera-Status, verbundene Clients, FPS
### Phase 3 – Latenz optimieren ### Phase 5 – Robustheit (optional)
- [ ] Kamera hot-plug: go2rtc-Verhalten bei Device-Verlust prüfen
- [ ] **FFmpeg-Flags tunen** für minimale Latenz: - [ ] Resource Limits dokumentieren (`mem_limit`, `cpus`)
``` - [ ] JSON-Logging
-fflags nobuffer -flags low_delay -probesize 32 -analyzeduration 0 - [ ] Snapshot-Metadaten / optionaler Webhook nach Snapshot
```
- [ ] **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`
--- ---
@@ -109,26 +92,21 @@ Drei Optionen (noch offen):
| Feature | appRobotVideoControls | appRobotWebcam | | Feature | appRobotVideoControls | appRobotWebcam |
|---------|-----------------------|----------------| |---------|-----------------------|----------------|
| Video-Streaming | ✅ | ✅ (verbessert) | | Video-Streaming | eigener FFmpeg-MJPEG/WS | go2rtc / WebRTC |
| Snapshots | ✅ (komplex, dual-pipe) | ✅ (HTTP REST, einfach) | | Snapshots | komplex (dual-pipe) | HTTP REST, einfach |
| Robot-Control (G-Code) | ✅ | ❌ anderes Projekt | | Robot-Control (G-Code) | ✅ | ❌ anderes Projekt |
| ArUco / Homing | ✅ (Python+OpenCV) | ❌ anderes Projekt | | ArUco / Homing | ✅ | ❌ anderes Projekt |
| Gamepad / Keyboard | ✅ | ❌ | | Separates Dockerfile | ✅ (OpenCV-Build) | ❌ (inline in compose) |
| HTTPS (self-signed) | ✅ | ❌ (Reverse Proxy empfohlen) |
| Separates Dockerfile | ✅ (gross, OpenCV-Build) | ❌ (inline in compose) |
--- ---
## Ports & Netzwerk ## Ports
| Service | Container-Port | Host-Port | | Dienst | Port | Exponiert? |
|---------|---------------|-----------| |--------|------|-----------|
| HTTP + WS | 8080 | 8444 | | Node Viewer + API + Signaling | TCP 8444 | ja (Firewall) |
| WebRTC Media | UDP 8555 | ja (Firewall) |
```bash | go2rtc HTTP/Debug-UI | TCP 1984 | nein (nur intern/LAN) |
# Netzwerk einmalig erstellen (falls noch nicht vorhanden)
docker network create appRobotNet
```
--- ---
@@ -137,16 +115,16 @@ docker network create appRobotNet
``` ```
appRobotWebcam/ appRobotWebcam/
├── src/ ├── src/
│ ├── deviceDetect.js Kamera-Erkennung (env → by-id → /dev/video*) │ └── snapshotService.js Snapshot-Router (proxied go2rtc /api/frame.jpeg)
│ ├── videoStream.js FFmpeg-MJPEG-Streamer + WebSocket-Broadcast
│ └── snapshotService.js REST-Router für /api/snapshot
├── public/ ├── public/
│ ├── index.html Basis-Viewer │ ├── index.html Viewer (lädt go2rtc <video-stream>)
│ └── viewer.js WebSocket-Client, MJPEG-Rendering │ └── viewer.js baut Kamera-Views, Auto-Fallback WebRTC→MSE→MJPEG
├── doc/ ├── doc/
│ ├── 01_WebcamRoadmap.md (diese Datei) │ ├── 01_WebcamRoadmap.md (diese Datei)
│ └── 05_OptionalToDo_roadmap.md Control-Optionen │ ├── 03_Protocoll_roadmap.md WebRTC⟷MJPEG-Vergleich (nachzuholen)
├── docker-compose.yaml Einzige Docker-Datei (dockerfile_inline) │ └── 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 ├── package.json
└── server.js Einstiegspunkt └── server.js Node-Einstiegspunkt
``` ```

100
doc/03_Protocoll_roadmap.md Normal file
View File

@@ -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.

78
docker-compose.yaml
View File

@@ -1,43 +1,65 @@
name: approbotwebcam name: approbotwebcam
# ── Portainer Web-Editor: dieses YAML einfügen, dann Deploy ───────────────── # ════════════════════════════════════════════════════════════════════════════
# FINALER WebRTC-AUFBAU – go2rtc (Streaming) + Node.js (Viewer/Proxy/API)
# ════════════════════════════════════════════════════════════════════════════
# #
# Voraussetzungen: # Portainer: Stack → Web editor → dieses YAML einfügen → Deploy.
# 1. Code auf dem Server (git clone / Synology Drive sync) # Vorher in Portainer → "Environment variables":
# 2. go2rtc.yaml muss im selben Verzeichnis liegen wie dieses File # APP_PATH = /absoluter/pfad/zum/appRobotWebcam (Code muss dort liegen)
# 3. In Portainer → "Environment variables":
# APP_PATH = /absoluter/pfad/zum/appRobotWebcam
# #
# Firewall: genau zwei Ports freigeben: # WICHTIG: Vor jedem Redeploy sicherstellen, dass server.js / public/ / src/
# TCP 8444 → HTTP (Viewer · Snapshot-API · WebRTC-Signaling) # auf dem Server unter APP_PATH aktuell sind (Synology-Sync abwarten).
# UDP 8555 → WebRTC Media (go2rtc direkt, kann nicht proxiert werden)
# #
# network_mode: host → beide Container teilen den Host-Netzwerk-Stack. # Firewall (Internet): TCP 8444 (Viewer+API+Signaling) · UDP 8555 (WebRTC-Media)
# Das ist für WebRTC entscheidend: go2rtc bekommt die echte Host-IP als # Port 1984 (go2rtc) NICHT nach aussen – läuft nur intern via localhost.
# ICE-Kandidat, nicht eine Docker-interne 172.x-Adresse. #
# ───────────────────────────────────────────────────────────────────────────── # 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: services:
# ── go2rtc: Kamera-Capture + H.264-Encoding + WebRTC ────────────────────── # ── go2rtc: Kamera-Capture · H.264-Encoding · WebRTC ──────────────────────
go2rtc: go2rtc:
image: ghcr.io/alexxit/go2rtc image: ghcr.io/alexxit/go2rtc
container_name: AppRobotGo2RTC container_name: AppRobotGo2RTC
restart: unless-stopped restart: unless-stopped
network_mode: host network_mode: host # echte Host-IP als WebRTC-ICE-Kandidat
devices: devices:
- /dev/video0:/dev/video0 - /dev/video0:/dev/video0
- /dev/video2:/dev/video2 - /dev/video2:/dev/video2
group_add: group_add:
- video - video
volumes: configs:
# go2rtc.yaml liegt im selben Verzeichnis wie docker-compose.yaml - source: go2rtc_yaml
- ${APP_PATH:-.}/go2rtc.yaml:/config/go2rtc.yaml:ro target: /config/go2rtc.yaml
# ── webcam: Node.js (Viewer · Snapshot-Proxy · WebRTC-Signaling-Proxy) ─── # ── webcam: Node.js (Viewer · /api/ws-Proxy · Snapshot-API) ──────────────
webcam: webcam:
build: build:
context: /tmp # Leerer Build-Context – Code kommt per Bind-Mount context: /tmp # Leerer Build-Context – Code kommt per Bind-Mount
dockerfile_inline: | dockerfile_inline: |
FROM node:lts-bookworm-slim FROM node:lts-bookworm-slim
WORKDIR /usr/src/app WORKDIR /usr/src/app
@@ -45,11 +67,23 @@ services:
image: approbotwebcam:latest image: approbotwebcam:latest
container_name: AppRobotWebcam container_name: AppRobotWebcam
restart: unless-stopped restart: unless-stopped
network_mode: host network_mode: host # erreicht go2rtc via localhost:1984
command: sh -c "npm install && node server.js" command: sh -c "npm install --omit=dev && node server.js"
volumes: volumes:
- ${APP_PATH:-.}:/usr/src/app - ${APP_PATH:-.}:/usr/src/app
environment: environment:
- NODE_ENV=production - NODE_ENV=production
- PORT=8444 - PORT=8444
- GO2RTC_URL=http://localhost:1984 - 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"
# ────────────────────────────────────────────────────────────────────────────────

27
go2rtc.yaml
View File

@@ -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: streams:
# FFmpeg öffnet die v4l2-Kamera und encodiert zu H.264 für WebRTC # device?-Form: go2rtc öffnet die v4l2-Kamera mit fixer Auflösung.
# Falls die Kamera kein MJPEG liefert: "#video=h264" durch "#video=mjpeg" oder "#video=vp8" ersetzen # #video=h264 → für WebRTC (transcodiert)
cam0: # #video=mjpeg → für MJPEG-Endpoint (Passthrough, niedrigste Latenz)
- "ffmpeg:/dev/video0#video=h264" cam0: "ffmpeg:device?video=/dev/video0&video_size=640x480#video=h264#video=mjpeg"
cam1: cam1: "ffmpeg:device?video=/dev/video2&video_size=640x480#video=h264#video=mjpeg"
- "ffmpeg:/dev/video2#video=h264"
# Simple Fallback-Form (ohne Auflösungs-Vorgabe), falls device? Probleme macht:
# cam0: "ffmpeg:/dev/video0#video=h264#video=mjpeg"
webrtc: webrtc:
ice_servers: listen: ":8555"
- 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"
api: api:
listen: ":1984" listen: ":1984"
# Erlaubt Requests vom Node.js-Proxy (gleicher Host, anderer Port)
origin: "*"
log: log:
level: info level: info

12
package.json
View File

@@ -1,17 +1,15 @@
{ {
"name": "approbotwebcam", "name": "approbotwebcam",
"version": "0.1.0", "version": "0.2.0",
"description": "Low-latency webcam streaming service for robot vision", "description": "Low-latency WebRTC webcam service (go2rtc + Node proxy) for robot vision",
"main": "server.js", "main": "server.js",
"scripts": { "scripts": {
"start": "node server.js", "start": "node server.js",
"dev": "nodemon server.js" "dev": "node server.js"
}, },
"dependencies": { "dependencies": {
"express": "^4.21.1" "express": "^4.21.1",
}, "http-proxy-middleware": "^3.0.3"
"devDependencies": {
"nodemon": "^3.1.7"
}, },
"engines": { "engines": {
"node": ">=20" "node": ">=20"

46
public/index.html
View File

@@ -6,51 +6,32 @@
<title>AppRobotWebcam</title> <title>AppRobotWebcam</title>
<style> <style>
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f0f0f; color: #e0e0e0; font-family: monospace; } body { background: #0f0f0f; color: #e0e0e0; font-family: monospace; }
header { header {
display: flex; align-items: center; gap: 12px; display: flex; align-items: center; gap: 12px;
padding: 10px 16px; padding: 10px 16px; background: #1a1a1a; border-bottom: 1px solid #333;
background: #1a1a1a;
border-bottom: 1px solid #333;
} }
h1 { font-size: 1rem; font-weight: normal; letter-spacing: 0.05em; } h1 { font-size: 1rem; font-weight: normal; letter-spacing: 0.05em; }
#statusText { font-size: 0.8rem; color: #888; margin-left: auto; } #statusText { font-size: 0.8rem; color: #888; margin-left: auto; }
#cameras { #cameras { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; }
display: flex; flex-wrap: wrap; gap: 12px;
padding: 12px;
}
.cam-box { .cam-box { position: relative; background: #000; border: 1px solid #2a2a2a; }
position: relative;
background: #000; /* go2rtc Web-Component */
border: 1px solid #2a2a2a; video-stream { display: block; width: 640px; height: 480px; background: #111; }
} video-stream video { width: 100%; height: 100%; object-fit: contain; }
.cam-box video { display: block; }
.cam-label { .cam-label {
position: absolute; top: 5px; left: 8px; position: absolute; top: 5px; left: 8px;
background: rgba(0,0,0,.65); background: rgba(0,0,0,.65); padding: 2px 7px; border-radius: 3px;
padding: 2px 7px; border-radius: 3px;
font-size: 0.72rem; color: #ccc; font-size: 0.72rem; color: #ccc;
} }
.cam-info { .cam-actions { position: absolute; top: 5px; right: 8px; display: flex; gap: 4px; }
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 button { .cam-actions button {
background: rgba(0,0,0,.65); color: #ccc; background: rgba(0,0,0,.65); color: #ccc; border: 1px solid #444;
border: 1px solid #444; padding: 2px 8px; padding: 2px 8px; font-family: monospace; font-size: 0.7rem;
font-family: monospace; font-size: 0.7rem;
cursor: pointer; border-radius: 3px; cursor: pointer; border-radius: 3px;
} }
.cam-actions button:hover { background: rgba(60,60,60,.8); } .cam-actions button:hover { background: rgba(60,60,60,.8); }
@@ -62,6 +43,9 @@
<span id="statusText">Verbinde...</span> <span id="statusText">Verbinde...</span>
</header> </header>
<div id="cameras"></div> <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> </body>
</html> </html>

169
public/viewer.js
View File

@@ -1,126 +1,25 @@
'use strict'; 'use strict';
const ICE_SERVERS = [ // go2rtc-Player-Modi in Fallback-Reihenfolge.
{ urls: 'stun:stun.l.google.com:19302' }, // webrtc zuerst (niedrigste Latenz), dann MSE, dann MJPEG – das verhindert
{ urls: 'stun:stun1.l.google.com:19302' }, // schwarze Seiten: schlägt WebRTC fehl, springt der Player automatisch weiter.
]; const MODE = 'webrtc,mse,mjpeg';
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');
function buildCamera(camId, container) {
const box = document.createElement('div'); const box = document.createElement('div');
box.className = 'cam-box'; box.className = 'cam-box';
const video = document.createElement('video'); // go2rtc Web-Component – verbindet sich relativ auf /api/ws (→ Node-Proxy)
video.autoplay = true; const stream = document.createElement('video-stream');
video.playsInline = true; stream.mode = MODE;
video.muted = true; stream.src = `/api/ws?src=${encodeURIComponent(camId)}`;
video.style.cssText = 'display:block;width:640px;height:480px;background:#111'; box.appendChild(stream);
box.appendChild(video);
const label = document.createElement('div'); const label = document.createElement('div');
label.className = 'cam-label'; label.className = 'cam-label';
label.textContent = camId; label.textContent = camId;
box.appendChild(label); box.appendChild(label);
const status = document.createElement('div');
status.className = 'cam-info';
box.appendChild(status);
const actions = document.createElement('div'); const actions = document.createElement('div');
actions.className = 'cam-actions'; actions.className = 'cam-actions';
const snapBtn = document.createElement('button'); const snapBtn = document.createElement('button');
@@ -135,32 +34,28 @@ function createCameraView(camId, container) {
box.appendChild(actions); box.appendChild(actions);
container.appendChild(box); container.appendChild(box);
startWebRTC(camId, video, status);
} }
// Kamera-Liste via /api/snapshot (proxied go2rtc /api/streams) async function init() {
log('init', 'Frage Kamera-Liste ab...'); // Warten bis die go2rtc-Web-Component definiert ist (sonst greift der .src-Setter nicht)
fetch('/api/snapshot') await customElements.whenDefined('video-stream');
.then(r => {
log('init', `/api/snapshot → HTTP ${r.status}`); const container = document.getElementById('cameras');
return r.json(); const statusText = document.getElementById('statusText');
})
.then(data => { let cams = ['cam0', 'cam1']; // Fallback
log('init', `Kameras: ${JSON.stringify(data.cameras)}`); try {
const container = document.getElementById('cameras'); const r = await fetch('/api/snapshot');
const cams = data.cameras ?? []; const d = await r.json();
if (cams.length === 0) { if (Array.isArray(d.cameras) && d.cameras.length) {
document.getElementById('statusText').textContent = 'Keine Kameras (go2rtc läuft?)'; cams = d.cameras.map(c => c.id);
console.warn('go2rtc meldet keine Streams. Prüfe http://server:1984');
return;
} }
cams.forEach(c => createCameraView(c.id, container)); } catch (err) {
document.getElementById('statusText').textContent = console.warn('Kamera-Liste nicht abrufbar, nutze Fallback:', err.message);
`${cams.length} Kamera${cams.length !== 1 ? 's' : ''} · WebRTC`; }
})
.catch(err => { cams.forEach(id => buildCamera(id, container));
console.error('[init] /api/snapshot Fehler:', err); statusText.textContent = `${cams.length} Kamera${cams.length !== 1 ? 's' : ''} · WebRTC`;
document.getElementById('statusText').textContent = 'API-Fehler – Fallback'; }
const container = document.getElementById('cameras');
['cam0', 'cam1'].forEach(id => createCameraView(id, container)); init();
});

76
server.js
View File

@@ -3,65 +3,57 @@
const express = require('express'); const express = require('express');
const http = require('http'); const http = require('http');
const path = require('path'); 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 GO2RTC_URL = process.env.GO2RTC_URL ?? 'http://localhost:1984';
const app = express(); 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)); 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 ──────────────────────────────────────────────────────────────────── // ── Health ────────────────────────────────────────────────────────────────────
app.get('/health', async (_req, res) => { app.get('/health', async (_req, res) => {
let go2rtcOk = false;
try { try {
const r = await fetch(`${GO2RTC_URL}/api/streams`); const r = await fetch(`${GO2RTC_URL}/api/streams`);
go2rtcOk = r.ok; const streams = r.ok ? await r.json() : {};
} catch { /* not reachable */ } res.json({ status: r.ok ? 'ok' : 'degraded', cameras: Object.keys(streams) });
} catch (err) {
res.json({ status: go2rtcOk ? 'ok' : 'degraded', go2rtc: go2rtcOk }); 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); const server = http.createServer(app);
server.on('upgrade', go2rtcProxy.upgrade); // WebSocket-Signaling durchreichen
server.listen(PORT, '0.0.0.0', () => { server.listen(PORT, '0.0.0.0', () => {
console.log(`AppRobotWebcam on http://0.0.0.0:${PORT}`); console.log(`AppRobotWebcam on http://0.0.0.0:${PORT}`);
console.log(` go2rtc backend: ${GO2RTC_URL}`); console.log(` go2rtc backend: ${GO2RTC_URL}`);
console.log(` WebRTC signaling proxy: POST /api/webrtc?src=cam0`); console.log(` Viewer: http://0.0.0.0:${PORT}/`);
console.log(` Snapshot API: GET /api/snapshot/cam0`); console.log(` Snapshot (API): http://0.0.0.0:${PORT}/api/snapshot/cam0`);
}); });
const shutdown = (sig) => { const shutdown = (sig) => {

31
src/snapshotService.js
View File

@@ -2,22 +2,21 @@
const express = require('express'); const express = require('express');
// Proxiert go2rtc-Frame-API als /api/snapshot/:id // Stabile Snapshot-Schnittstelle für das Homing-Projekt.
// GET /api/snapshot → JSON mit Kamera-Liste (von go2rtc /api/streams) // Entkoppelt den Consumer von go2rtc-Interna – proxied intern auf /api/frame.jpeg.
// GET /api/snapshot/cam0 → aktuelles JPEG-Frame (von go2rtc /api/frame?src=cam0) //
// 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) { function createSnapshotRouter(go2rtcUrl) {
const router = express.Router(); const router = express.Router();
router.get('/', async (_req, res) => { router.get('/', async (_req, res) => {
try { try {
const r = await fetch(`${go2rtcUrl}/api/streams`); 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(); const streams = await r.json();
res.json({ res.json({
cameras: Object.keys(streams).map(id => ({ cameras: Object.keys(streams).map(id => ({ id, url: `/api/snapshot/${id}` })),
id,
url: `/api/snapshot/${id}`,
})),
}); });
} catch (err) { } catch (err) {
res.status(503).json({ error: `go2rtc nicht erreichbar: ${err.message}` }); res.status(503).json({ error: `go2rtc nicht erreichbar: ${err.message}` });
@@ -27,17 +26,19 @@ function createSnapshotRouter(go2rtcUrl) {
router.get('/:id', async (req, res) => { router.get('/:id', async (req, res) => {
const { id } = req.params; const { id } = req.params;
try { 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) { 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()); const buf = Buffer.from(await upstream.arrayBuffer());
res.set({ res.set({
'Content-Type': 'image/jpeg', 'Content-Type': 'image/jpeg',
'Content-Length': buf.length, 'Content-Length': buf.length,
'Cache-Control': 'no-store', 'Cache-Control': 'no-store',
'X-Camera-Id': id, 'X-Camera-Id': id,
'X-Timestamp': new Date().toISOString(), 'X-Timestamp': new Date().toISOString(),
}); });
res.end(buf); res.end(buf);
} catch (err) { } catch (err) {