Custom Widget: Camera, clickable thumbnails that open a stream

Tags: #<Tag:0x00007f616ee12798> #<Tag:0x00007f616ee12680>

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… (excellent idea to use this for the thumbnail if the camera has motion) (this is HLS)

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

camera-clickable.widget.json (3.3 KB)


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.