Main UI - Not displaying images or videos - OH3

Hi everyone,

OS: Ubuntu 20.04.3
OH: 3.1.0

I’m experiencing something weird with the new Main UI vs Basic UI. I want to display images and videos from a ip camera that I have setup. I’ve tried connecting to the camera both directly and using the IP Camera binding just to check that nothing weird is going on there.

My problem is that both connecting directly and via the IP Camera thing works perfectly in Basic UI (both browser and Android app) and never works in Main UI (neither browser or Android). I either get a blank card or a broken image icon.

If I set the url for the image to something static online, say https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png it works.

Does Main UI and Basic UI resolve internal adresses differently or am I missing something here?

Sitemap definition:
Video url=“http://192.168.13.12:7836/snapshots.mjpeg” encoding=“mjpeg”
Works in browser and android app.

Main UI card:
component: oh-image-card
config:
url: http://192.168.13.12:7836/snapshots.mjpeg
slots: null
Doesn’t work in browser or android app

Main UI card:
component: oh-image-card
config:
url: https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png
slots: null
Works in browser and android app

I’ve tried with jpg, mjpeg and hls. They all excibit the same behavior, works in sitemap but not in cards.

I ran some tests with HabPanel and that shows the same behavior as Main UI, the images or videos are not displaying. Scratching my head here :slight_smile:

Have you tried using relative url rather than the full URL? So leave off http://ip part

Had a similar problem with floorplans.

Can’t really remove them completely since I need to specify the port, I did try removing http:// though and I also tried with localhost:7836/snapshots.mjpeg but neither worked.

IP/name resolution might be a weird part since it’s probably done “behind the scenes”, maybe it is url parsing but I’ve seen a lot of examples that look very similar to mine that seem to work.

Are you acces openHAB via http or https? Might be https in a https session?

Have you tried the link with /static/?
Works for me.

http://yourIP:8080/static/Picture.png

Both the camera and the thing use http (non-secure) and with the android app I can connect locally over http and remotely over https. Unfortunately this makes no difference.

Another weird test. I tried setting up a small shell script that uses wget to get the static camera image and put that in my nginx public html folder. If I then use an image like this in Main UI it works:

component: oh-image-card
config:
url: https://my-public-dns-name/oh/snap/snap.jpeg

That refers to an openhab web directory or specific camera? Or does the ui do something with the parsing when you have static.

Are you pointing that url towards a camera directly or towards the IP Cam widget?

I am not sure about this.
My pictures are located under \\IP\openHAB-conf\html\images\Image.png
and my path in cards and floorplans is: http://IP:8080/static/images/Image.png

So the /static/ refers to the html folder I think.

Yep yep, that’s for the openhab web directory i referenced so not applicable unfortunately. Appreciate you trying to help either way :slight_smile:

Maybe. Sitemap+BasicUI use an image proxy servlet built in to openHAB.
Looking at the URL of an image at the browser, it’s something like
http://youropenhab:8080/proxy?sitemap=default.sitemap&widgetId=01020000&t=1633686921137
The proxy (part of the Jetty sub-system) fetches the image from the real device/service according to the sitemap content. The browser gets it from the proxy.

No idea what happens in the non-sitemap UIs Perhaps they can’t use the proxy.

Thanks! Sounds like you might be on to something (here’s to hoping). Is there someone we or I can ping into this thread to shed some more light on the situation?

Well, you could start by finding out what image your browser is trying to display, using its ‘inspect’ development tools or whatever on the broken icon.

Pinging people is generally discouraged; you’ve put all the right details and tags in your post header for interested people to find it :smiley:

Haha, gotcha :smiley: I’ll do some browser inspection (know what it is but not really in my daliy arsenal) and see if I can make heads or tails of this. I’m just seeing a lot of people using the same setup and for them it seems to be working so I’m also curious as to why it’s borked for me.

Hmmm, actually with you triggering the right things in my brain I figured it might have something to do with my network/nginx setup and sure enough. I tried connecting straight into openhab using port 8084 and then it worked in both Main UI and Basic UI, both when using the browser and when using android app on cell phone. So, I have to look at my network and proxy setup I guess.

Pointing browser/app towards http://192.168.13.12:8084 - works for both Basic and Main UI
Pointing browser/app towards https://192.168.13.12:8444 - works only for Basic, not for Main UI
Pointing browser/app towards https://public-url - works only for Basic, not for Main UI

I’m guessing the oh-proxy sort of fixes the setup for Basic behind the scenes.

If you upgrade to the latest milestone the ipcamera binding has changed to use port 8080 if that helps to use relative URLs.

When you say it does not work, do you mean when your on the same network or are you trying only remotely?

So, I think I figured some of it out. When configuring I usually go to my external adress even sitting at home due to bookmarks etc. When connecting to the server locally using 8084 (switched from 8080 manually) everything works. When connecting to the server using 8444 (my configured ssl port) images don’t work in Main UI/HabPanel, due to the oh-proxy mentioned earlier I’m guessing.

So, my solution I’m working on at the moment is this.

Locally - use the non-encrypted port 8084 when connecting.
Remotely - I’m setting up nginx to expose my mjpegs externally using ssl and username/password, then I should be able to target these in the UI. Stay tuned :wink:

The only thing that confuses me still if the oh-proxy explains why sitemaps/Basic UI works so well is why the secure server connection (8444 in my case) doesn’t work locally. Inspected the pages over 8084 and 8444, they both point to the same local non-secure stream link.

This is the problem I mentioned as you are trying to display using HTTP inside an HTTPS page.

Relative URL would resolve this.

1 Like

Yeah, my brain actually wondered if that might be the case - it was me being thick, sry :slight_smile:

I might have a look into this as well later on. Right now I got my mjpeg proxied so that everything works externally without VPN so I think I might be able to get this running exactly how I want.

This is what the built-in OH proxy is supposed to avoid. (and does, for sitemaps).
Is there some trick to configuring MainUI for similar, what widget are you using and how is it configured?