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.
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.
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:
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.
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
Haha, gotcha 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.
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
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.
Yeah, my brain actually wondered if that might be the case - it was me being thick, sry
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?