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-sipclientcomponent.
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).
Code
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 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.