MainUI 4.3.0: Items of sub page won't be updated & navigation not possible

Add-ons UIs
1

Hello,

after updating OH from 4.2.1 to 4.3 the items of a page won’t be updated and it’s not possible to navigate to other pages, after a page with IP cam content was active. To rule out side effects from other components, I set up a completely new VM with OH 4.3 and only installed the IP Camera Binding. I can reproduce it up to 100%, when a page has at least 4 x MJPEG streams provided by this Binding.

STR 1 (Item updating issue):

  • Open page ‘Overview’ and refresh by browser (refresh is important)
  • Open page with IP cams
  • Navigate back
  • Open page with items => All controls stays in initial state and don’t show the current item states (after manually refreshing page all controls shows the right item states)

STR 2 (Navigation issue):

  • Open page ‘Overview’ and refresh by browser (refresh is important)
  • Open page with IP cams
  • Navigate back
  • Try to open ‘Help & About’, ‘Settings’ or ‘Add-on Store’ by sidebar => nothing happens (Opening ‘Locations’, ‘Equipment’ or ‘Properties’ by TabBar of the overview page works as expected)

What I have alredy tried:

  • Cleared cache and tmp files (on my production system) by
openhab-cli clean-cache
  • Cleared cookies and website data of the browser
  • Checked with Firefox on Win11 and Safari on iOS
  • Activated log level ‘Debug’ for IP Camera binding, for openhab.event and for org.openhab (in Log Viewer, nothing special visible)
  • Checked the console of the browser tools (no errors visible)

Does anyone else have similar problems or ideas on how to narrow down or solve the problem?

For reproducing this issue, here the code of my pages:

config:
  label: Overview
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        title: IP cams
                        action: navigate
                        actionPage: page:page_Test1
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        title: Items
                        action: navigate
                        actionPage: page:page_Test2

config:
  label: IP Cams
blocks:
  - component: oh-block
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                slots:
                  default:
                    - component: oh-image
                      config:
                        url: http://192.XXX.YYY.215:8080/ipcamera/IPCam-1/ipcamera.mjpeg
              - component: oh-grid-col
                slots:
                  default:
                    - component: oh-image
                      config:
                        url: http://192.XXX.YYY.215:8080/ipcamera/IPCam-2/ipcamera.mjpeg
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                slots:
                  default:
                    - component: oh-image
                      config:
                        url: http://192.XXX.YYY.215:8080/ipcamera/IPCam-3/ipcamera.mjpeg
              - component: oh-grid-col
                slots:
                  default:
                    - component: oh-image
                      config:
                        url: http://192.XXX.YYY.215:8080/ipcamera/IPCam-4/ipcamera.mjpeg

config:
  label: Items
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-toggle-card
                      config:
                        item: TestItem
2

4+ streams seems like a lot and I wonder if snapshots wouldn’t be a better approach over all. It should at least be a work around for now.

3

Hi @rlkoshak, thank you for your suggestion. What do you mean with “4+ streams seems like a lot”, which component could be the bottleneck? The IP Camera Binding or the UI components?

I have tried to add the URL of the cams directly (without the mjpeg streams provided by the IP camera binding). This works as expected. Cause the IP cams allow only one user at a time, I would like to use the IP Camera Binding for accessing the streams by multiple clients.

In OH 4.2.1 it was possible to stream 4 cams without any problems.

Can I provide further informations for identifying the reason for this issue?

4

I would expect the browser itself to struggle a little bit with that since it’s the browser that decodes and shows the mpjeg streams and in my experience these typs of streams take way more to process compared to, for example h.264. It’s also possible the IPCamera binding stuggles, or to be specific the decoding of the streams if they are not already in mjpeg format (the binding uses ffmpeg to decode/reencode the video stereams. But I wouldn’t expect the UI to suffer under that circumstance unless your machine over all is stuggling (e.g. high swap, CPUs pegged, etc.)

But with the information presented it’s imposible to pinpoint a specific bottleneck. I’m just suggesting a work around which should give you what you need (i.e. monitor multipel video feeds) with way less load on everything.

5

I have notice that browsers do not stop the streams until you press the refresh button on a browser after you navigate away from the page showing the camera feed. I believe this is a feature of the browser in case you press the back button it keeps the streams going. Also I believe some browsers have a limit of how many streams can be displayed/opened at the same time.

How the browser sees the items change and if it is treated as a stream I do not know that much about how a browser works and if this can be changed with a setting/option.

The ipcamera binding can setup a camera group that rotates the cameras for you in a single feed. If motion occurs that camera/s will display over ones that do not have motion. This may also be a work around.

That is interesting that your saying it only started after an upgrade. Have you tried the 4.3.1 which seems to have a bug fix listed that may be what your seeing.

6

Hi @matt1, thank you for the hint, OH 4.3.1 solves the issue.