MainUI: Interface for video doorbell (DoorBird)

Dear community,

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

User interface

The user interface consists of a very special widget that covers the full page and provides a responsive doorbell UI for different screen sizes and screen orientations. It was designed for use with doorbirds, but I am sure you can easily use it with other doorbells as well.

Most importantly, it displays the live video, provides a speech connection to the doorbell, and is able to open the door.

Depending on the screen orientation, the control elements are either displayed in an vertical arrangement on or besides the upper left of the live view, or displayed in a horizonal arrangement at the bottom of the screen.

Control Elements

At the top or at the left of the control elements, are the doorbell pressed (bell icon) and motion (arrows icon) indicators are located.
A click on the bell icon opens a popup of the doorbellEvent widget displaying the image and the timestamp the last time the doorbell was pressed.
A click on the motion indicator (arrows icon) does the same for the last motion event.

Next to the status, three control buttons follow:

  • One to enable night vision or lights (e.g. infrared lights of DoorBird video doorbells).
  • Another to talk to the person ringing at your door, using the oh-sipclient component.
    This component allows 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 one, which is a lock opened icon, to open the door (usually by energizing a relay).


You find the code for this UI together with some instructions on my GitHub: openhab-conf/UI/widgets at main · florian-h05/openhab-conf · GitHub.

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                 ;
        #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.


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