MainUI: Interface for video doorbell (DoorBird)

New version coming soon!

Dear community,

I want to share my landscape-oriented page for my DoorBird video doorbell (I am sure this can be adjusted for any video doorbell) with you:

User interface

I can access the liveview in a tabbed page (source code at the bottom), the liveview image is the page background and the control is a custom widget:

The vertical widget provides a button pressed and a motion state icon at the top.
A click on opens a page, which might show historic images like last motion or last time button was pressed.
Next to the status, three control buttons follow:
One to enable the lights (e.g. infrared lights of DoorBird video doorbells).
Another to talk to the doorbell/door intercom using the oh-sipclient component.
This component allow the MainUI to act as a SIP Client (SIP over WebSocket/WebRTC, which is not supported by all routers — for Fritz!Box, see webrtc-sip-gw).
And the last button to energize the relay and open the door.

The second and the third widget are controls for the door relay (to open the door) and for the nightvision lights. Both widgets open a popup to confirm your action (for security reasons, especially for the relay!!):

Code

This setup consists of two pages and one custom widget:

Page: Doorbell

This page provides the liveview and the controls:

# description: This page provides an interface for your DoorBird video doorbell in landscape orientation.
# description: You may use this in a tabbed page.
config:
  label: Türklingel
  style:
    background: url(http://<doorbird-ip>/bha-api/video.cgi?http-user=<doorbird-username>&http-password=<doorbird-password>)
    background-position: center
    background-size: cover
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  medium: "20"
                  small: "30"
                  width: "40"
                slots:
                  default:
                    - component: widget:doorbell
                      config:
                        buttonPressed: Doorbell_Pressed
                        domain:
                        doorRelay: Doorbell_Tueroeffner
                        enableTones: false
                        hideCallerId: true
                        light: Doorbell_Light
                        motion: Doorbell_Motion
                        page: Doorbell_History
                        password:
                        phonebook:
                        sipAddress:
                        username:
                        websocketUrl:
masonry: []
grid: []
canvas: []

Also on GitHub: https://github.com/florian-h05/openhab-conf/blob/main/UI/pages/Doorbell.yaml

Page: Doorbell_History

This page provides the two history images (doorbell rang & motion):

# description: This page provides the history images for the popup from the Doorbell page.
config:
  label: Türklingel
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  medium: "50"
                  width: "100"
                slots:
                  default:
                    - component: oh-image-card
                      config:
                        item: Doorbell_PressedImage
                        lazy: true
                        lazyFadeIn: false
                        noBorder: true
                        noShadow: true
                        title: Letztes Klingeln
              - component: oh-grid-col
                config:
                  medium: "50"
                  width: "100"
                slots:
                  default:
                    - component: oh-image-card
                      config:
                        item: Doorbell_MotionImage
                        lazy: true
                        lazyFadeIn: false
                        noBorder: true
                        noShadow: true
                        title: Letzte Bewegung
masonry: null
grid: []
canvas: []

Also on GitHub: https://github.com/florian-h05/openhab-conf/blob/main/UI/pages/Doorbell_History.yaml

Widget: doorbell

This widget provides the current state as well as the light and the relay control and the speach button.

# description: Doorbell control widget (designed for DoorBird video doorbells) with light and relay control as well as speach support (SIP Client), button pressed and motion state
# author: Copyright (c) 2022 Florian Hotze under MIT License
uid: doorbell
tags:
  - florianh-widgetset
props:
  parameters:
    - context: item
      description: Door light Item
      label: Light
      name: light
      required: true
      type: TEXT
    - context: item
      description: Door relay Item to open door
      label: Door relay
      name: doorRelay
      required: true
      type: TEXT
    - context: item
      description: Doorbell pressed Item
      label: Doorbell pressed
      name: buttonPressed
      required: true
      type: TEXT
    - context: item
      description: Motion Item
      label: Motion
      name: motion
      required: true
      type: TEXT
    - description: History popup page
      label: History page
      name: page
      required: false
      type: TEXT
    - description: Full URL of the WebRTC SIP websocket, e.g. 'wss://siphost:8089/ws' or relative path, e.g. '/ws', for Android & iOS, you need wss (WebSocket secured)
      label: WebSocket URL
      name: websocketUrl
      required: true
      type: TEXT
    - description: SIP Domain
      label: Domain
      name: domain
      required: true
      type: TEXT
    - description: SIP Username
      label: Username
      name: username
      required: true
      type: TEXT
    - description: SIP Password
      label: Password
      name: password
      required: true
      type: TEXT
    - description: Enable ringback and ring tone. Might cause issues with your browser, so that your call fails
      label: Enable tones
      name: enableTones
      required: false
      type: BOOLEAN
    - description: Hides the username of the remote party on incoming call
      label: Hide caller id
      name: hideCallerId
      required: false
      type: BOOLEAN
    - description: Single SIP Address (phone number) for a single call target or a comma-separated list of 'phoneNumber=name' for multiple call targets
      label: Phonebook
      name: phonebook
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 27, 2022, 5:55:23 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 320px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
    width: 150px
slots:
  content:
    - component: oh-icon
      config:
        color: "=items[props.buttonPressed].state === 'ON' ? (themeOptions.dark === 'dark' ? 'white' : 'black') : 'gray'"
        height: 40
        icon: "=items[props.buttonPressed].state === 'ON' ? 'f7:bell' : 'f7:bell_slash'"
    - component: oh-icon
      config:
        color: "=items[props.motion].state === 'ON' ? (themeOptions.dark === 'dark' ? 'white' : 'black') : 'gray'"
        height: 40
        icon: f7:arrow_right_arrow_left
        style:
          right: -35px
    - component: oh-button
      config:
        action: popup
        actionModal: ='page:' + props.page
        style:
          height: 65px
          left: 0px
          position: absolute
          top: 0px
          width: 100%
        visible: "=props.page ? true : false"
    - component: oh-button
      config:
        action: command
        actionCommand: ON
        actionItem: =props.light
        iconF7: lightbulb_fill
        iconSize: 60
        style:
          --f7-button-height: 60
          margin-bottom: 10px
          margin-top: 20px
    - component: oh-sipclient
      config:
        domain: =props.domain
        enableTones: =props.enableTones
        enableVideo: false
        iconSize: 90
        password: =props.password
        phonebook: =props.phonebook
        username: =props.username
        websocketUrl: =props.websocketUrl
    - component: oh-button
      config:
        action: options
        actionItem: =props.doorRelay
        actionOptions: ON=Tür öffnen
        iconF7: lock_open_fill
        iconSize: 60
        style:
          --f7-button-height: 60
          margin-top: 10px

Download latest version from GitHub: openhab-conf/control.yaml at main · florian-h05/openhab-conf · GitHub

PLEASE NOTE: This example relies on the oh-sipclient component, which is not available to all users yet. (PR merged and included since openHAB 3.4.0.M1 Milestone Build, but in no stable build yet.)

You need to configure the DoorBird IP and the username/password for the video as well as the SIP Client in the Doorbell page. If you use some other doorbell, you just need to insert an MJPEG stream url of the live view!

The Item names are required to be the same as in the examples from the DoorBird binding documentation! If you have other ones, just change them in the page/widget.

If you don‘t want to set DoorBird credentials in the url of the background image (what I do not want to do for some security reasons), you can use a reverse proxy to proxy the MJPEG stream:

Proxy MJPEG stream with NGINX

Just add this location block to your NGINX config and set the value of the Authorization header:

# DoorBird live view (MJPEG)
    location = /doorbird-liveview {
        limit_except GET {
          deny all;
        }                   
        proxy_pass                           http://192.168.178.3/bha-api/video.cgi;
        #include                              /etc/nginx/proxy-headers.conf;
        proxy_set_header                     Authorization "Basic <base64-encoded username:password>";
    } 

You can then access the MJPEG stream under https://<your-openhab-ip>/doorbird-liveview, use this url in the Doorbell page.

5 Likes

@hmerk You‘ll surely be interested in this update:
I updated this example, using the new oh-sipclient component from my PR.

1 Like

Very useful! Any possibility to use it wirh Habpanel?

As far as I know, no. I have not been using HABPanel for a year, so I am not sure what it is capable of regarding the design of such UIs.
For sure I can say, that HABpanel has support for custom widgets, but has no support for SIP (can’t find any SIP library in the package.json).