Camera: Clickable thumbnail opens to a larger stream

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.

component: oh-swiper-card
config:
  pagination: true
  navigation: true
  params:
    slidesPerView: 1.5
slots:
  default:
    - component: oh-image-card
      config:
        url: https://source.unsplash.com/800x600/?frontdoor
        action: photos
        actionPhotos:
          - https://source.unsplash.com/800x600/?frontdoor
    - component: oh-image-card
      config:
        url: https://source.unsplash.com/800x600/?garage
    - component: oh-image-card
      config:
        url: https://source.unsplash.com/800x600/?garden

You can also have some fun with the SwiperJS parameters like the coverflow effect -(https://swiperjs.com/api/#coverflow-effect):

component: oh-swiper-card
config:
  pagination: true
  navigation: true
  params:
    effect: coverflow
    coverFlowEffect:
      rotate: 30
      slideShadows: false

coverflow

or the cube:

component: oh-swiper-card
config:
  pagination: true
  navigation: true
  params:
    effect: cube
    cubeEffect:
      shadow: false

cube

3 Likes

Nice Effects. Is there any way to remove the frame of the image (the space between wrapper and container I guess) ?

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.

Right and add noBorder & noShadow too (properties of all cards).

config:
  noBorder: true
  noShadow: true
  style:
    --f7-card-bg-color: transparent

Trying to get mjpeg video streams from cameras working in Main UI…

In OH2 sitemap I used:

Video url="http://user:pwd@192.168.0.15:80/video2.mjpg" encoding="mjpeg"

I can’t get it working in Main UI.
Error message: No compatible source was found for this media.

I tried the Video card as follows…

URL:
http://user:pwd@192.168.0.15:80/video2.mjpg

Type:
mjpg mjpeg video/mjpeg video/mjpg (none of these options worked)

Is there a way to get mjpeg stream working in Main UI?

I had luck using the “Image” card with a motion jpeg.

Which video settings does your motion jpeg stream have?

  • resolution
  • frames per second

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.

Now it works for me too with the Image card - I had to go with the IPcamera binding though.

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.