Clickable Camera Widget

Updated the first post to have an improved widget that displays better across devices and now can switch an item or bring up all the controls for the camera with overlaid buttons.

1 Like

A few things.

  • Once you click to open the video, there doesn’t seem to be any way to close it on a PC. On my phone I found swiping away makes it cose. But on the PC there is no way to close the pop-up video I can see.
  • There are URL fields but no way to use an IP Camera Binding channel? Or am I missing something?

Click anywhere outside the pop up window and it will return back to your UI page.

Yes done deliberately so people who don’t want to use the binding can use it as well. It could also be static pictures and not even a camera. If you don’t want URLs you can use the PTZ version and modify it to your needs as that one does not use the URLs.

Code updated in the first post:

Now it has:

  • A small ear icon that appear when the camera hears noise.
  • A small eye icon when the camera sees movement.

For these to work you need to select the equipment that has been auto created from the thing with the motion and audio alarm channels ticked.

Sorry to drop into your thread (and it is a cross post), but I’d appreciate some advice on how to simply add a URL (http://192.168.xxx.xxx/api/camera/snapshot?width=1280&height=960) to a Image Item I’ve created in the OH3 UI.

I’ve had a play with “Add Metadata” --> “Image Card” as follows and the image does appear when I put in the URL but goes back to the Grey Box after I hit save.

Thanks! This worked for me:

component: oh-image-card
config:
  url: http://<OH IP>:<port>/ipcamera.mjpeg
slots: null

hey

can you explain me where the second screenshot is made? i cant add under sematic model the "metadata - image card. i dont have this in the list.

I tried to use this widget and It works, but the “height” on the page , before open the popup,
ist not the default height from the standard “widget”.
2021-01-24 10_12_51-openHAB

Any Idea ?

Thanks you

Regards

I have the same type of setup as your camera setting and I see you got it working with the ipcamera binding and image card. Did you just set up port and mjpegUrl or did you have to set up a serverPort and address it with the openhab ip as opposed to camera ip?

Did anyone of you tested these widgets on Android application?
I have tested it with simple mjpeg streams and it always is like below:


Tested on few streams.

EDIT:
It’s an Android app issue. In newest Beta it works better.

I’m also trying to use this widhet, but it doesn’t seems to work. I noticed that my url’s are not having any extension, can this be the issue?

Both urls are working when I paste them into a browser.

My guess is it is caused by embedded credentials not working in your browser, use the ipcamera binding.

But when I use the same url’s in my browser, this is working…
I also use the snapshot url in a sitemap in my old OH setup, and this is working fine.

Could someone help me in getting an IP camera configured and into the MainUI? I have an IPCamera binding Thing configured, and I created the custom widget from the original post. But I don’t know how to integrate that into my semantic model and Main UI. I’d like to just have the video show up when I click on the Garage location. I did this in OH2 by using the Video item in the sitemap but I’d like to make use of the semantic model and new UI. Thanks.

  1. Create a layout page and insert as many custom camera widgets as you wish.
  2. Edit the OVERVIEW page and insert a LABEL CELL.
  3. Edit the newly added label cell to have an ACTION to open a PAGE and select the layout page you created in step 1.

Now you can go to the overview page and click on CAMERAS and get all the cameras on the page at the same time.

As for clicking on a location I do not know of a way, I find it easier to open all cameras up as I can then see all areas/locations around my house at the same time.

1 Like

@wars - I’m not sure if this issue effects all embeds/widgets, but if you are using HTTP for the camera feed URL, make sure you are accessing the openHAB Main UI URL via HTTP too! Visa-Versa - if your camera is over HTTPS, use HTTPS for the Main UI. In my case, I had to use HTTP when using openHAB for the camera video feeds to work!

@d0t I was able to fix it for the snapshot: I had to remove my username & password from the url, if this is chached in my session, it works…
for the real stream, I’m still looking for a solution. My Hikvision camera’s are using a rstp stream, when I use the correct rstp url (with username & password) in VLC, this is working, but not in the widget.

@kristofejro do you still have the same issue in the Android app?

Yes, it’s still present on latest release.

yes i cant get this working in the app which is a shame, all ok via a browser