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.
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.
@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?
It can only if your browser supports HLS which can be usually added with a browser plugin.
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 …
@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 
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.
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
P.S.: All I’ve read, habpanel will still be part of v3.
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.
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.
hello, have some questions on this widget now that i am finishing setup.
I am on OH3/Habpanel/PRI4
I am using the widget to display 20 cameras on my tablets across the house. all cameras are coming from links created by ipcamera binding (including the screenshots). the ipcamera is used to connect to a hikvision hybrid nvr (analogue+IP) which doesnt offer mpeg so I am using HLS (I understand that ipcamera binding creates only HLS or “redirects” mpeg but doest create it.)
does anyone know how
. you can display on windows chrome desktop the hls stream in the pop up window of the widget? i.e. it works on android tablets as they natively support hls but not on my desktop. I am aware that i can view the direct url of the hls stream via extensions but i was looking for someone who managed to see it within habpanel/this widget.
I don’t use HLS in widgets (never tried) but it should work even if you have to use a javascript player to handle it. See this post in particular and also the first post in the thread.
Clickable Camera Widget - Add-on Marketplace / UI Widgets - openHAB Community
Thanks matt1 but I either dont understand or i havent explained well enough.
my various android tablets (which are HLS compliant) show the video on selection of the image of the camera in question. my desktop windows pc/chrome browser pops up the frame but no video is played. My assumption is that it is because chrome windows isnt hls compliant. the question is is there a way (via chrome extension) or other to have the hls stream in the pop up work on a windows pc.
it works for example if I use the HLS link provided by the binding as a direct url link because I have an extension called native hls player installed. but not in the pop up of the widget.
when you say java script player? do you mean install one on chrome for windows?
I do not know, it is not my strong area. I suggest you google “how to embed HLS” as you just need to follow any standard HTML way to get it to play in a website then copy that into a widget. Only it wont be a 1 hour simple thing to do I suspect. Things like this can take me 3+ days of experimenting to work out the best way and I do not have the time.
streaming - Playing m3u8 Files with HTML Video Tag - Stack Overflow
Hi @matt1,
I am using your widget. As mentioned in another thread I am able to see the cam pics if I am using the browser.
Using the openhab app on my tablet I am getting errors like below.
Do you have any clue why this happens?
When you use the app is is connecting locally or through the cloud? Also keep in mind that it may not be smart to setup habpanel as OH3 is moving in a new direction and does a similar/same thing in a new way. Best to invest your time in the newer ways as they will be supported longer into the future.
it is connected locally.
what do you mean by newer ways? HapPanel is still supported with OH3? Did I miss something?
V3’s whole goal was to replace all UI with a single consistent UI. Habpanel was left to make it backwards compatible. What will happen in OH4 is anyones guess.
Hello Matt.
I hope you can help me. I will use your widget for my Blink camera. The point is, that the biding works only over thumbnails (I refresh it every second). When I use your widget, the preview window works fine (i see my camera “thumbnail” image which be refreshed every second), but in the popup window I see only a freeze thumbnail image - is clear because your widget only support a video stream and not a picture with refresh function. So, my question would be, how I can change your code to get also in the popup window the same result like in the pre-view window? Thank you !!
Best regards
Hello all.
My camera is configured in openhab. HLS stream working (play in VLC). Camera clickable is in my HABpanel. Thumbnail working.
When click on thumbnail opens black image only. I try it in many browsers, many PCs. Everywhere open black image without HLS stream.
Can anyone help me? Thak you.
