`v5` series card performs poorly when used with `lovelace-layout-card`

NormKOALA commented 1 year ago

Checklist:

[*] I updated to the latest version available
[*] I cleared the cache of my browser

Release with the issue: V5

Last working release (if known): V4

Browser and Operating System: Chrome/Win11, HA App/iOS

Description of problem: I have 3 cameras connected to the Frigate. When viewing cameras through Frigate UI, there are no problems. The same when viewing cameras through Lovelace Frigate Card with the default live provider. But, when live provider is set to go2rtc, viewing cameras through Lovelace Frigate Card with relatively fast switching of cameras leads to server resources are running out, and in some cases to the server freezing.

I have also noticed that if give go2rtc time to load for each camera, then resource usage will go back to normal and cameras can be fast switched safely.

dermotduffy commented 1 year ago

There's quite a bit that happens when you change camera in the card (e.g. fetching events, fetching recordings, fetching thumbnails, etc). These too cause requests to go to the Frigate backend, it might be good to rule them out. Suggestions:

Try turning the thumbnail carousels off entirely.
Try turning the mini-timeline off entirely (although I don't see that on your screenshot).

Other thoughts:

Would you mind holding down your Frigate menu button for a few seconds, it will give you diagnostic info -- then paste that back into this bug. You may have turned the Frigate menu button off (as per your screenshot), so you may need to temporarily re-enable it. This will let me see your config and other key details.

I have also noticed that if give go2rtc time to load for each camera, then resource usage will go back to normal and cameras can be fast switched safely.

Hmm. So the fast switching is you dragging the live carousel when the connection is not yet fully negotiated / stream not loaded? By default the card should not unload a live stream once loaded (it can be configured to do so, though), so I would have expected the "loading" to just be continuing in the background vs starting over somehow.

Perhaps you could provide a short screen capture of the "fast switching" you're doing in the card, and ideally the same in the Frigate UI so I can try to replicate?

NormKOALA commented 1 year ago

Thank you for your reply.

Would you mind holding down your Frigate menu button for a few seconds, it will give you diagnostic info -- then paste that back into this bug. You may have turned the Frigate menu button off (as per your screenshot), so you may need to temporarily re-enable it. This will let me see your config and other key details.

Card diagnostics. Please review for confidential information prior to sharing
{
  "ha_version": "2023.4.6",
  "card_version": "5.0.0",
  "browser": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36",
  "date": "2023-04-24T02:23:53.735Z",
  "frigate_version": {
    "91395a986ede433df1679a55943babef": "4.0.0/0.12.0-da3e197"
  },
  "lang": "en",
  "timezone": "Asia/Tokyo",
  "git": {
    "build_version": "5.0.0-HEAD+gd7b150a",
    "build_date": "Sat, 22 Apr 2023 17:18:25 GMT",
    "commit_date": "Sat, 22 Apr 2023 10:10:23 -0700"
  },
  "config": {
    "type": "custom:frigate-card",
    "cameras": [
      {
        "camera_entity": "camera.hall_camera"
      },
      {
        "camera_entity": "camera.livingroom_camera"
      },
      {
        "camera_entity": "camera.facade_camera"
      }
    ],
    "cameras_global": {
      "live_provider": "go2rtc"
    },
    "view": {
      "timeout_seconds": 0
    },
    "menu": {
      "style": "outside",
      "button_size": 35,
      "buttons": {
        "live": {
          "priority": 100
        },
        "frigate": {
          "enabled": true
        },
        "cameras": {
          "enabled": false
        },
        "fullscreen": {
          "enabled": false
        },
        "download": {
          "enabled": false
        }
      }
    },
    "live": {
      "controls": {
        "thumbnails": {
          "mode": "below",
          "show_details": true,
          "show_download_control": false,
          "show_favorite_control": false,
          "show_timeline_control": false
        },
        "next_previous": {
          "size": 35
        },
        "title": {
          "mode": "none"
        }
      }
    },
    "media_viewer": {
      "controls": {
        "title": {
          "duration_seconds": 5
        }
      }
    },
    "performance": {
      "features": {
        "animated_progress_indicator": false
      },
      "style": {
        "border_radius": false,
        "box_shadow": false
      }
    },
    "elements": [
      {
        "type": "custom:frigate-card-conditional",
        "conditions": {
          "camera": [
            "camera.livingroom_camera"
          ]
        },
        "elements": [
          {
            "type": "state-badge",
            "entity": "sensor.0x0000000000000000_temperature",
            "tap_action": {
              "action": "none"
            },
            "style": {
              "left": "10%",
              "top": "95%",
              "color": "rgba(0,0,0,0)",
              "opacity": 0.75
            }
          },
          {
            "type": "custom:frigate-card-ptz",
            "style": {
              "transform": "none",
              "right": "5%",
              "bottom": "5%"
            },
            "service": "button.press",
            "data_up": {
              "entity_id": "button.livingroom_camera_move_up"
            },
            "data_down": {
              "entity_id": "button.livingroom_camera_move_down"
            },
            "data_left": {
              "entity_id": "button.livingroom_camera_move_left"
            },
            "data_right": {
              "entity_id": "button.livingroom_camera_move_right"
            }
          },
          {
            "type": "custom:frigate-card-menu-state-icon",
            "entity": "switch.0x0000000000000000_left",
            "icon": "mdi:lightbulb-group-outline",
            "alignment": "opposing",
            "tap_action": {
              "action": "toggle"
            }
          },
          {
            "type": "custom:frigate-card-menu-state-icon",
            "entity": "switch.0x0000000000000000_center",
            "icon": "mdi:chandelier",
            "alignment": "opposing",
            "tap_action": {
              "action": "toggle"
            }
          },
          {
            "type": "custom:frigate-card-menu-state-icon",
            "entity": "switch.0x0000000000000000_right",
            "icon": "mdi:coach-lamp-variant",
            "alignment": "opposing",
            "tap_action": {
              "action": "toggle"
            }
          },
          {
            "type": "custom:frigate-card-menu-submenu-select",
            "entity": "select.livingroom_camera_move_to_preset",
            "icon": "mdi:menu",
            "alignment": "opposing",
            "priority": 60
          }
        ]
      },
      {
        "type": "custom:frigate-card-conditional",
        "conditions": {
          "camera": [
            "camera.hall_camera"
          ]
        },
        "elements": [
          {
            "type": "custom:frigate-card-menu-state-icon",
            "entity": "switch.0x0000000000000000_center",
            "icon": "mdi:ceiling-light",
            "alignment": "opposing",
            "tap_action": {
              "action": "toggle"
            }
          },
          {
            "type": "custom:frigate-card-menu-state-icon",
            "entity": "switch.0x0000000000000000_left",
            "icon": "mdi:chandelier",
            "alignment": "opposing",
            "tap_action": {
              "action": "toggle"
            }
          }
        ]
      },
      {
        "type": "custom:frigate-card-conditional",
        "conditions": {
          "camera": [
            "camera.facade_camera"
          ]
        },
        "elements": [
          {
            "type": "state-icon",
            "entity": "weather.tomorrow_io_my_smart_home_daily",
            "style": {
              "left": "9%",
              "top": "20%",
              "background": "rgba(0, 0, 0, 0.85)",
              "border-radius": "15%"
            }
          },
          {
            "type": "state-badge",
            "entity": "sensor.openweathermap_temperature",
            "tap_action": {
              "action": "none"
            },
            "style": {
              "left": "10%",
              "top": "300px",
              "color": "rgba(0,0,0,0)",
              "opacity": 0.85
            }
          }
        ]
      }
    ]
  }
}

Perhaps you could provide a short screen capture of the "fast switching" you're doing in the card, and ideally the same in the Frigate UI so I can try to replicate?

I hope the video below helps:

https://drive.google.com/file/d/17B-nMIN3IGoK3O1OwT7Q50TkEqF-SFsR/view?usp=sharing

dermotduffy commented 1 year ago

Very interesting, really great video, thank you.

Did you try turning off the thumbnail carousel to see if it makes any difference?

NormKOALA commented 1 year ago

I just tried this. The result is the same.

    "live": {
      "controls": {
        "thumbnails": {
          "mode": "none",
          "show_details": true,
          "show_download_control": false,
          "show_favorite_control": false,
          "show_timeline_control": false

dermotduffy commented 1 year ago

One more idea, the card go2rtc player has automatic upgrade/downgrade between modes, which the Frigate UI does not have. It's possible this is applying extra load on initialization which might explain these symptoms. Try changing your cameras_global to:

cameras_global:
  live_provider: go2rtc
  go2rtc:
    modes:
      -  mse // <-------------------- or webrtc

This forces the card to only a single mode.

NormKOALA commented 1 year ago

With MSE works better. With WEBRTC freezed as usually.

Looks interesting that the upload to the network increases upto the download speed. Using Frigate UI does not lead to this. I don't have knowlange about this, but may be the Frigate Card does not stop providing the live even when the camera was switched.

meks007 commented 1 year ago

I'm terribly sorry to jump in on this, I just updated from v4 to v5 and I'm sorry again but the new version is just unusable. You indicate in your release notes that there are "performance improvements" yet all my devices - mobile (S22 Ultra!), tablets, even my i7 desktop PC getting really really slow due to the server being completely overwhelmed by this new version.

I'm using JSMPeg to display 5 cameras on one dashboard (separete cards). With v4 this was instant. With v5 it won't even load.

dermotduffy commented 1 year ago

@meks007 Thanks for chiming in. Obviously your experience is unfortunate, unintended and was not reported in the betas nor seen in my own testing throughout the dev cycle -- so lets figure it out. You'll need to provide debugging information though -- can you hold down your Frigate button for a few seconds and paste what shows up?

As you're using jsmpeg, I can't tell if it's the same issue or not. I guessing maybe not. Are you doing anything special to trigger this behavior, or it's just on page load?

dermotduffy commented 1 year ago

@NormKOALA So do I understand with MSE specified as the only mode the behavior is "normal", but with WebRTC it's exactly the same behavior of consuming additional server resources?

meks007 commented 1 year ago

@dermotduffy I've already downgraded to v4 and all issues are gone. For the sake of helping you to fix this I've updated to v5 again and upgraded one of my cards. Below are v4 + v5 diag dumps of the same card.

I've noticed that having only one card on a specific dashboard won't have any noticeable impact. Because of that I don't think it's a configuration issue but rather idk maybe due to the fact that it's no longer a single JS or something. Apparently though adding a 2nd and 3rd card results in rapidly dropping performance. You start noticing that even the menu ribbon lags while being rendered. The whole thing just becomes really slugish. My current setup consists of 5 cards on the same dashboard and there's no issue with v4 at all. You should be able to reproduce it by adding 3-4 cards to the same dashboard.


{
  "ha_version": "2023.4.6",
  "card_version": "4.0.0",
  "browser": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36",
  "date": "2023-04-24T13:14:21.418Z",
  "frigate_version": {
    "14f8d4778ada4e73e28c6c7f4ac91914": "4.0.0/0.12.0-da3e197"
  },
  "lang": "de",
  "git": {
    "build_version": "4.0.0-HEAD+ge5a0bf4",
    "build_date": "Fri, 23 Sep 2022 00:27:16 GMT",
    "commit_date": "Thu, 22 Sep 2022 16:53:03 -0700"
  },
  "config": {
    "type": "custom:frigate-card",
    "live": {
      "preload": false,
      "draggable": false,
      "layout": {
        "fit": "contain"
      },
      "controls": {
        "thumbnails": {
          "show_details": false,
          "show_timeline_control": false,
          "show_favorite_control": false,
          "mode": "none"
        }
      },
      "show_image_during_load": true
    },
    "menu": {
      "buttons": {
        "frigate": {
          "enabled": true
        },
        "live": {
          "enabled": true
        },
        "clips": {
          "enabled": true
        },
        "snapshots": {
          "enabled": true
        },
        "fullscreen": {
          "enabled": true,
          "alignment": "matching"
        },
        "timeline": {
          "enabled": false
        },
        "cameras": {
          "enabled": false
        },
        "download": {
          "enabled": false
        },
        "image": {
          "enabled": false
        },
        "camera_ui": {
          "enabled": false
        }
      },
      "style": "overlay",
      "position": "left"
    },
    "view": {
      "default": "live",
      "dark_mode": "auto",
      "scan": {
        "enabled": false
      }
    },
    "cameras": [
      {
        "camera_entity": "camera.cctv_kamera2",
        "frigate": {
          "url": "http://meksdocker.komit.cc:5000"
        },
        "title": "Durchgang",
        "live_provider": "frigate-jsmpeg"
      }
    ],
    "media_viewer": {
      "controls": {
        "next_previous": {
          "style": "thumbnails"
        },
        "thumbnails": {
          "mode": "above"
        }
      },
      "lazy_load": true,
      "auto_play": "never",
      "draggable": true
    },
    "state_color": true,
    "timeline": {
      "show_recordings": true
    },
    "dimensions": {
      "aspect_ratio_mode": "dynamic"
    },
    "media_gallery": {
      "controls": {
        "thumbnails": {
          "show_details": true,
          "show_favorite_control": false,
          "show_timeline_control": false
        }
      }
    }
  }
}

{
  "ha_version": "2023.4.6",
  "card_version": "5.0.0",
  "browser": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36",
  "date": "2023-04-24T13:18:20.991Z",
  "frigate_version": {
    "14f8d4778ada4e73e28c6c7f4ac91914": "4.0.0/0.12.0-da3e197"
  },
  "lang": "de",
  "timezone": "Europe/Berlin",
  "git": {
    "build_version": "5.0.0-HEAD+gd7b150a",
    "build_date": "Sat, 22 Apr 2023 17:18:25 GMT",
    "commit_date": "Sat, 22 Apr 2023 10:10:23 -0700"
  },
  "config": {
    "type": "custom:frigate-card",
    "live": {
      "preload": false,
      "draggable": false,
      "layout": {
        "fit": "contain"
      },
      "controls": {
        "thumbnails": {
          "show_details": false,
          "show_timeline_control": false,
          "show_favorite_control": false,
          "mode": "none"
        }
      },
      "show_image_during_load": true
    },
    "menu": {
      "buttons": {
        "frigate": {
          "enabled": true
        },
        "live": {
          "enabled": true
        },
        "clips": {
          "enabled": true
        },
        "snapshots": {
          "enabled": true
        },
        "fullscreen": {
          "enabled": true,
          "alignment": "matching"
        },
        "timeline": {
          "enabled": false
        },
        "cameras": {
          "enabled": false
        },
        "download": {
          "enabled": false
        },
        "image": {
          "enabled": false
        },
        "camera_ui": {
          "enabled": false
        }
      },
      "style": "overlay",
      "position": "left"
    },
    "view": {
      "default": "live",
      "dark_mode": "auto",
      "scan": {
        "enabled": false
      }
    },
    "cameras": [
      {
        "camera_entity": "camera.cctv_kamera2",
        "frigate": {
          "url": "http://meksdocker.komit.cc:5000"
        },
        "title": "Durchgang",
        "live_provider": "jsmpeg"
      }
    ],
    "media_viewer": {
      "controls": {
        "next_previous": {
          "style": "thumbnails"
        },
        "thumbnails": {
          "mode": "above"
        }
      },
      "lazy_load": true,
      "auto_play": "never",
      "draggable": true
    },
    "state_color": true,
    "timeline": {
      "show_recordings": true
    },
    "dimensions": {
      "aspect_ratio_mode": "dynamic"
    },
    "media_gallery": {
      "controls": {
        "thumbnails": {
          "show_details": true,
          "show_favorite_control": false,
          "show_timeline_control": false
        }
      }
    }
  }
}

dermotduffy commented 1 year ago

@meks007 Thanks. I routinely test with 8 cards, so I do suspect it'll be something configuration based (or perhaps power of system perhaps?). I'll try it with your exact configuration.

even my i7 desktop PC getting really really slow due to the server being completely overwhelmed by this new version.

@meks007 Can you clarify if the issue is on your server (where Frigate runs, as described by the original poster), or the machine running the browser with the card in it? I think it's the latter in your case?

dermotduffy commented 1 year ago

@meks007 6 cards with your config (just a different camera entity swapped in):

six

Looks fine -- this is not what you see I guess. Can you take a screen capture so I can see what's happening?

NormKOALA commented 1 year ago

@dermotduffy I tried webrtc first and all happened again. Then I changed the settings to mse, the first time the LAN usage was the same, but the cpu and ram usage was normal. After that, the lan came back to normal. I've been testing this all day without any problems. Maybe after restarting the server something will change, but my family is already at home and I can't do it.

dermotduffy commented 1 year ago

@NormKOALA OK, great. So for you, it seems like the issue might be webrtc specific. Note that the bandwidth staying used is expected, since the camera stream is not unloaded by default unless the lazy_unload option is turned on (live configuration).

meks007 commented 1 year ago

@dermotduffy It appears to have something to do with JSMpeg and the Timeline view. I've now switched from JSMpeg to HA integrated and disabled the timeline button on all cards and performance is (almost) back to v4. Worth a test on your end perhaps.

In any case rendering of JSMpeg takes a noticeable amount longer than with v4.

dermotduffy commented 1 year ago

@meks007 Very unlikely related to the timeline button , and you didn't have the mini-timeline turned on, so timeline might be a red herring. JSMPEG library is the very same in the v4 card as the v5 card ("@cycjimmy/jsmpeg-player": "^6.0.4"), but I can look at what may have changed around the player.

NormKOALA commented 1 year ago

I restarted the server and yes, MSE is better for me. Everything works perfectly. Thank you!
I did some more research and realized that, perhaps, go2rtc is the problem. When viewing a stream through go2rtc WebUI, even a single stream in webrtc "crashes" my system.

dermotduffy commented 1 year ago

@NormKOALA Aha, the plot thinkens. Maybe open an issue over at go2rtc and see if they can help you with the webrtc performance issue (unless you're happy with mse and don't care one way or the other).

I'll keep this bug around to investigate the unrelated JSMPEG performance impact that @meks007 has reported (as of yet I cannot reproduce it).

Hannsre commented 1 year ago

I just stumbled upon this thread looking for a solution. My Problem is related to @meks007 , as a dashboard with frigate cards on it will bring the Home Assistant App to a crawl and cause high system load on any device opening that dashboard. It is not server load, that looks fine, but the device viewing the dashboard.

Here's the debug Info, I did not set anything special, basically just added the card, picked a camera and that's about it:

  "ha_version": "2023.5.3",
  "card_version": "5.1.1",
  "browser": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.42",
  "date": "2023-05-22T20:34:09.124Z",
  "frigate_version": {
    "9fd729d1dc31841bedd84a3d8df80393": "4.0.0/0.12.0-da3e197"
  },
  "lang": "de",
  "timezone": "Europe/Berlin",
  "git": {
    "build_version": "5.1.1-HEAD+g2d977be",
    "build_date": "Sat, 20 May 2023 20:35:29 GMT",
    "commit_date": "Sat, 20 May 2023 13:32:32 -0700"
  },
  "config": {
    "type": "custom:frigate-card",
    "cameras": [
      {
        "camera_entity": "camera.terrasse",
        "live_provider": "ha"
      }
    ],
    "timeline": {
      "style": "ribbon"
    }
  }
}

It was fine while using Frigate Card v4, started after the update to v5 and persists on 5.1.1.

I tried jsmpeg, HA Video, automatic and go2rtc with MSE and neither really did much.

Once all cameras are loaded it seems fine again, but they occasionally drop the connection and then have to reload so it starts over and basically the dashboard remains unusable. Once I switch to another dashboard there are no more issues.

I reverted to v4 for now to have a working dashboard, but if I can provide any further information for you to troubleshoot this let me know!

dermotduffy commented 1 year ago

As I have never managed to reproduce this and had no reports other than this thread, I'm afraid no progress has been made.

Are you saying with just that config, a single card on the dashboard, it's not usable?

Once all cameras

Or perhaps there are multiple of these cards? How many? What type of device is it?

If I can provide any further information for you to troubleshoot this let me know!

It would help to provide:

A screen capture of the performance problem reported?
Try to use low performance profile and see if it makes any difference:
```
performance:
profile: low
```
When you use low performance profile, use as small a configuration as possible and only add config options in 1 by 1 to see if you can find the point at which it becomes unusable. If the config is really as small as the example show, this may be moot.
Check your Javascript console (F12 in Chrome) and see if there are any errors?
Turn on debug logging and see if there's any sort of pattern in the logs that show up in the Javascript console:
```
debug:
logging: true
```
Try to disable other HA frontend plugins/resources temporarily (if you use card-mod that would be a good one to start with) and see if the card loads cleanly without other Javascript plugins that may interfere.

Without some new clue, this issue is unactionable :-(

Hannsre commented 1 year ago

Or perhaps there are multiple of these cards? How many? What type of device is it?

Ah yeah sorry, it's 5 cameras in total, all with that very basic config.

With device you mean the one viewing the dashboard? If yes, it's multiple devices, really makes no difference whether it's my laptop with a 10th gen i5, desktop or smartphone.

Cameras are all reolink RLC-810A, except for one RLC-811A. What makes them a bit different (maybe?) It's I use go2rtc for each one since frigate v0.12 as that improved stream quality significantly.

I'll try the settings you mentioned tonight and check if I can see the point where it's breaking.

Skeletorjus commented 1 year ago

Cameras are all reolink RLC-810A, except for one RLC-811A. What makes them a bit different (maybe?) It's I use go2rtc for each one since frigate v0.12 as that improved stream quality significantly.

You should try without go2rtc, see this discussion: https://github.com/blakeblackshear/frigate/discussions/5706

Hannsre commented 1 year ago

That is connected to load on the host as far as I understood? My host is fine, it's the clients viewing the dashboard that have issues.

Skeletorjus commented 1 year ago

That is connected to load on the host as far as I understood? My host is fine, it's the clients viewing the dashboard that have issues.

Oh, I see, you can disregard my comment then :)

dermotduffy commented 1 year ago

What makes them a bit different (maybe?)

Definitely different (go2rtc consumes its video over websocket which is fundamentally different than a provider like ha). I would not expect a change like that to behave identically performance wise. Another thing to try is simply pick whatever live provider you were using in v4 and try it out in v5. If your performance problem persists, at least we'll have ruled out go2rtc.

Hannsre commented 1 year ago

I used Frigate JSMpeg in v4 and also in v5. I also tried go2rtc with and without ems and ha. Did not see any difference between either option.

Just updated again and added all cameras one by one to a new dashboard so rule out any other cards. And... it worked like in v4. So there is definitely something wrong/incompatible with how the cards are set up in that dashboard.

What I found in dev tools is a few of those entries:

A.IsSupported @ live-jsmpeg-abf822da.js:1
live-jsmpeg-abf822da.js:1  WARNING: Too many active WebGL contexts. Oldest context will be lost.
A @ live-jsmpeg-abf822da.js:1
live-jsmpeg-abf822da.js:1  WARNING: Too many active WebGL contexts. Oldest context will be lost.
A.IsSupported @ live-jsmpeg-abf822da.js:1
live-jsmpeg-abf822da.js:1  WARNING: Too many active WebGL contexts. Oldest context will be lost.
A @ live-jsmpeg-abf822da.js:1

And:

ubersicht:1  WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
ubersicht:1  WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
ubersicht:1  WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
ubersicht:1  WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
ubersicht:1  WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
ubersicht:1  WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
ubersicht:1  WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

Since that does not happen on the new dashboard I tried a bit further and I think I found the reason.

I'm using vertical and horizontal stack cards to arrange the cameras which seems to be causing the issue. I removed the cards I got stacked like that and all is back to normal. I've had a horizontal stack with one landscape camera and two vertical stack cards with a vertical camera each ina single card. MIght be a bit too much nesting probably.

There wasn't anyting obvious otherwise even with debug logging active, so it might be stacking and not frigate card causing those issues.

dermotduffy commented 1 year ago

I'm using vertical and horizontal stack cards to arrange the cameras which seems to be causing the issue. I removed the cards I got stacked like that and all is back to normal. I've had a horizontal stack with one landscape camera and two vertical stack cards with a vertical camera each in a single card. MIght be a bit too much nesting probably.

What the ... that's an amazing find. Can you share your full dashboard config so I can try to exactly reproduce? [Or perhaps the smallest possible config that shows the problem]

@meks007 , I don't suppose you are stacking the cards also?

Hannsre commented 1 year ago

This is the Card config as it is now, causing the issues in v5+ (I rolled back to v4 again for the time being). Just wondering now where that go2rtc settings on the first come from, since v4 doesn't have those. Maybe just leftovers from before the downgrade?

type: vertical-stack
cards:
     - type: custom:frigate-card
        cameras:
          - camera_entity: camera.terrasse
            go2rtc:
              modes:
                - mse
            live_provider: frigate-jsmpeg
        timeline:
          style: ribbon
      - type: vertical-stack
        cards:
          - type: custom:frigate-card
            cameras:
              - camera_entity: camera.garten
          - type: horizontal-stack
            cards:
              - type: custom:frigate-card
                cameras:
                  - camera_entity: camera.front
              - type: custom:frigate-card
                cameras:
                  - camera_entity: camera.rueckseite
              - type: custom:frigate-card
                cameras:
                  - camera_entity: camera.tuer

And the bit regarding general dashboard layout settings:

title: Home
views:
  - theme: Backend-selected
    title: Übersicht
    icon: mdi:desktop-classic
    path: ubersicht
    type: custom:grid-layout
    layout:
      width: 300
      maxcols: 5
    visible:
      - user: 0718c7bf89554c40bf2874ef4989f92d
      - user: 057cad86ec224da088774fa2759e2519
      - user: 5b2bc88255f04f86a9d8dfdec38a7535
    badges: []

dermotduffy commented 1 year ago

This is the Card config as it is now, causing the issues in v5+ (I rolled back to v4 again for the time being). Just wondering now where that go2rtc settings on the first come from, since v4 doesn't have those. Maybe just leftovers from before the downgrade?

Almost certainly. v4 will ignore them anyway.

I quickly tried re-using your dashboard config -- it seems to just work though :-( What should I be looking for to see the performance problem specifically? i.e. Can you describe the behavior you see with v5 that tells you there's a problem?

type: custom:grid-layout

I also notice this. I don't know what this is, but possibly: https://github.com/thomasloven/lovelace-layout-card . Can you try just a normal dashboard without this and see if that makes any difference?

Hannsre commented 1 year ago

I also notice this. I don't know what this is, but possibly: https://github.com/thomasloven/lovelace-layout-card . Can you try just a normal dashboard without this and see if that makes any difference?

That's the one, yeah. But true, I did not use the custom layout in the dashboard I tried the single cameras in. I'll give it a go later.

Edit: Seems to be related to the the layout card, as it does not happen in a regular dashboard.

And you'll notice once the issue is there by the whole dashboard being extremely slow, camera live view dropping out and the browser-tab randomly crashing and reloading. Also the system load is quite high from that tab, I've seen up to 30-40% CPU load from that dashboard on a Core i5 10th gen. Laptop. On mobile the dashboard just freezes while scrolling through the dashboard.

dermotduffy commented 1 year ago

Edit: Seems to be related to the the layout card, as it does not happen in a regular dashboard.

Aha. This would explain why your dashboard works fine for me (I do not see the symptoms you describe on any device). I'll install that card and see if I can figure out what's going on...

dermotduffy commented 1 year ago

@Hannsre I am still not able to reproduce this. I have installed layout card:

layout-card.js:228 LAYOUT-CARD 2.4.4 IS INSTALLED

... and created a new dashboard with this config ...

title: Home
views:
  - theme: Backend-selected
    title: Übersicht
    icon: mdi:desktop-classic
    path: ubersicht
    type: custom:grid-layout
    layout:
      width: 300
      maxcols: 5
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: custom:frigate-card
            cameras:
              - camera_entity: camera.office
                live_provider: jsmpeg
            timeline:
              style: ribbon
          - type: vertical-stack
            cards:
              - type: custom:frigate-card
                cameras:
                  - camera_entity: camera.landing
              - type: horizontal-stack
                cards:
                  - type: custom:frigate-card
                    cameras:
                      - camera_entity: camera.kitchen
                  - type: custom:frigate-card
                    cameras:
                      - camera_entity: camera.sitting_room
                  - type: custom:frigate-card
                    cameras:
                      - camera_entity: camera.back_yard

I still can't get any kind of crashing or obviously slow behavior. Am I missing anything in the above?

dermotduffy commented 1 year ago

Closing as not reproducible. If someone else finds this issue, and has a way to reliably generate the poor performance when the card is used with lovelace-layout-card, please let me know how to reproduce so I can investigate.

jameseck commented 1 year ago

Hi, I came across this as I'm facing the same issue - performance is bad to unusable when combined with the layout-card.

You mentioned you need a way to reliably generate the poor performance. I can easily reproduce it, but that doesn't mean you can. I'm more than happy to help in any way I can to try and get this issue solved.

I've been displaying a dashboard for several months which just consisted of 4 live camera feeds (4 frigate-hass-card) using a rpi4b running android. This has been working fine - albeit a little slow perhaps. I now want to add some more cards (switches/temps/etc) to the dashboard and have more control over placement.

I've tried multiple different dashboard configurations with different combinations of layout-cards, grid-layout, horizontal-stack, vertical-stack. They all suffer from the same performance issue.

I've come up with a fairly simple example below - one dashboard with two views. First view uses the default masonry card, second view uses the layout-card. The first view displays all the camera feeds perfectly. The second view rarely even loads fully on my rpi4b. It's worth noting that on my core i7 laptop, both of these views do work (but the second view is more laggy), so perhaps the rpi4b just doesn't have quite enough grunt to display the second view. It's pretty clear that something is causing a performance hit here, the problem is proving it :) If you haven't got a lower powered device like a rpi to test with, maybe you can add more cameras to both views until there is a clear performance difference between them to debug further.

views:
  - title: masonry
    type: masonry
    badges: []
    cards:
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.camera1
            id: camera1_sub
            live_provider: go2rtc
            go2rtc:
              modes:
                - mse
              stream: camera1_sub
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.camera2
            id: camera2_sub
            live_provider: go2rtc
            go2rtc:
              modes:
                - mse
              stream: camera2_sub
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.camera3
            id: camera3_sub
            live_provider: go2rtc
            go2rtc:
              modes:
                - mse
              stream: camera3_sub
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.camera4
            id: camera4_sub
            live_provider: go2rtc
            go2rtc:
              modes:
                - mse
              stream: camera4_sub
  - title: layout
    type: custom:grid-layout
    layout_type: grid
    layout:
      grid-template-rows: auto
      grid-template-columns: 50% 50%
      grid-template-areas: |
        "c1 c2"
        "c3 c4"
    badges: []
    cards:
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.camera1
            id: camera1_sub
            live_provider: go2rtc
            go2rtc:
              modes:
                - mse
              stream: camera1_sub
        view_layout:
          grid-area: c1
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.camera2
            id: camera2_sub
            live_provider: go2rtc
            go2rtc:
              modes:
                - mse
              stream: camera2_sub
        view_layout:
          grid-area: c2
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.camera3
            id: camera3_sub
            live_provider: go2rtc
            go2rtc:
              modes:
                - mse
              stream: camera3_sub
        view_layout:
          grid-area: c3
      - type: custom:frigate-card
        cameras:
          - camera_entity: camera.camera4
            id: camera4_sub
            live_provider: go2rtc
            go2rtc:
              modes:
                - mse
              stream: camera4_sub
        view_layout:
          grid-area: c4

dermotduffy commented 1 year ago

Thanks @jameseck . I'll re-open this issue until I have a chance to play with the configuration you have provided and see if I can detect any slowdown.

As this is a fairly niche issue, it may not be soon ...

rohankapoorcom commented 11 months ago

Hey @dermotduffy - I'm a recent Frigate convert (from Zoneminder) so I started using the card recently as well. I use the custom layout card extensively in my dashboards and have also noticed the massive amount of lag when the Frigate cards are loaded on lowered powered devices. This is particularly bad with webrtc mode enabled, but there is still some lag with mse mode as well. To prevent the tablets from completely locking up, I ended up having to switch to using the picture-entity card in the layout and then triggering the frigate card in a browser_mod popup.

Viewing the video feeds directly in the Frigate webapp did not exhibit the same lagging behavior. I also saw better performance when using mse mode here as well.

Devices that worked well:

iPad Pro 12" Gen 5
Samsung Galaxy Z Fold 4
Desktop (I9 11th gen)
Laptop (i9 12th gen)

Devices that struggled:

Fire HD 10 11th gen (3GB Ram)
Fire Max 11 (4GB Ram)
iPad 7th generation
Fire HD 8 Plus 2022 (3GB Ram)

My dashboard code is here: https://github.com/rohankapoorcom/homeassistant-config/blob/master/dashboards/components/panels/cameras.yaml. If it's helpful, I can make a self contained example.

dermotduffy commented 11 months ago

@rohankapoorcom And to confirm, without layout card, everything seems better? Just checking it belongs in this issue!

As this seems to only impact a small fraction of users in certain configurations, I'm afraid I haven't been able to prioritize spending time diagnosing this. Recommend upvoting (add a thumb up) to the top post to increase the odds of getting prioritization (or even better, see you can figure out what's going on yourself!).

rohankapoorcom commented 11 months ago

@dermotduffy - Yes, I can confirm that the performance is improved without the layout card. I'll take a look and see if I discover anything that could point to the cause of performance issues...

Hannsre commented 7 months ago

Hey, sorry I couldn't check back on this issue for quite a while. I just found some time to play around a bit and also updated to frigate v0.13, then also updated the frigate plugin for HA and Frigate Card as well.

The issue immediately came back, but I couldn't solve it by switching to a regular lovelace layout like before. Just adding a single card to a new, empty, default dashboard adds about 10% CPU load on a Ryzen 7 4800H. Each additional camera adds another 5-10%.

I changed a few dashboards to regular grid view, even restarted HA but views with more than a single camera are borderline usable at best, if the hardware is capable enough.

I removed layout card completely to make sure that it's sole existence isn't the issue but it did nothing to solve the performance issues. For now I removed all cameras from my dashboards as a downgrade to v4 also doesn't work after updating frigate.

If there's anything I can check to help figuring this out let me know, I'm out of Ideas what else to try. I know this is an absolute edge case so there's more important things to do, but hopefully someone has an idea.

dermotduffy commented 6 days ago

[Issue cleanup] If you still have issues with this, please try the latest release (https://github.com/dermotduffy/frigate-hass-card/releases/tag/v6.0.0-beta.4) first and re-open this. Thanks and good luck!

dermotduffy / frigate-hass-card

`v5` series card performs poorly when used with `lovelace-layout-card` #1112