Custom Widget: Camera, clickable thumbnails that open a stream

matt1 · August 1, 2020, 2:14pm

There are 3 main camera widgets that I have created:

This one which is the easiest to setup due to no Pan Tilt Zoom (PTZ) controls to link.
One that matches this one that also includes PTZ controls that are only shown after you click on the thumbnail.Click here for forum thread
One that can not be clicked and displays the PTZ controls. Click here for forum thread

With this widget you can display a thumbnail of the video with a user selectable refresh rate to keep the network traffic low. This is a good thing when you fill the Habpanel screen with lots of cameras. Then when you click on the thumbnail, the video opens up into a larger screen and can be at a higher frames per second rate. Clicking again will close the popup video screen allowing another cameras thumbnail to be selected.

EDIT: Now you can…

Choose if you want the thumbnail to be jpg or mjpeg. I recommend autofps.mjpeg to be used.
Choose if you want the stream to be HLS or mjpeg. I recommend mjpeg be used from a camera that creates this natively this way you don’t get lag. If your camera does not do mjpeg, then check out snapshots.mjpeg

If your using the ipCamera binding you can use any of these urls if the ones from your camera do not work due to authentication issues.

All these are explained in more detail in the bindings readme file…

http://192.168.0.2:54000/ipcamera.jpg
http://192.168.0.2:54000/ipcamera.mjpeg
http://192.168.0.2:54000/autofps.mjpeg (excellent idea to use this for the thumbnail if the camera has motion)
http://192.168.0.2:54000/snapshots.mjpeg
http://192.168.0.2:54000/ipcamera.m3u8 (this is HLS)

This widget can be installed from the habpanel editor by clicking on ‘add widget’ then ‘get more’.

camera-clickable.widget.json (2.9 KB)

matt1 · June 28, 2020, 1:35am

Last night I updated this widget as I found that when you mixed this widget with the Clickable PTZ version you would get PTZ controls showing up wrongly as it was getting CSS code from each widget mixed up. Should be fixed if you download the widgets again and then check all the settings are still set correctly.

xsherlock · September 19, 2020, 8:51am

Wow , great widget, thank you very much I’m just testing it for a gate camera and the popup functionality is great.
Just my camera that is Ubiquity one has only 2 options for the output

jpeg snap that works quite well even at 500ms polling.
2 .RTSP stream with video (that I guess is imposible to display with Android chrome)

If chose a stream to mjpeg the tumbnail gets updated nicely @ 2Hz but if click to bring popup it will
just get last frame as it is jpeg and not

Can you maybe please give me some guidance how to modify the widget to enable refresh on the full screen also. That could be a 3rd option apart from HSL and mjpeg in the config.

matt1 · September 19, 2020, 9:40am

Use the ipCamera binding to create HLS or MJPEG for you.

MP05 · October 13, 2020, 5:35pm

Hello Matt,
The widget is exactly what I was looking for, thank you.
On PC-Browser, the widget works perfect.
On my Android phone in the Openhab-App HabPanel it does not show a thumbnail image nor a stream after clicking on it. Just the “missing image”-icon. In the “HabPanelViewer”-App it works. But that App is to slow to use it day by day and can’t be used in remote mode.
Do you have a solution how to get the stream in the Openhab-App?

Thanks a lot!!

matt1 · October 13, 2020, 7:17pm

Are you using embedded credentials? These look like http://user:password@ip:port/stream
If so that is the cause they were removed from many browsers as it is against best practice. Use the ip camera binding to solve.

MP05 · October 13, 2020, 7:43pm

I User the IP Camera Binding and got this (Photo) in Control in paperUI. I copied the URLs of Mjpeg and jpg into the Widget in HabPanel. It worked In pc-browser , but didn’t Work in the Android App. What is the difference?

matt1 · October 13, 2020, 9:03pm

Android app VS in a browser on android , have you tried both? I really have no idea, perhaps look at the HTML code of the widget, it may have an issue that android is more fussy on.

5l33ph34d · October 14, 2020, 7:11pm

Hello matt1, thank you very much for your plugin. I have just added an “Alarm”-Item and open the modal when the itemstate goes ON. It will be closed again when the itemstate of the alarm item goes OFF.

I use your plugin for my doorbell. When it rings, the modal opens. Just like the garden camera, which opens when a motion detector is triggered.

Maybe an idea for an extension of your plugin

matt1 · October 14, 2020, 7:13pm

Look at my other widget I think it’s called camera history. It can be used to auto open a pop up live view when the alarm goes off.

5l33ph34d · October 14, 2020, 7:31pm

Yes i saw it, but it don´t uses the bootstrap modal and looks not as good as the camera, clickable plugin. Also it does not work when the screen is scrolled down, the live overlay is always placed on top of site.

Your plugin “camera, clickable” is just the right minimal, good looking thing for my use case.

matt1 · October 16, 2020, 2:23am

Glad you like it. Feel free to combine both and create a widget that suits your use case And share it back. I don’t use habpanel and it was an experiment for me to see what was possible and I am not a HTML expert so hopefully someone with more skill can extend it into something better.