Klingel-Cam auf dem Wand-Tablet: Standbild + Live-Stream automatisch mit openHAB und Fully Kiosk

In einem früheren Beitrag habe ich gezeigt, wie man bei Klingeln ein Standbild per Telegram verschickt: Klingeling – wer ist da?.

Der nächste logische Schritt: Die Kamera direkt auf dem Wand-Tablet einblenden, das es genau dann das Klingelbild anzeigt, wenn geklingelt wird, und die Anzeige dann auch wieder automatisch zurückschaltet.

In diesem Beitrag zeige ich die komplette Umsetzung mit openHAB MainUI, Fully Kiosk und einer bestehenden Webcam-URL. Ergebnis: Beim Klingeln wird für eine definierte Zeit automatisch auf eine Kameraseite umgeschaltet. Links steht ein frisches Standbild, rechts der Live-Stream.

Voraussetzungen

openHAB MainUI
Tablet mit Fully Kiosk Browser
Erreichbare Kamera-URLs, z. B.:
- Standbild: http://CAM-IP:8080/?action=snapshot
- Live-Stream (MJPEG): http://CAM-IP:8080/?action=stream
Klingel-Event als Item (im Beispiel: KLINGEL_Press_Short)

1) Fully Kiosk vorbereiten

Was ist Fully Kiosk?
Fully Kiosk Browser ist eine Android-App für Tablet-Wanddisplays im Kiosk-Modus. Die App kann Webseiten dauerhaft anzeigen, den Bildschirm steuern und über eine integrierte Remote-API von außen Befehle annehmen (z. B. Bildschirm einschalten oder eine bestimmte URL laden). Genau diese API nutzen wir hier für die automatische Kameraumschaltung bei Klingeln.

In Fully Kiosk werden zwei Dinge benötigt:

Remote Admin / API aktivieren
Passwort setzen (wird in der openHAB-Rule verwendet)

Wichtige API-Kommandos (Beispiele):

http://TABLET-IP:2323/?cmd=screenOn&password=DEIN_PASSWORT
http://TABLET-IP:2323/?cmd=loadUrl&url=http%3A%2F%2FOPENHAB-IP%3A8080%2Fpage%2Fcam_eingang&password=DEIN_PASSWORT
http://TABLET-IP:2323/?cmd=loadStartURL&password=DEIN_PASSWORT

2) Konfigurierbare Items in openHAB

Damit das Verhalten im UI steuerbar bleibt, sind zwei Konfigurations-Items sinnvoll:

Switch configKlingelCamUmschaltungTablet "Automatische Cam-Umschaltung Tablet" (gruppeConfigKlingel, hauskonfiguration)
Number configKlingelCamAnzeigeSekunden "Dauer Kamera-Einblendung in Sekunden" (gruppeConfigKlingel, hauskonfiguration)

Zusätzlich wird ein internes Hilfs-Item für das Cache-Busting des Standbilds verwendet:

Number KlingelCamStandbildZeit "Klingel Cam Standbild Zeitstempel"

3) MainUI-Widget: links Standbild, rechts Live-Stream

Das Personal Widget widget_cam_stream ist zweigeteilt aufgebaut. Links wird das Snapshot-Bild geladen, rechts der Stream, was auf meinem horizontal ausgerichteten Tablet ganz gut passt:

uid: widget_cam_stream
tags:
  - camera
  - stream
props:
  parameters:
    - name: title
      label: Titel
      type: TEXT
      default: Eingang Cam
    - name: snapshotTitle
      label: Ueberschrift Standbild
      type: TEXT
      default: Standbild
    - name: streamTitle
      label: Ueberschrift Live-Stream
      type: TEXT
      default: Live-Stream
    - name: snapshotUrl
      label: Standbild URL
      type: TEXT
      default: http://CAM-IP:8080/?action=snapshot
    - name: streamUrl
      label: Live-Stream URL
      type: TEXT
      default: http://CAM-IP:8080/?action=stream
    - name: height
      label: Hoehe
      type: TEXT
      default: 72vh
component: f7-card
config:
  title: =props.title ? props.title : "Eingang Cam"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    width: "50"
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =props.snapshotTitle ? props.snapshotTitle : "Standbild"
                      - component: oh-image
                        config:
                          url: =(props.snapshotUrl ? props.snapshotUrl : "http://CAM-IP:8080/?action=snapshot") + "&t=" + ((items.KlingelCamStandbildZeit && items.KlingelCamStandbildZeit.state && items.KlingelCamStandbildZeit.state != "NULL" && items.KlingelCamStandbildZeit.state != "UNDEF") ? items.KlingelCamStandbildZeit.state : "0")
                          style:
                            width: 100%
                            height: =props.height ? props.height : "72vh"
                            object-fit: contain
                - component: f7-col
                  config:
                    width: "50"
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =props.streamTitle ? props.streamTitle : "Live-Stream"
                      - component: oh-image
                        config:
                          url: =props.streamUrl ? props.streamUrl : "http://CAM-IP:8080/?action=stream"
                          style:
                            width: 100%
                            height: =props.height ? props.height : "72vh"
                            object-fit: contain

Danach eine eigene Seite (z. B. cam_eingang) erstellen und dort das Widget einbinden.

4) Rule: Beim Klingeln automatisch umschalten

Die Rule schaltet das Tablet ein, setzt den Standbild-Zeitstempel, öffnet die Cam-Seite und springt nach Ablauf wieder auf die Start-URL zurück:

rule "Kiosk Tablet Klingel Cam Anzeige"
when
    Item KLINGEL_Press_Short changed from OFF to ON
then
    if (configKlingelCamUmschaltungTablet.state != ON) return

    var int camShowSeconds = 30
    try {
        if (configKlingelCamAnzeigeSekunden.state != NULL && configKlingelCamAnzeigeSekunden.state != UNDEF) {
            val int parsedShowSeconds = Double::parseDouble(configKlingelCamAnzeigeSekunden.state.toString).intValue
            if (parsedShowSeconds >= 5 && parsedShowSeconds <= 120) camShowSeconds = parsedShowSeconds
        }
    } catch (Throwable t) {
        // Fallback auf 30 Sekunden
    }

    // Fully Kiosk Daten anpassen
    val String kioskTabletRemoteBaseUrl = "http://TABLET-IP:2323/"
    val String kioskTabletRemotePassword = "DEIN_PASSWORT"
    val String kioskTabletCamPageUrl = "http://OPENHAB-IP:8080/page/cam_eingang"

    sendHttpGetRequest(kioskTabletRemoteBaseUrl + "?cmd=screenOn&password=" + kioskTabletRemotePassword, 8000)

    // Standbild aktualisieren
    KlingelCamStandbildZeit.postUpdate("" + now.toInstant.toEpochMilli)

    val String encodedCamUrl = java.net.URLEncoder::encode(kioskTabletCamPageUrl, "UTF-8")
    sendHttpGetRequest(kioskTabletRemoteBaseUrl + "?cmd=loadUrl&url=" + encodedCamUrl + "&password=" + kioskTabletRemotePassword, 8000)

    createTimer(now.plusSeconds(camShowSeconds), [ |
        sendHttpGetRequest(kioskTabletRemoteBaseUrl + "?cmd=loadStartURL&password=" + kioskTabletRemotePassword, 8000)
    ])
end

5) Bedienung in der Hauskonfiguration

In meinem Fall hängt die Steuerung in der MainUI unter Hauskonfiguration:

Automatische Cam-Umschaltung Tablet (AN/AUS)
Dauer Kamera-Einblendung in Sekunden (5 bis 120)

Damit kann man die Funktion ohne Rule-Änderung direkt im Alltag anpassen.

Fazit

Die Kombination aus Klingel-Event, Fully Kiosk API und einer dedizierten Cam-Seite ist für ein Wand-Tablet eine sehr robuste Lösung. Besonders praktisch ist die Trennung in Standbild und Live-Stream: Das Standbild ist sofort da, der Stream läuft parallel für die Live-Sicht.

Klingel-Cam auf dem Wand-Tablet: Live-Stream automatisch anzeigen mit openHAB und Fully Kiosk