That has been what I have been aiming towards for many months, however for a standard camera view it is better to use a URL, because many people will want to use Blue Iris, Motion, or any other number of software to process the camera with and not the binding. When it comes to PTZ or a history of recent recordings, then that is different and the binding has been written to leverage things that hopefully will come together over time.
Here’s another piece of code that is probably the closet I have come to what I want. It requires a hard coded widget for each camera on top of this. Still playing to see what the best method will be.
Cool, but you have the oh-image-card for that, it’s true that you don’t have a cell widget for images.
On a layout click Add Block, Add Row, Add Column, and then add an “Image Card” widget. Configure the item for it, if it’s an Image item it will display the image, if it’s a String it will assume it to be the URL
(you can also configure a fixed URL).
Below you have the “Action” settings, you can set it to “Open photo browser”:
The other settings are [object Object] in the screenshot below because I configured them with YAML (actionPhotos is an array and actionPhotoBrowserConfig an object):
If you specify multiple items in actionPhotos you’ll have a carousel and can swipe from one to the other (or use the arrows), and add captions if you like:
component: oh-image-card
config:
item: WebcamSalon_MJPEGURL
action: photos
actionPhotos:
- item: WebcamSalon_MJPEGURL
caption: Camera 1
- url: https://source.unsplash.com/random
caption: Random image
actionPhotoBrowserConfig:
theme: dark
@ysc
Thanks for the pointers, I had a few things go click in my head after seeing that. However I have 1 thing which I would like your advice on if it is a bug, code on the todo list, or a limitation on the way I am doing it…
The below widget fails if I try to use =props.streamURL but if I hardcode an URL in there in the format http://192.168.1.2:54321/snapshots.mjpeg it then works great. The thumbnailURL works as a props, so it is only the location of trying to use it inside the actionPhotos (array?).
This might even be a good candidate for a oh-swiper-card with several oh-image-card as slides.
It’s better to have all images of the same dimensions in this case, or it will look weird.
I have not tried but my guess is it should be possible if you use CSS to change the background color. To do this see the examples above at how CSS is used after style:
If the background color matches then you don’t see it.
Yes if you use the ipcamera binding and the widget in this post it should work. I can only guess that there may be an issue with embedded credentials not being supported. It was removed from the http spec due to security concerns and more and more software is removing it so hence the binding is needed.
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.
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.
