Autonome Webcam von A-Z

Im Rahmen meines Einsatzes bei VGT Visp Gewerbe und Tourismus hatte ich Gelegenheit, folgendes Projekt zu realisieren.

Seit 2021 fehlte Visp eine Webcam-Präsenz – ein sichtbares Defizit für den Auftritt nach aussen. Die Wiederherstellung dieser digitalen Visitenkarte hatte daher oberste Priorität. 

Wir evaluierten ein kosteneffizientes, robustes Outdoor-Webcam-System, das vollständig internetautonom arbeitet (4G), nahtlos mit dem bestehenden Web-Server kommuniziert, sowie den Ansprüchen entsprechende Bilder liefert. 

Die Installation, Integration und Inbetriebnahme konnten wir eigenständig durchführen. Das Setting kann beliebig skaliert werden (weitere Webcams/ Standorte, weitere Seiten).
Für die technische Integration entwickelte ich eine massgeschneiderte Backend-Lösung: Von der stabilen Serverkommunikation über das intelligente Management von Archiv- und Wetterdaten bis hin zu einer performanten API für die flexible Bildabfrage.

Zwischenzeitlich ist eine weitere Webcam dazugekommen: Eggerberg.

Beide Webcams werden auf den Seiten von VGT Visp Gewerbe und Tourismus dargestellt.

/

Software

Die Software habe ich front- und backend-seitig selbst programmiert.

Frontend (Browser)

Ich entwickelte mit Javascript den Frontend-Teil als Widget. Dieses kann mehrfach auf einer Seite (mit verschiedenen Webcams) angezeigt werden und ist auch in «fremde» Seiten einfach einzubinden ohne mit bestehenden Inhalten zu interferieren (Kapselung). Dabei folgt ich dem W3C Standard für HTML Custom Elements.

HTML Custom Elements bieten:

  • ✔ Native, standardisierte Technologie
  • ✔ Hohe Wiederverwendbarkeit
  • ✔ Kapselung durch Shadow DOM
  • ✔ Framework-Unabhängigkeit
  • ✔ Saubere Architektur für große Projekte

Sie sind besonders sinnvoll für:

  • Design-Systeme
  • UI-Bibliotheken
  • Micro-Frontends
  • Langfristige Enterprise-Anwendungen
Backend (Server)

Das Backend ist in PHP programmiert und besteht aus folgenden Komponenten:

  • API: Liefert dem Frontend Bild-Daten
  • ANONYM: Verpixelt Bilder nach Anforderung
  • CLEANUP: Periodischer Ausdünnungsprozess