Openhab 3 + Raspi Camera + HabPanel + myopenhab = broken image

Apps & Services HABPanel
1

heyho guys
ive got a problem with this setup

installation:
openhab 3.1 as a vm on a x86 linux
camera: raspberry pi 3 wired network using camera module
as the tittle suggests: accessable via myopenhab

issue:
accessing the dashboard localy works fine, as expected. updating the image every second or every 0.1 seconds works great. the image-widget of habpanel refreshes this url
http://192.168.1.64/html/cam_pic.php?
as soon as i access the dashboard from outside the network the image wont load. no matter the devices (pc browser or android app, same outcome). its either a “broken image” icon or a black screen

any idea why? it worked “back then” with OH 2.5

2

192.168.1.64 is a local IP address that only exists on your LAN. When you are not on your LAN your browser cannot reach that IP address and therefore cannot access that image.

If you used this exact URL I doubt it worked before. Something else must have changed.

myopenhab.org is not a generic reverse proxy. It only gives access to the web stuff served by openHAB itself, not extra stuff you might have running on your LAN like IP cameras, Graphana, VNC servers, etc. If you want to access that camera from the Internet you have two choices:

  1. expose the camera to the Internet and use that Internet exposed URL in your HABPanel (not recommended

  2. Somehow make it so that openHAB serves up that camera’s feed itself.

Since 1 is not recommended, the ways you can manage 2 is using the IP Camera binding or writing a rule or script or something to save the camera feed to $OH_CONF/html which will then let you access it through the openHAB web server.

3

That’s it thanks
stupid question. i cant find any information about how to include the webview of the raspberry camera module into the ipcamera binding

4

You need the URL for the MJPEG feed or the JPG stills supplied by what ever is serving up the camera feed.

5

yep, ofc i need them. with them i could create a image widget which does not work outside the network (the original issue)
and the ip camera binding is only for onvif or am i wrong?
i tried to configure it but it always results in configuration error

6

the documentation states:

Thing Type ID: generic
For any camera that is not ONVIF compatible, yet has working RTSP or HTTP URLs.

7

And you’ve not revealed what software you are using to serve up the camera from the RPi so I can’t tell you what they are.

8

Even with IP camera binding is still the same behaviour
It works inside the LAN
But I get broken image when accessing from the outside

Raspberry camera software that is used

Edit----------
Using the IP camera binding the habpanel widget is not updating the image automatically.
Using direct link works

Screenshot_20220302-010720_openHAB
Screenshot_20220302-010720_openHAB1080×1022 76.6 KB

Screenshot_20220302-010755_openHAB
Screenshot_20220302-010755_openHAB1080×702 101 KB

Screenshot_20220302-011112_openHAB
Screenshot_20220302-011112_openHAB1080×2316 172 KB

9

And what URL are you using for the image in HABPanal? You have to use the IP Camera URL or even better an Item linked to the ImageURL Channel.

10

i use the same url as seen in the screenshot. the same i set for the ipcamera thing

thats what i did ont he second try. i made a ipcamera thing with the link and selected it int he habpanel image widget INSTEAD of the direct url, that didnt work (as can be seen on the screenshot)

11

Using the direct URL is never going to work. If it did you wouldn’t need the IP Camera binding in the first place.

I don’t use HABPanel so I don’t know how it treats Image Items. Sitemaps and MainUI let you use an Image Item as the URL to the image to show. If you can’t use an Image Item in HABPanel, look at the state of that Item and use that URL instead.

12

haaaa? thats exactly what i did
i created an ipcamera thing (and ofc an item for the image) and linked it to the widget. it breaks the same way
am i missing something? i dont understand how / what i could do differently

13

According to the docs

The image widget can display an image, directly or via an openHAB String item, and can refresh it at regular intervals.

Are you using an Image widget? Are you looking at the logs for errors from the IP Camera binding? Have you looked at the String Item linked to the Image URL Channel to see that it’s actually populated with the URL? If it does, have you tried to open that URL yourself in the browser? Have you tried to use the URL directly in the widget instead of Image URL Item?

If you have tried those things, you need to tell us. If you don’t say we assume you haven’t done. But be specific. For example:

Which specific Channel did you link to the Item and try to use in the widget? An IP Camera Thing has dozens of Channels, many of which with “Image” in the name. You’ve not yet mentioned what type of widget you are trying to use in HABPanel. You’ve not mentioned anything about logs at all, have you watched them for errors?

15

yes, no errors, yes it is. its the exactly url i put in there, yes i did. the result is a html page with the image, as expected. its the exact image the widget shows me when i use openhab in lan. ofc i tried using the url directly. it was the starting point. then i tried the ipcamera binding where i set the ip and url to the known values and selected the string item in the widget. which worked but only inside the lan.

true. there are several. i used the “Image URL” channel.
here is the code-version of this thing.

logs? yes. there is nothing that happens during the call of the widget
(i start openhab-cli showlogs, i grab my phone, i open the app, i open the part witht he widget, log says nothing except for items that were updated in that moment)

UID: ipcamera:generic:cce7d7c056
label: Terrarium Kamera
thingTypeUID: ipcamera:generic
configuration:
  mjpegOptions: -q:v 5 -r 2 -vf scale=640:-2 -update 1
  ipAddress: 192.168.1.64
  updateImageWhen: "0"
  mjpegUrl: ffmpeg
  gifPreroll: 0
  ffmpegLocation: /usr/bin/ffmpeg
  ipWhitelist: DISABLE
  mp4OutOptions: -c:v copy -c:a copy
  pollTime: 1000
  port: 80
  snapshotUrl: http://192.168.1.64/html/cam_pic.php?
  snapshotOptions: -an -vsync vfr -q:v 2 -update 1
  hlsOutOptions: -strict -2 -f lavfi -i aevalsrc=0 -acodec aac -vcodec copy
    -hls_flags delete_segments -hls_time 2 -hls_list_size 4
  gifOutOptions: -r 2 -filter_complex
    scale=-2:360:flags=lanczos,setpts=0.5*PTS,split[o1][o2];[o1]palettegen[p];[o2]fifo[o3];[o3][p]paletteuse
  password: hehee almost told you the password :D
  username: administrator

and this is the url of the string-item

the issue is that openhab does not “wrap” the image.
it only forwards the url to the browser/device that calls the widget
that means that if the url is not working outisde the lan, there will be no image in the widget
the solution would be to make openhab the “wraper” (i really dont know how to call it) so that i do need to call the address because openhab is providing the image itself.
but i dont have a clue how
its not an error or bug or issue. i think its by design. but there must be a solution for it, where openhab caches the image and presents it “as its own” (“wraper”) to the device

16

To be clear, we are talking about the URL that was put into the String Item linked to the Image URL Channel of the IP Camera Thing. It’ll look something like http://<openhab's address>:8080/ipcamera/<name of thihng>/ipcamera.jpg.

We are not trying to use the URL to the RPi.

Assuming that is the URL you are working with, perhaps HABPanel requires us to use a relative URL. Try it without the http://<openhab address>:8080 and just use /ipcamera/<name of thing>/ipcamera.jpg.

The whole point of this feature of the IP Camera binding is to allow openHAB to act as the web server to get to your camera feeds. Because openHAB is the web server, myopenhab.org can proxy it so it should be available outside your lan through myopenhab.org.

As I’ve said repeatedly though, I don’t have any experience with HABPanel. I know just using the Item works for sitemaps and MainUI. But perhaps it doesn’t work with HABPanel. But assuming that HABPanal can use relative URLs you should be able to make it work. If not it may never work with HABPanel.

17

okay got it
ill try it with the mainui and from there ill try use the openhab-image-url in the widget

18

I’m doing so successfully. Here’s an example compound widget I use for my Garage.

uid: garage_widget
tags:
  - card
  - garage
props:
  parameters: []
  parameterGroups: []
timestamp: Dec 9, 2021, 2:23:21 PM
component: f7-card
config:
  title: Garage Doors
slots:
  default:
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: f7-col
            config:
              width: auto
            slots:
              default:
                - component: oh-image-card
                  config:
                    item: GarageWyzeCamera_ImageURL
                    refreshInterval: 3000
                    style:
                      height: auto
                      width: 100%
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-label-card
                  config:
                    action: command
                    actionCommand: ON
                    actionItem: Small_Garagedoor_Opener
                    footer: Small Garage Door Opener
                    icon: '=(items.Small_Garagedoor_Sensor.state == "CLOSED") ? "f7:house" : "f7:house_fill"'
                    iconColor: '=(items.Small_Garagedoor_Sensor.state == "CLOSED") ? "green" : "orange"'
                    item: Small_Garagedoor_Sensor
                    label: '=(items.Small_Garagedoor_Sensor.state == "OPEN") ? "close" : "open"'
          - component: f7-col
            slots:
              default:
                - component: oh-label-card
                  config:
                    action: command
                    actionCommand: ON
                    actionItem: Large_Garagedoor_Opener
                    footer: Large Garage Door Opener
                    icon: '=(items.Large_Garagedoor_Sensor.state == "CLOSED") ? "f7:house" : "f7:house_fill"'
                    iconColor: '=(items.Large_Garagedoor_Sensor.state == "CLOSED") ? "green" : "orange"'
                    label: '=(items.Large_Garagedoor_Sensor.state == "OPEN") ? "close" : "open"'

Pay attention to the oh-image-card. GarageWyzeCamera_ImageURL is the Item linked to the Image URL Channel of the IP Camera Thing.

image
image1262×1126 119 KB

19

My guess is your using http to acess the main UI when your inside your network, then your using https to connect with when your outside. This is a problem as any http links will not work when your connected via Https. The solution is to use the port 8443 version of the ipcamera links.

Example:

http://192.168.1.11:8080/ipcamera/cce7d7c056/ipcamera.jpg

This becomes the following, note that https is used and the port is now 8443

https://192.168.1.11:8443/ipcamera/cce7d7c056/ipcamera.jpg

Note that this requires you to be using openHAB 3.2 Stable or newer.

20

great idea. does not work.
even with hikvision kameras i dont get an image outside of the lan
no matter if i choose “string item” which points to the image or if i just set a static url with or without https, it always results in “broken image” outside the lan via myopenhab
(ofc i made sure that the image is there by calling the url in the browser)

21

The myopenhab cloud will not proxy video streams for bandwidth reasons, for an image that updates last time I checked which was years ago it did work. For remote viewing of cameras it is a good idea to use a VPN to connect back to your internal network as then you show up as if you were home. This is different to a VPN that most people know of, its free to use a VPN package like wireguard or openVPN to connect with back to your server.