Oh-image-card with authorization?

Add-ons UIs
1

Hi All,
I’m fighting with some new tablet layout where I need to have a camera view. With my Ubiquity cams it is easy as they have an option to return the snapshot anonymously. But this time I have cam that does have a url but it needs basic auth (like an old school popup with user and pass)
That image comes broken in Layout. If I login in another tab and refresh it will work for like a day but then again requires auth.

Is there a way to pass that the annoying cam?

image
image858×598 46.2 KB

http://user:pass@ip does not work (that only works on the desktop Edge, but not on the kiosk tablet)

TIA

Maciej

component: f7-card
config:
  noBorder: true
  style:
    --f7-card-content-padding-horizontal: 0px
    --f7-card-content-padding-vertical: 0px
    --f7-card-header-padding-horizontal: 08px
    height: auto
    width: 100%
slots:
  default:
    - component: oh-image-card
      config:
        noBorder: true
        refreshInterval: 2000
        style:
          height: 335px
          margin-bottom: 0% !important
          margin-top: 0% !important
          width: 630px
        url: ='http://192.168.1.105/images/snapshot.jpg?refresh='
          + Math.floor(Math.random() * 1000)
2

If this is a camera supported by the IP Camera add-on, you can configure a Thing for the camera. The IP camera starts up its own snapshot server which you can then use on your sitemap.

The Thing will have the authentication as part of how it connects to the camera and MainUI will get the snapshot from the binding without authentication being required.

3

Ok thanks for quick reply,

I tried to avoid the ip cam binding, as documentation is uber complicated for it and I cant make any sense from the forum examples. (l just need the snapshot at 0.5 fps , without fancy controls and recording on the OH server )

But it looks i will have to dig in …

The camera is standard generic ONVIF and it even generates nice mjpeg stream at low res over rtsp @ 1fps so maybe I can use that

4

It’s mainly complicated because there is so much variety in IP cameras out there and in order to cover a large chunk of them means there’re lots of different parameters and edge cases.

But once you narrow down to what you specifically need (generic ONVIF generic RTSP should work just fine) most of the other stuff becomes irrelevant and what you need to focus on is relatively straight forward.

For a generic ONVIF camera you pretty much only need to the IP address and ONVIF port. The defaults should be OK for everything else.

Same for rtsp.

5

Ok so it wasn’t that hard but still the documentation is misleading in 2 momenst.
It does not say straight forward that you do not need ffmpeg when your cam is providing mjpeg in rtsp stream. so my config in the end looks super simple

Thing ipcamera:generic:gate
[
    ipAddress="192.168.1.105",
	username="admin",
	password="pass",
    gifPreroll=1,
    snapshotUrl="http://192.168.1.105/images/snapshot.jpg",
    mjpegUrl="rtsp://admin:pass@192.168.1.105/media1/video1"
]

second point is that doc then says that snapshot is available @
http://openhabIP:8080/ipcamera/{cameraUID}/ipcamera.jpg

and my uid is

image

But in fact the screenshot is available at

http://192.168.1.73:8080/ipcamera/gate/ipcamera.jpg

so you i needed just the name “gate” not the whole UID.

that gets me a working widget with oh-image-card

uid: widget_12299368f0
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: May 8, 2025, 9:11:36 PM
component: f7-card
config:
  noBorder: true
  style:
    --f7-card-content-padding-horizontal: 0px
    --f7-card-content-padding-vertical: 0px
    --f7-card-header-padding-horizontal: 08px
    height: auto
    width: 100%
slots:
  default:
    - component: oh-image-card
      config:
        noBorder: true
        refreshInterval: 2000
        style:
          height: 335px
          margin-bottom: 0% !important
          margin-top: 0% !important
          width: 630px
        url: ='http://192.168.1.73:8080/ipcamera/gate/ipcamera.jpg'

that is good for 0.5 FPS on tablet (POE , wall mounted based on the RK 3544) . on a PC client will do 1 FPS as the stream.

I dont know how to make a widget that would use the mjpeg stream as source, if I put it into the image url it does not work http://192.168.1.73:8080/ipcamera/gate/ipcamera.mjpeg (doesn’t work with VLC neither)
But I see http://192.168.1.73:8080/ipcamera/gate/snapshots.mjpeg streams to VLC @ 1FPS

On the tablet that is not any faster also doing barely 0.5 FPS.

Does that mean that I use snapshots as input or the rtsp stream?
how can I use this native mjpeg rtsp in the widget?

Maciej

6

You’d need to use the oh-video-card. oh-video-card - Video Card | openHAB

You can specify either an Item with the URL to the video stream or hard code the URL.

7

That gives no compatible source and it streams with VLC

image
image917×356 13.8 KB

8

What is the http URL (no rtsp) to the mjpeg video?
Your oh-image control is able to show mjpeg video without any further configuration or binding like this

- component: oh-image
  config:
    url: http://192.168.1.105/path-to-mjpeg

(no refreshInterval required)
Works on my side.
What is the error message if you open your browser’s console?

9

The oh-image streams

http://192.168.1.73:8080/ipcamera/gate/snapshots.mjpeg

with out the problem but the performance on average tablet is only so so…

The binding documentation also mentions there should be a stream with address.

http://192.168.1.73:8080/ipcamera/gate/ipcamera.mjpeg
In my case that one does not work. should it?

I try understand what is the diffrence here, is that source of them ? one is based on putting together snapshots jpg from the camera and other is based on the rstp mjpeg sream?

0.5 fps is quite meh , I was hoping that I can pull a 2fps on that tablet to ma the view more usable.

10

If I understand correctly, this is your http stream of the binding which uses an rtsp stream of the camera.

What I meant is you need to look up in the camera‘s documentation and find the native http (non rtsp) mjpeg video stream.