search

blakeblackshear / frigate

NVR with realtime local object detection for IP cameras
https://frigate.video
MIT License
19.02k stars 1.74k forks source link

Improve UI performance for systems with large number of cameras #13239

Open paco-atiiienza opened 2 months ago

paco-atiiienza commented 2 months ago

Describe what you are trying to accomplish and why in non technical terms I want to fix slow browser performance when loading/updating these pages on systems with excessive cameras.

Describe the solution you'd like Making these pages have tabs with a max of 20 cameras ie.

Describe alternatives you've considered Obviously on Live I generally use camera groups that has the same effect and works perfectly, but have included it as I feel it's warranted for 'All Cameras' as default page that's loaded and in case of system using the bottom right alerts instead.

Additional context Especially the system one is an extreme use case as I have right now 150+ cameras, just thought worth posting as maybe useful for slower machines on reasonable setups.

aaronjrodrigues commented 2 months ago

I noticed that the issue is prevalent in the newer version of frigate, video performance is really bad on 0.14.0 and I ended up up reverting back to 0.13.2

TutenStain commented 2 months ago

I am echoing the above comment as the new UI is noticeable slower generally than the outgoing previous version. It’s running on sufficiently performant hardware and I did not notice slowdowns on the previous version. I realize that this comment might sound empty as I do not have performance measurements to bring to the table but thought I still mention it. Running with 7+ cameras.

Daniel-dev22 commented 2 months ago

I noticed that the issue is prevalent in the newer version of frigate, video performance is really bad on 0.14.0 and I ended up up reverting back to 0.13.2

It would be good to see a recording of what you mean so that the devs can take a look at it.

Daniel-dev22 commented 2 months ago

I am echoing the above comment as the new UI is noticeable slower generally than the outgoing previous version. It’s running on sufficiently performant hardware and I did not notice slowdowns on the previous version. I realize that this comment might sound empty as I do not have performance measurements to bring to the table but thought I still mention it. Running with 7+ cameras.

Do you have a recording of this issue happening? It would help the devs see what's happening as there's no way to know without seeing it.

markfrancisonly commented 2 months ago

Wow, I was going to say the exact opposite! My video server cpu utilization has plummeted in v14, and literally been cut in half. Would like to hear what type of processor and camera resolutions for slower performance?

My server is running a 13th gen Intel i7-13700T with preset-vaapi, 128GB ram, and a dual TPU pci-e card . I couldn't find the 35 watt cpu locally, took a chance and ordered from overseas. My client is running on a 14th gen i7-14700K with 128GB ram, nvidia 1080 gpu, chrome hardware acceleration.

aaronjrodrigues commented 2 months ago

I noticed that the issue is prevalent in the newer version of frigate, video performance is really bad on 0.14.0 and I ended up up reverting back to 0.13.2

It would be good to see a recording of what you mean so that the devs can take a look at it.

Alright so basically there is this weird issue where the other half of my video feed is just green, this happens for most of my cameras and fixes itself when I'm scrolling but when I stop scrolling it starts again.

Here is a screenshot, the blurred part to the left is my camera feed.

Screenshot 2024-08-28 at 7 39 46 PM

paco-atiiienza commented 2 months ago

Wow, I was going to say the exact opposite! My video server cpu utilization has plummeted in v14, and literally been cut in half. Would like to hear what type of processor and camera resolutions for slower performance?

My server is running a 13th gen Intel i7-13700T with preset-vaapi, 128GB ram, and a dual TPU pci-e card . I couldn't find the 35 watt cpu locally, took a chance and ordered from overseas. My client is running on a 14th gen i7-14700K with 128GB ram, nvidia 1080 gpu, chrome hardware acceleration.

This is refering to UI/Web browser performance. Not server performance.

paco-atiiienza commented 2 months ago

I noticed that the issue is prevalent in the newer version of frigate, video performance is really bad on 0.14.0 and I ended up up reverting back to 0.13.2

It would be good to see a recording of what you mean so that the devs can take a look at it.

https://github.com/user-attachments/assets/f6f9fd35-4d8c-44eb-8b33-b4569b7c8e7e

This issue is that all cameras load despite being offscreen and in my case there being 150+ cameras. This on top of camera images being in nearly all pages causes slow UI performance.

In the attached video you can see it takes from sec 2 to 12 to load only the timeline and assets due to the hit of loading the cameras.

I also have logs of nginx sending all the camera images to confirm this is the case if not obvious in the video.

For a fix I originally said tabs but lazy loading would probably solve it too.

NickM-27 commented 2 months ago

The camera images still load (this is something that could be improved) but a steam will only load if the camera is visible. On the review page image loading is already set to lazy loading unless you're using Safari because lazy loading is broken in Safari

paco-atiiienza commented 2 months ago

The camera images still load (this is something that could be improved) but a steam will only load if the camera is visible. On the review page image loading is already set to lazy loading unless you're using Safari because lazy loading is broken in Safari

refresh to event load

Here is my performance tab for just a refresh of the review page till the event video loads (no scrolling past the 7 thumbnails you can see within a view). As you can see all the thumbnails are being downloaded despite being out of view, ive checked and its for all the 200 camaras ive got using up alot of network/cpu resources as its done each time you change page/event.

Pretty sure in my case is the cause as the video loads when the thumnails stop loading.

NickM-27 commented 2 months ago

that would likely be an issue with the browser then, because the browser is being instructed to load the images lazily https://github.com/blakeblackshear/frigate/blob/6a0b5c3a3fa799f3a6843546ee5da81bb4b4739e/web/src/components/player/PreviewThumbnailPlayer.tsx#L213

when I test on chrome, I can scroll down and see more images loading as I scroll which indicates only visible images are downloaded when the page opens

paco-atiiienza commented 2 months ago

Im on chrome 128.0.6613.113 (64 bits). I see an update pending and will update if changed on latest version.

paco-atiiienza commented 2 months ago

that would likely be an issue with the browser then, because the browser is being instructed to load the images lazily

https://github.com/blakeblackshear/frigate/blob/6a0b5c3a3fa799f3a6843546ee5da81bb4b4739e/web/src/components/player/PreviewThumbnailPlayer.tsx#L213

when I test on chrome, I can scroll down and see more images loading as I scroll which indicates only visible images are downloaded when the page opens

No luck on latest 128.0.6613.114 (64 bits) chrome or 129.0.2 (64-bit) firefox. They both exhibit this behavior. As can be seen in this screenshot of firefox network.

firefox network

NickM-27 commented 2 months ago

a screenshot doesn't really show anything, naturally images will load. But the images should only load for the visible items plus a few items below the fold. When the page is scrolled further down more images will load, but there is no way to show if this is behaving correctly or not with a screenshot.

NickM-27 commented 2 months ago

For example, here is me scrolling a few times gradually

https://github.com/user-attachments/assets/c2971ea1-87d0-478a-9683-ee5385e14d23

paco-atiiienza commented 2 months ago

Here, if need a better video just ask!

https://github.com/user-attachments/assets/98fe1578-82ab-482d-8a85-9006b40b7b67

NickM-27 commented 2 months ago

I realize I was talking about a different screen then you are referring to, the recording viewer screen will be much more difficult to lazy load, will have to see what can be done.

paco-atiiienza commented 2 months ago

Sure, thanks!

It seems to happen on Live page too.

https://github.com/user-attachments/assets/6f2039cd-1c47-4da5-b3ff-7dc18bcf87d5

Also seems to do it twice, as the same thumbnail shows twice in two batches.

https://github.com/user-attachments/assets/2feeb54d-2756-4ea7-b08d-3509348cf367

setterlee commented 1 month ago

anybody tested the new version with the tweeks implemented? In my case like @aaronjrodrigues, after noticed that the UI for the 0.14 version have a slower performance than the 0.13 I made an rollback...

paco-atiiienza commented 4 weeks ago

anybody tested the new version with the tweeks implemented? In my case like @aaronjrodrigues, after noticed that the UI for the 0.14 version have a slower performance than the 0.13 I made an rollback...

Live works perfectly. Loading only the cameras till around 250vh. In my case, gone from around 11 secs to a 2 sec load.

Still pending the recording viewer, it seems all cameras Frame JSON is loaded delaying the video, but it was already clarified it wasn't an easy task and this is an edge case.

Anyway, if you don't work with 40+ cameras, I doubt this will cause any noticeable difference, but for me, this is a game changer, so special thanks to Nick for the progress already accomplished.

mdv0 commented 4 days ago

I have noticed this too and face the same problem: the performance of the review tab is significantly slower compared to version 13. In version 13, we didn't have a review tab, but the 'All Alerts' tab provided a similar function. Scrolling through and viewing alert clips, as well as playback, was much quicker and smoother compared to version 14.