Custom Widget: Camera, clickable thumbnails that open a stream

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

1 Like

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.