README: Problem und Lösung (private HTTP-Kameras per Relay + Zoraxy ins Internet), Frontend-Features aktualisiert

This commit is contained in:
Joachim Hummel committed 2026-10-17 21:34:41 +02:00
1 parent 1a9334b557
commit a7a6f17d0e
1 file changed
+25 -4
+25 -4
View File
@@ -2,6 +2,26 @@
![Webcam Server – Python MJPEG-Relay für ESP32-CAM und Raspberry-Pi-Kameras](picture/webcam-server.png)
## Das Problem – und die Lösung
Günstige Netzwerkkameras wie ESP32-CAM oder Raspberry-Pi-Kameras liefern ihren Stream nur per **unverschlüsseltem HTTP** und hängen im **privaten Netz** (z. B. `192.168.x.x`). Direkt ins Internet gehören sie nicht: kein HTTPS, keine Anmeldung, und schon wenige Zuschauer bringen einen ESP32 an seine Grenzen. Außerdem blockiert der Browser HTTP-Streams auf HTTPS-Seiten (Mixed Content).
Dieses Projekt löst das mit einem kleinen Relay:
```
Kamera (HTTP, privates Netz) → relay.py → Zoraxy (HTTPS, Login) → Browser im Internet
```
- Die Kameras bleiben im Heimnetz und sind von außen nie direkt erreichbar. Nach außen sichtbar ist nur der Relay.
- **HTTPS** übernimmt der Reverse Proxy [Zoraxy](https://github.com/tobychui/zoraxy) (Zertifikat, Domain). Der Relay selbst spricht nur HTTP.
- **Zugriffsschutz** per Basic-Auth (`AUTH_USER` / `AUTH_PASS`) oder in Zoraxy.
- Jede Kamera wird nur **einmal** abgeholt, egal wie viele Leute zuschauen.
- Das Web-Frontend zeigt alle Kameras mit Status, Foto, Vollbild und Start/Stop. Die Kamera-Einstellung (z. B. Auflösung) lässt sich dort ebenfalls auslösen, ohne dass der Browser die Kamera direkt ansprechen muss.
> Ohne `AUTH_USER` / `AUTH_PASS` (oder einen Login in Zoraxy) kann jeder, der die Adresse kennt, die Kameras sehen. Für den Betrieb im Internet also immer einen Login einrichten.
## Bestandteile
Zwei kleine Python-Tools für MJPEG-Kameras:
- **`relay.py`** – holt den MJPEG-Stream jeder Kamera nur **einmal** ab und stellt ihn für beliebig viele Zuschauer per HTTP bereit (gedacht für den Betrieb hinter einem Reverse Proxy wie Zoraxy).
@@ -92,10 +112,11 @@ journalctl -u webcam-relay -f
Das Frontend liegt in `frontend.html` (reines HTML/CSS/JS, keine Abhängigkeiten) und wird vom Relay ausgeliefert. Änderungen an der Datei wirken sofort, ohne Neustart.
- Raster mit Live-Streams aller Kameras, Klick auf den Namen öffnet die große Ansicht
- Statuspunkt und Hinweis „Kamera offline“ pro Kamera, automatisches Neuverbinden
- Buttons für Foto (Download) und Vollbild
- Hell/Dunkel passend zum System
- Dunkles Design, zwei Kameras nebeneinander (auf dem Handy untereinander); Klick auf den Namen öffnet die große Ansicht
- Statuspunkt und Hinweis „Kamera offline“ pro Kamera, automatisches Neuverbinden, Zähler „X / Y online“
- Buttons pro Kamera: Start, Stop, Reload, Foto (Download), Vollbild
- Toolbar: Alle starten / stoppen / neu laden
- „Setup“ pro Kamera und „Setup alle“, sofern `SETUP_<name>` konfiguriert ist; das Relay ruft die URL auf, der Browser muss die Kamera nicht erreichen
- Streams werden getrennt, solange der Tab im Hintergrund ist
- Alle Links sind relativ, daher funktioniert es auch unter einem Proxy-Prefix wie `/webcam/`