Custom Widget: Camera, clickable thumbnails that open a stream

Apps & Services HABPanel
,
Tags: #<Tag:0x00007f175a427f20> #<Tag:0x00007f175a4278b8>
#1

UPDATE: If using openHAB 3, see this newer main UI widget Building a OH3 camera widget - Add-ons / UIs - openHAB Community

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.

cameras
cameras1275Ɨ846 254 KB

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)

7 Likes
How to display RTSP streams from IP Cameras in Openhab and Habpanel (Linux only)
IpCamera: New IP Camera Binding
Custom Widget: Camera with PTZ controls
Static Image URL not displaying in Android OpenHAB app (HABPanel)
Image not getting displayed in habpanel viewer
Popup by clicking on small image to get the live stream of ubiquiti video camera
Custom Widget: Camera, clickable + PTZ controls
How do i add rtsp wyze cam?
#2

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.

#3

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

  1. 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.

1 Like
#4

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

#5

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!!

#6

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.

#7

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?

Screenshot_20201013-213925
Screenshot_20201013-213925864Ɨ1824 106 KB

#8

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.

#9

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 :slight_smile:

image
image1012Ɨ803 63.7 KB

#10

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.

#11

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.

#12

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.

#13

@matt1 can the widget alone play a .m3u8 feed from my shinobi server?Need to have ffmpeg installed on my pi?Or it only can play .m3u8 from the ipcamera binding?

#14

It can only if your browser supports HLS which can be usually added with a browser plugin.

#15

i see ,i tested with fully kiosk browser (on android) and works well ,when i click the widget hls starts to play ,I tested on chrome on my windows pc but it doent play when i click the widget,just a black window appears.I installed and test 2-3 hls chrome plugins and i see that on a chrome tab the .m3u8 link plays well.What do u think i am doing wrong?
edit: also tested chrome android and hls playback in widget is working ok ā€¦

#16

@matt1: First of all thank you very much for the widget - great idea!
However, I am struggling with the same as @xsherlock. Could you provide a third option beside HLS and mjpeg for the stream which is still a jpg snap but with the option to set a higher (or actually a different) refresh rate?

E.g. thumbnail snap is refreshed every 2s and after clicking it will be refreshed every 250ms which is more or less like a live stream.

Is there any chance that you may add this to the widget? Thanks in advance :slight_smile:

#17

Have you tried using the ipcamera binding to create either stream? If your camera can go as low as 250ms between snapshots and do it reliably Then that is a good way as it will be lower cpu load compared to creating mjpeg if your camera does not support it. To compare My odroid n2+ can create a mjpeg stream that is 1080p and 20frames a second with a 15% cpu load but many slower arm based processors can not come close to that.

I donā€™t want to spend my time looking into what your suggesting, Not because it is not a good idea, but I have limited Spare time. From memory I may have tried that and found it did not work on my cameras that are limited to 1 pic per second. I also do not use habpanel myself, this was just to help others get a start on creating some widgets.

The other thing to consider is that openHAB V3 has a new UI that may make this widget a dinosaur if someone creates a widget for it.

#18

Yes, Iā€™ve tried the ipcamera binding but I did not get my cameras running. Actually they are not listed as reported as working also.

I thought it should be quite easy to change the widget as I proposed since the code is already existing as it is the same as for the thumbail which needs just to be copied for the clicked view (instead of mjpeg stream) - but to be perfectly honest these are just some thoughts of someone who has not really an idea of it.

Since you are not interested in working on the widget anymore, is there at least a chance that you give us some explanation / hints of the code that maybe someone else (like me) may give it a try? As far as I understand this was your intention - helping others get starting on creating widgets. Maybe you got me :slight_smile:

P.S.: All Iā€™ve read, habpanel will still be part of v3.

#19

I can only give you a rough idea as I have not played with HABpanel in 6 months. The normal Image widget is what this widget uses to do what your wanting. So load up a normal IMAGE widget and look at its options that it has and compare them to the ng-init line in my widget. You will need to create a new ng-init line that loads up the parameters that you want to use. Once you have done that your half way there.

Yes HABpanel and also Sitemaps are still there and means that when you upgrade, all your current work can still be used. However think of the new UI as a new improved version of HABpanel. It is a lot more powerful from what little I have played with it. I really donā€™t know much about it at this point so I dont know if the new UI does everything better, or if HABpanel still fills a need other than backwards compatibility.

#20

Hi Christian,
do you mind sharing your widget? I was about to do the same before I found your post.

Thank you very much in advance.