Merge 3d7ec502cb into dd9497baf2

* refactor camera cleanup code to generic util

* add api endpoint for deleting a camera

* frontend

* i18n

* clean up

docs/docs/integrations/mqtt.md

@@ -159,7 +159,8 @@ Published when a license plate is recognized on a car object. See the [License P
   "plate": "123ABC",
   "score": 0.95,
   "camera": "driveway_cam",
-  "timestamp": 1607123958.748393
+  "timestamp": 1607123958.748393,
+  "plate_box": [917, 487, 1029, 529] // box coordinates of the detected license plate in the frame
 }
 ```
 

frigate/api/camera.py

@@ -1,5 +1,6 @@
 """Camera apis."""
 
+import asyncio
 import json
 import logging
 import re
@@ -11,7 +12,9 @@ import httpx
 import requests
 from fastapi import APIRouter, Depends, Query, Request, Response
 from fastapi.responses import JSONResponse
+from filelock import FileLock, Timeout
 from onvif import ONVIFCamera, ONVIFError
+from ruamel.yaml import YAML
 from zeep.exceptions import Fault, TransportError
 from zeep.transports import AsyncTransport
 
@@ -21,8 +24,14 @@ from frigate.api.auth import (
     require_role,
 )
 from frigate.api.defs.tags import Tags
-from frigate.config.config import FrigateConfig
+from frigate.config import FrigateConfig
+from frigate.config.camera.updater import (
+    CameraConfigUpdateEnum,
+    CameraConfigUpdateTopic,
+)
 from frigate.util.builtin import clean_camera_user_pass
+from frigate.util.camera_cleanup import cleanup_camera_db, cleanup_camera_files
+from frigate.util.config import find_config_file
 from frigate.util.image import run_ffmpeg_snapshot
 from frigate.util.services import ffprobe_stream
 
@@ -995,3 +1004,154 @@ async def onvif_probe(
                     await onvif_camera.close()
             except Exception as e:
                 logger.debug(f"Error closing ONVIF camera session: {e}")
+
+
+@router.delete(
+    "/cameras/{camera_name}",
+    dependencies=[Depends(require_role(["admin"]))],
+)
+async def delete_camera(
+    request: Request,
+    camera_name: str,
+    delete_exports: bool = Query(default=False),
+):
+    """Delete a camera and all its associated data.
+
+    Removes the camera from config, stops processes, and cleans up
+    all database entries and media files.
+
+    Args:
+        camera_name: Name of the camera to delete
+        delete_exports: Whether to also delete exports for this camera
+    """
+    frigate_config: FrigateConfig = request.app.frigate_config
+
+    if camera_name not in frigate_config.cameras:
+        return JSONResponse(
+            content={
+                "success": False,
+                "message": f"Camera {camera_name} not found",
+            },
+            status_code=404,
+        )
+
+    old_camera_config = frigate_config.cameras[camera_name]
+    config_file = find_config_file()
+    lock = FileLock(f"{config_file}.lock", timeout=5)
+
+    try:
+        with lock:
+            with open(config_file, "r") as f:
+                old_raw_config = f.read()
+
+            try:
+                yaml = YAML()
+                yaml.indent(mapping=2, sequence=4, offset=2)
+
+                with open(config_file, "r") as f:
+                    data = yaml.load(f)
+
+                # Remove camera from config
+                if "cameras" in data and camera_name in data["cameras"]:
+                    del data["cameras"][camera_name]
+
+                # Remove camera from auth roles
+                auth = data.get("auth", {})
+                if auth and "roles" in auth:
+                    empty_roles = []
+                    for role_name, cameras_list in auth["roles"].items():
+                        if (
+                            isinstance(cameras_list, list)
+                            and camera_name in cameras_list
+                        ):
+                            cameras_list.remove(camera_name)
+                            # Custom roles can't be empty; mark for removal
+                            if not cameras_list and role_name not in (
+                                "admin",
+                                "viewer",
+                            ):
+                                empty_roles.append(role_name)
+                    for role_name in empty_roles:
+                        del auth["roles"][role_name]
+
+                with open(config_file, "w") as f:
+                    yaml.dump(data, f)
+
+                with open(config_file, "r") as f:
+                    new_raw_config = f.read()
+
+                try:
+                    config = FrigateConfig.parse(new_raw_config)
+                except Exception:
+                    with open(config_file, "w") as f:
+                        f.write(old_raw_config)
+                    logger.exception(
+                        "Config error after removing camera %s",
+                        camera_name,
+                    )
+                    return JSONResponse(
+                        content={
+                            "success": False,
+                            "message": "Error parsing config after camera removal",
+                        },
+                        status_code=400,
+                    )
+            except Exception as e:
+                logger.error(
+                    "Error updating config to remove camera %s: %s", camera_name, e
+                )
+                return JSONResponse(
+                    content={
+                        "success": False,
+                        "message": "Error updating config",
+                    },
+                    status_code=500,
+                )
+
+            # Update runtime config
+            request.app.frigate_config = config
+            request.app.genai_manager.update_config(config)
+
+            # Publish removal to stop ffmpeg processes and clean up runtime state
+            request.app.config_publisher.publish_update(
+                CameraConfigUpdateTopic(CameraConfigUpdateEnum.remove, camera_name),
+                old_camera_config,
+            )
+
+    except Timeout:
+        return JSONResponse(
+            content={
+                "success": False,
+                "message": "Another process is currently updating the config",
+            },
+            status_code=409,
+        )
+
+    # Clean up database entries
+    counts, export_paths = await asyncio.to_thread(
+        cleanup_camera_db, camera_name, delete_exports
+    )
+
+    # Clean up media files in background thread
+    await asyncio.to_thread(
+        cleanup_camera_files, camera_name, export_paths if delete_exports else None
+    )
+
+    # Best-effort go2rtc stream removal
+    try:
+        requests.delete(
+            "http://127.0.0.1:1984/api/streams",
+            params={"src": camera_name},
+            timeout=5,
+        )
+    except Exception:
+        logger.debug("Failed to remove go2rtc stream for %s", camera_name)
+
+    return JSONResponse(
+        content={
+            "success": True,
+            "message": f"Camera {camera_name} has been deleted",
+            "cleanup": counts,
+        },
+        status_code=200,
+    )

frigate/data_processing/common/license_plate/mixin.py

@@ -1225,6 +1225,8 @@ class LicensePlateProcessingMixin:
                 logger.debug(f"{camera}: License plate area below minimum threshold.")
                 return
 
+            plate_box = license_plate
+
             license_plate_frame = rgb[
                 license_plate[1] : license_plate[3],
                 license_plate[0] : license_plate[2],
@@ -1341,6 +1343,20 @@ class LicensePlateProcessingMixin:
                     logger.debug(f"{camera}: License plate is less than min_area")
                     return
 
+                # Scale back to original car coordinates and then to frame
+                plate_box_in_car = (
+                    license_plate[0] // 2,
+                    license_plate[1] // 2,
+                    license_plate[2] // 2,
+                    license_plate[3] // 2,
+                )
+                plate_box = (
+                    left + plate_box_in_car[0],
+                    top + plate_box_in_car[1],
+                    left + plate_box_in_car[2],
+                    top + plate_box_in_car[3],
+                )
+
                 license_plate_frame = car[
                     license_plate[1] : license_plate[3],
                     license_plate[0] : license_plate[2],
@@ -1404,6 +1420,8 @@ class LicensePlateProcessingMixin:
                     0, [license_plate_frame.shape[1], license_plate_frame.shape[0]] * 2
                 )
 
+                plate_box = tuple(int(x) for x in expanded_box)
+
                 # Crop using the expanded box
                 license_plate_frame = license_plate_frame[
                     int(expanded_box[1]) : int(expanded_box[3]),
@@ -1611,6 +1629,7 @@ class LicensePlateProcessingMixin:
                     "id": id,
                     "camera": camera,
                     "timestamp": start,
+                    "plate_box": plate_box,
                 }
             ),
         )

frigate/data_processing/post/api.py

@@ -50,3 +50,16 @@ class PostProcessorApi(ABC):
             None if request was not handled, otherwise return response.
         """
         pass
+
+    def update_config(self, topic: str, payload: Any) -> None:
+        """Handle a config change notification.
+
+        Called for every config update published under ``config/``.
+        Processors should override this to check the topic and act only
+        on changes relevant to them. Default is a no-op.
+
+        Args:
+            topic: The config topic that changed.
+            payload: The updated configuration object.
+        """
+        pass

frigate/data_processing/post/license_plate.py

@@ -12,7 +12,6 @@ from frigate.comms.embeddings_updater import EmbeddingsRequestEnum
 from frigate.comms.event_metadata_updater import EventMetadataPublisher
 from frigate.comms.inter_process import InterProcessRequestor
 from frigate.config import FrigateConfig
-from frigate.config.classification import LicensePlateRecognitionConfig
 from frigate.data_processing.common.license_plate.mixin import (
     WRITE_DEBUG_IMAGES,
     LicensePlateProcessingMixin,
@@ -48,10 +47,15 @@ class LicensePlatePostProcessor(LicensePlateProcessingMixin, PostProcessorApi):
         self.sub_label_publisher = sub_label_publisher
         super().__init__(config, metrics, model_runner)
 
-    def update_config(self, lpr_config: LicensePlateRecognitionConfig) -> None:
+    CONFIG_UPDATE_TOPIC = "config/lpr"
+
+    def update_config(self, topic: str, payload: Any) -> None:
         """Update LPR config at runtime."""
-        self.lpr_config = lpr_config
-        logger.debug("LPR config updated dynamically")
+        if topic != self.CONFIG_UPDATE_TOPIC:
+            return
+
+        self.lpr_config = payload
+        logger.debug("LPR post-processor config updated dynamically")
 
     def process_data(
         self, data: dict[str, Any], data_type: PostProcessDataEnum

frigate/data_processing/real_time/api.py

@@ -61,3 +61,16 @@ class RealTimeProcessorApi(ABC):
             None.
         """
         pass
+
+    def update_config(self, topic: str, payload: Any) -> None:
+        """Handle a config change notification.
+
+        Called for every config update published under ``config/``.
+        Processors should override this to check the topic and act only
+        on changes relevant to them. Default is a no-op.
+
+        Args:
+            topic: The config topic that changed.
+            payload: The updated configuration object.
+        """
+        pass

frigate/data_processing/real_time/bird.py

@@ -169,6 +169,16 @@ class BirdRealTimeProcessor(RealTimeProcessorApi):
         )
         self.detected_birds[obj_data["id"]] = score
 
+    CONFIG_UPDATE_TOPIC = "config/classification"
+
+    def update_config(self, topic: str, payload: Any) -> None:
+        """Update bird classification config at runtime."""
+        if topic != self.CONFIG_UPDATE_TOPIC:
+            return
+
+        self.config.classification = payload
+        logger.debug("Bird classification config updated dynamically")
+
     def handle_request(self, topic, request_data):
         return None
 

frigate/data_processing/real_time/face.py

@@ -19,7 +19,6 @@ from frigate.comms.event_metadata_updater import (
 )
 from frigate.comms.inter_process import InterProcessRequestor
 from frigate.config import FrigateConfig
-from frigate.config.classification import FaceRecognitionConfig
 from frigate.const import FACE_DIR, MODEL_CACHE_DIR
 from frigate.data_processing.common.face.model import (
     ArcFaceRecognizer,
@@ -96,9 +95,21 @@ class FaceRealTimeProcessor(RealTimeProcessorApi):
 
         self.recognizer.build()
 
-    def update_config(self, face_config: FaceRecognitionConfig) -> None:
+    CONFIG_UPDATE_TOPIC = "config/face_recognition"
+
+    def update_config(self, topic: str, payload: Any) -> None:
         """Update face recognition config at runtime."""
-        self.face_config = face_config
+        if topic != self.CONFIG_UPDATE_TOPIC:
+            return
+
+        previous_min_area = self.config.face_recognition.min_area
+        self.config.face_recognition = payload
+        self.face_config = payload
+
+        for camera_config in self.config.cameras.values():
+            if camera_config.face_recognition.min_area == previous_min_area:
+                camera_config.face_recognition.min_area = payload.min_area
+
         logger.debug("Face recognition config updated dynamically")
 
     def __download_models(self, path: str) -> None:

frigate/data_processing/real_time/license_plate.py

@@ -8,7 +8,6 @@ import numpy as np
 from frigate.comms.event_metadata_updater import EventMetadataPublisher
 from frigate.comms.inter_process import InterProcessRequestor
 from frigate.config import FrigateConfig
-from frigate.config.classification import LicensePlateRecognitionConfig
 from frigate.data_processing.common.license_plate.mixin import (
     LicensePlateProcessingMixin,
 )
@@ -41,9 +40,21 @@ class LicensePlateRealTimeProcessor(LicensePlateProcessingMixin, RealTimeProcess
         self.camera_current_cars: dict[str, list[str]] = {}
         super().__init__(config, metrics)
 
-    def update_config(self, lpr_config: LicensePlateRecognitionConfig) -> None:
+    CONFIG_UPDATE_TOPIC = "config/lpr"
+
+    def update_config(self, topic: str, payload: Any) -> None:
         """Update LPR config at runtime."""
-        self.lpr_config = lpr_config
+        if topic != self.CONFIG_UPDATE_TOPIC:
+            return
+
+        previous_min_area = self.config.lpr.min_area
+        self.config.lpr = payload
+        self.lpr_config = payload
+
+        for camera_config in self.config.cameras.values():
+            if camera_config.lpr.min_area == previous_min_area:
+                camera_config.lpr.min_area = payload.min_area
+
         logger.debug("LPR config updated dynamically")
 
     def process_frame(

frigate/debug_replay.py

@@ -21,7 +21,8 @@ from frigate.const import (
     REPLAY_DIR,
     THUMB_DIR,
 )
-from frigate.models import Event, Recordings, ReviewSegment, Timeline
+from frigate.models import Recordings
+from frigate.util.camera_cleanup import cleanup_camera_db, cleanup_camera_files
 from frigate.util.config import find_config_file
 
 logger = logging.getLogger(__name__)
@@ -357,43 +358,13 @@ class DebugReplayManager:
 
     def _cleanup_db(self, camera_name: str) -> None:
         """Defensively remove any database rows for the replay camera."""
-        try:
-            Event.delete().where(Event.camera == camera_name).execute()
-        except Exception as e:
-            logger.error("Failed to delete replay events: %s", e)
-
-        try:
-            Timeline.delete().where(Timeline.camera == camera_name).execute()
-        except Exception as e:
-            logger.error("Failed to delete replay timeline: %s", e)
-
-        try:
-            Recordings.delete().where(Recordings.camera == camera_name).execute()
-        except Exception as e:
-            logger.error("Failed to delete replay recordings: %s", e)
-
-        try:
-            ReviewSegment.delete().where(ReviewSegment.camera == camera_name).execute()
-        except Exception as e:
-            logger.error("Failed to delete replay review segments: %s", e)
+        cleanup_camera_db(camera_name)
 
     def _cleanup_files(self, camera_name: str) -> None:
         """Remove filesystem artifacts for the replay camera."""
-        dirs_to_clean = [
-            os.path.join(RECORD_DIR, camera_name),
-            os.path.join(CLIPS_DIR, camera_name),
-            os.path.join(THUMB_DIR, camera_name),
-        ]
+        cleanup_camera_files(camera_name)
 
-        for dir_path in dirs_to_clean:
-            if os.path.exists(dir_path):
-                try:
-                    shutil.rmtree(dir_path)
-                    logger.debug("Removed replay directory: %s", dir_path)
-                except Exception as e:
-                    logger.error("Failed to remove %s: %s", dir_path, e)
-
-        # Remove replay clip and any related files
+        # Remove replay-specific cache directory
         if os.path.exists(REPLAY_DIR):
             try:
                 shutil.rmtree(REPLAY_DIR)

frigate/embeddings/maintainer.py

@@ -96,16 +96,7 @@ class EmbeddingMaintainer(threading.Thread):
                 CameraConfigUpdateEnum.semantic_search,
             ],
         )
-        self.classification_config_subscriber = ConfigSubscriber(
-            "config/classification/custom/"
-        )
-        self.bird_classification_config_subscriber = ConfigSubscriber(
-            "config/classification", exact=True
-        )
-        self.face_recognition_config_subscriber = ConfigSubscriber(
-            "config/face_recognition", exact=True
-        )
-        self.lpr_config_subscriber = ConfigSubscriber("config/lpr", exact=True)
+        self.enrichment_config_subscriber = ConfigSubscriber("config/")
 
         # Configure Frigate DB
         db = SqliteVecQueueDatabase(
@@ -280,10 +271,7 @@ class EmbeddingMaintainer(threading.Thread):
         """Maintain a SQLite-vec database for semantic search."""
         while not self.stop_event.is_set():
             self.config_updater.check_for_updates()
-            self._check_classification_config_updates()
-            self._check_bird_classification_config_updates()
-            self._check_face_recognition_config_updates()
-            self._check_lpr_config_updates()
+            self._check_enrichment_config_updates()
             self._process_requests()
             self._process_updates()
             self._process_recordings_updates()
@@ -294,10 +282,7 @@ class EmbeddingMaintainer(threading.Thread):
             self._process_event_metadata()
 
         self.config_updater.stop()
-        self.classification_config_subscriber.stop()
-        self.bird_classification_config_subscriber.stop()
-        self.face_recognition_config_subscriber.stop()
-        self.lpr_config_subscriber.stop()
+        self.enrichment_config_subscriber.stop()
         self.event_subscriber.stop()
         self.event_end_subscriber.stop()
         self.recordings_subscriber.stop()
@@ -308,124 +293,87 @@ class EmbeddingMaintainer(threading.Thread):
         self.requestor.stop()
         logger.info("Exiting embeddings maintenance...")
 
-    def _check_classification_config_updates(self) -> None:
-        """Check for classification config updates and add/remove processors."""
-        topic, model_config = self.classification_config_subscriber.check_for_update()
+    def _check_enrichment_config_updates(self) -> None:
+        """Check for enrichment config updates and delegate to processors."""
+        topic, payload = self.enrichment_config_subscriber.check_for_update()
 
-        if topic:
-            model_name = topic.split("/")[-1]
+        if topic is None:
+            return
 
-            if model_config is None:
-                self.realtime_processors = [
-                    processor
-                    for processor in self.realtime_processors
-                    if not (
-                        isinstance(
-                            processor,
-                            (
-                                CustomStateClassificationProcessor,
-                                CustomObjectClassificationProcessor,
-                            ),
-                        )
-                        and processor.model_config.name == model_name
-                    )
-                ]
+        # Custom classification add/remove requires managing the processor list
+        if topic.startswith("config/classification/custom/"):
+            self._handle_custom_classification_update(topic, payload)
+            return
 
-                logger.info(
-                    f"Successfully removed classification processor for model: {model_name}"
-                )
-            else:
-                self.config.classification.custom[model_name] = model_config
+        # Broadcast to all processors — each decides if the topic is relevant
+        for processor in self.realtime_processors:
+            processor.update_config(topic, payload)
 
-                # Check if processor already exists
-                for processor in self.realtime_processors:
-                    if isinstance(
+        for processor in self.post_processors:
+            processor.update_config(topic, payload)
+
+    def _handle_custom_classification_update(
+        self, topic: str, model_config: Any
+    ) -> None:
+        """Handle add/remove of custom classification processors."""
+        model_name = topic.split("/")[-1]
+
+        if model_config is None:
+            self.realtime_processors = [
+                processor
+                for processor in self.realtime_processors
+                if not (
+                    isinstance(
                         processor,
                         (
                             CustomStateClassificationProcessor,
                             CustomObjectClassificationProcessor,
                         ),
-                    ):
-                        if processor.model_config.name == model_name:
-                            logger.debug(
-                                f"Classification processor for model {model_name} already exists, skipping"
-                            )
-                            return
-
-                if model_config.state_config is not None:
-                    processor = CustomStateClassificationProcessor(
-                        self.config, model_config, self.requestor, self.metrics
                     )
-                else:
-                    processor = CustomObjectClassificationProcessor(
-                        self.config,
-                        model_config,
-                        self.event_metadata_publisher,
-                        self.requestor,
-                        self.metrics,
-                    )
-
-                self.realtime_processors.append(processor)
-                logger.info(
-                    f"Added classification processor for model: {model_name} (type: {type(processor).__name__})"
+                    and processor.model_config.name == model_name
                 )
+            ]
 
-    def _check_bird_classification_config_updates(self) -> None:
-        """Check for bird classification config updates."""
-        topic, classification_config = (
-            self.bird_classification_config_subscriber.check_for_update()
+            logger.info(
+                f"Successfully removed classification processor for model: {model_name}"
+            )
+            return
+
+        self.config.classification.custom[model_name] = model_config
+
+        # Check if processor already exists
+        for processor in self.realtime_processors:
+            if isinstance(
+                processor,
+                (
+                    CustomStateClassificationProcessor,
+                    CustomObjectClassificationProcessor,
+                ),
+            ):
+                if processor.model_config.name == model_name:
+                    logger.debug(
+                        f"Classification processor for model {model_name} already exists, skipping"
+                    )
+                    return
+
+        if model_config.state_config is not None:
+            processor = CustomStateClassificationProcessor(
+                self.config, model_config, self.requestor, self.metrics
+            )
+        else:
+            processor = CustomObjectClassificationProcessor(
+                self.config,
+                model_config,
+                self.event_metadata_publisher,
+                self.requestor,
+                self.metrics,
+            )
+
+        self.realtime_processors.append(processor)
+        logger.info(
+            f"Added classification processor for model: {model_name} (type: {type(processor).__name__})"
         )
 
-        if topic is None:
-            return
-
-        self.config.classification = classification_config
-        logger.debug("Applied dynamic bird classification config update")
-
-    def _check_face_recognition_config_updates(self) -> None:
-        """Check for face recognition config updates."""
-        topic, face_config = self.face_recognition_config_subscriber.check_for_update()
-
-        if topic is None:
-            return
-
-        previous_min_area = self.config.face_recognition.min_area
-        self.config.face_recognition = face_config
-
-        for camera_config in self.config.cameras.values():
-            if camera_config.face_recognition.min_area == previous_min_area:
-                camera_config.face_recognition.min_area = face_config.min_area
-
-        for processor in self.realtime_processors:
-            if isinstance(processor, FaceRealTimeProcessor):
-                processor.update_config(face_config)
-
-        logger.debug("Applied dynamic face recognition config update")
-
-    def _check_lpr_config_updates(self) -> None:
-        """Check for LPR config updates."""
-        topic, lpr_config = self.lpr_config_subscriber.check_for_update()
-
-        if topic is None:
-            return
-
-        previous_min_area = self.config.lpr.min_area
-        self.config.lpr = lpr_config
-
-        for camera_config in self.config.cameras.values():
-            if camera_config.lpr.min_area == previous_min_area:
-                camera_config.lpr.min_area = lpr_config.min_area
-
-        for processor in self.realtime_processors:
-            if isinstance(processor, LicensePlateRealTimeProcessor):
-                processor.update_config(lpr_config)
-
-        for processor in self.post_processors:
-            if isinstance(processor, LicensePlatePostProcessor):
-                processor.update_config(lpr_config)
-
-        logger.debug("Applied dynamic LPR config update")
-
     def _process_requests(self) -> None:
         """Process embeddings requests"""
 

frigate/util/camera_cleanup.py

@@ -0,0 +1,153 @@
+"""Utilities for cleaning up camera data from database and filesystem."""
+
+import glob
+import logging
+import os
+import shutil
+
+from frigate.const import CLIPS_DIR, RECORD_DIR, THUMB_DIR
+from frigate.models import (
+    Event,
+    Export,
+    Previews,
+    Recordings,
+    Regions,
+    ReviewSegment,
+    Timeline,
+    Trigger,
+)
+
+logger = logging.getLogger(__name__)
+
+
+def cleanup_camera_db(
+    camera_name: str, delete_exports: bool = False
+) -> tuple[dict[str, int], list[str]]:
+    """Remove all database rows for a camera.
+
+    Args:
+        camera_name: The camera name to clean up
+        delete_exports: Whether to also delete export records
+
+    Returns:
+        Tuple of (deletion counts dict, list of export file paths to remove)
+    """
+    counts: dict[str, int] = {}
+    export_paths: list[str] = []
+
+    try:
+        counts["events"] = Event.delete().where(Event.camera == camera_name).execute()
+    except Exception as e:
+        logger.error("Failed to delete events for camera %s: %s", camera_name, e)
+
+    try:
+        counts["timeline"] = (
+            Timeline.delete().where(Timeline.camera == camera_name).execute()
+        )
+    except Exception as e:
+        logger.error("Failed to delete timeline for camera %s: %s", camera_name, e)
+
+    try:
+        counts["recordings"] = (
+            Recordings.delete().where(Recordings.camera == camera_name).execute()
+        )
+    except Exception as e:
+        logger.error("Failed to delete recordings for camera %s: %s", camera_name, e)
+
+    try:
+        counts["review_segments"] = (
+            ReviewSegment.delete().where(ReviewSegment.camera == camera_name).execute()
+        )
+    except Exception as e:
+        logger.error(
+            "Failed to delete review segments for camera %s: %s", camera_name, e
+        )
+
+    try:
+        counts["previews"] = (
+            Previews.delete().where(Previews.camera == camera_name).execute()
+        )
+    except Exception as e:
+        logger.error("Failed to delete previews for camera %s: %s", camera_name, e)
+
+    try:
+        counts["regions"] = (
+            Regions.delete().where(Regions.camera == camera_name).execute()
+        )
+    except Exception as e:
+        logger.error("Failed to delete regions for camera %s: %s", camera_name, e)
+
+    try:
+        counts["triggers"] = (
+            Trigger.delete().where(Trigger.camera == camera_name).execute()
+        )
+    except Exception as e:
+        logger.error("Failed to delete triggers for camera %s: %s", camera_name, e)
+
+    if delete_exports:
+        try:
+            exports = Export.select(Export.video_path, Export.thumb_path).where(
+                Export.camera == camera_name
+            )
+            for export in exports:
+                export_paths.append(export.video_path)
+                export_paths.append(export.thumb_path)
+
+            counts["exports"] = (
+                Export.delete().where(Export.camera == camera_name).execute()
+            )
+        except Exception as e:
+            logger.error("Failed to delete exports for camera %s: %s", camera_name, e)
+
+    return counts, export_paths
+
+
+def cleanup_camera_files(
+    camera_name: str, export_paths: list[str] | None = None
+) -> None:
+    """Remove filesystem artifacts for a camera.
+
+    Args:
+        camera_name: The camera name to clean up
+        export_paths: Optional list of export file paths to remove
+    """
+    dirs_to_clean = [
+        os.path.join(RECORD_DIR, camera_name),
+        os.path.join(CLIPS_DIR, camera_name),
+        os.path.join(THUMB_DIR, camera_name),
+        os.path.join(CLIPS_DIR, "previews", camera_name),
+    ]
+
+    for dir_path in dirs_to_clean:
+        if os.path.exists(dir_path):
+            try:
+                shutil.rmtree(dir_path)
+                logger.debug("Removed directory: %s", dir_path)
+            except Exception as e:
+                logger.error("Failed to remove %s: %s", dir_path, e)
+
+    # Remove event snapshot files
+    for snapshot in glob.glob(os.path.join(CLIPS_DIR, f"{camera_name}-*.jpg")):
+        try:
+            os.remove(snapshot)
+        except Exception as e:
+            logger.error("Failed to remove snapshot %s: %s", snapshot, e)
+
+    # Remove review thumbnail files
+    for thumb in glob.glob(
+        os.path.join(CLIPS_DIR, "review", f"thumb-{camera_name}-*.webp")
+    ):
+        try:
+            os.remove(thumb)
+        except Exception as e:
+            logger.error("Failed to remove review thumbnail %s: %s", thumb, e)
+
+    # Remove export files if requested
+    if export_paths:
+        for path in export_paths:
+            if path and os.path.exists(path):
+                try:
+                    os.remove(path)
+                    logger.debug("Removed export file: %s", path)
+                except Exception as e:
+                    logger.error("Failed to remove export file %s: %s", path, e)

web/public/locales/en/views/settings.json

@@ -422,6 +422,18 @@
   "cameraManagement": {
     "title": "Manage Cameras",
     "addCamera": "Add New Camera",
+    "deleteCamera": "Delete Camera",
+    "deleteCameraDialog": {
+      "title": "Delete Camera",
+      "description": "Deleting a camera will permanently remove all recordings, tracked objects, and configuration for that camera. Any go2rtc streams associated with this camera may still need to be manually removed.",
+      "selectPlaceholder": "Choose camera...",
+      "confirmTitle": "Are you sure?",
+      "confirmWarning": "Deleting <strong>{{cameraName}}</strong> cannot be undone.",
+      "deleteExports": "Also delete exports for this camera",
+      "confirmButton": "Delete Permanently",
+      "success": "Camera {{cameraName}} deleted successfully",
+      "error": "Failed to delete camera {{cameraName}}"
+    },
     "editCamera": "Edit Camera:",
     "selectCamera": "Select a Camera",
     "backToSettings": "Back to Camera Settings",

web/src/components/config-form/section-configs/detect.ts

@@ -30,10 +30,22 @@ const detect: SectionConfigOverrides = {
     ],
   },
   global: {
-    restartRequired: ["width", "height", "min_initialized", "max_disappeared"],
+    restartRequired: [
+      "fps",
+      "width",
+      "height",
+      "min_initialized",
+      "max_disappeared",
+    ],
   },
   camera: {
-    restartRequired: ["width", "height", "min_initialized", "max_disappeared"],
+    restartRequired: [
+      "fps",
+      "width",
+      "height",
+      "min_initialized",
+      "max_disappeared",
+    ],
   },
 };
 

web/src/components/config-form/section-configs/motion.ts

@@ -3,6 +3,12 @@ import type { SectionConfigOverrides } from "./types";
 const motion: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/motion_detection",
+    fieldDocs: {
+      lightning_threshold:
+        "/configuration/motion_detection#lightning_threshold",
+      skip_motion_threshold:
+        "/configuration/motion_detection#skip_motion_on_large_scene_changes",
+    },
     restartRequired: [],
     fieldOrder: [
       "enabled",
@@ -20,6 +26,16 @@ const motion: SectionConfigOverrides = {
       sensitivity: ["enabled", "threshold", "contour_area"],
       algorithm: ["improve_contrast", "delta_alpha", "frame_alpha"],
     },
+    uiSchema: {
+      skip_motion_threshold: {
+        "ui:widget": "optionalField",
+        "ui:options": {
+          innerWidget: "range",
+          step: 0.05,
+          suppressMultiSchema: true,
+        },
+      },
+    },
     hiddenFields: ["enabled_in_config", "mask", "raw_mask"],
     advancedFields: [
       "lightning_threshold",
@@ -58,7 +74,7 @@ const motion: SectionConfigOverrides = {
       "frame_alpha",
       "frame_height",
     ],
-    advancedFields: ["lightning_threshold"],
+    advancedFields: ["lightning_threshold", "skip_motion_threshold"],
   },
 };
 

web/src/components/config-form/theme/frigateTheme.ts

@@ -26,6 +26,7 @@ import { FfmpegArgsWidget } from "./widgets/FfmpegArgsWidget";
 import { InputRolesWidget } from "./widgets/InputRolesWidget";
 import { TimezoneSelectWidget } from "./widgets/TimezoneSelectWidget";
 import { CameraPathWidget } from "./widgets/CameraPathWidget";
+import { OptionalFieldWidget } from "./widgets/OptionalFieldWidget";
 
 import { FieldTemplate } from "./templates/FieldTemplate";
 import { ObjectFieldTemplate } from "./templates/ObjectFieldTemplate";
@@ -73,6 +74,7 @@ export const frigateTheme: FrigateTheme = {
     audioLabels: AudioLabelSwitchesWidget,
     zoneNames: ZoneSwitchesWidget,
     timezoneSelect: TimezoneSelectWidget,
+    optionalField: OptionalFieldWidget,
   },
   templates: {
     FieldTemplate: FieldTemplate as React.ComponentType<FieldTemplateProps>,

web/src/components/config-form/theme/widgets/OptionalFieldWidget.tsx

@@ -0,0 +1,64 @@
+// Optional Field Widget - wraps any inner widget with an enable/disable switch
+// Used for nullable fields where None means "disabled" (not the same as 0)
+
+import type { WidgetProps } from "@rjsf/utils";
+import { getWidget } from "@rjsf/utils";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { getNonNullSchema } from "../fields/nullableUtils";
+
+export function OptionalFieldWidget(props: WidgetProps) {
+  const { id, value, disabled, readonly, onChange, schema, options, registry } =
+    props;
+
+  const innerWidgetName = (options.innerWidget as string) || undefined;
+  const isEnabled = value !== undefined && value !== null;
+
+  // Extract the non-null branch from anyOf [Type, null]
+  const innerSchema = getNonNullSchema(schema) ?? schema;
+
+  const InnerWidget = getWidget(innerSchema, innerWidgetName, registry.widgets);
+
+  const getDefaultValue = () => {
+    if (innerSchema.default !== undefined && innerSchema.default !== null) {
+      return innerSchema.default;
+    }
+    if (innerSchema.minimum !== undefined) {
+      return innerSchema.minimum;
+    }
+    if (innerSchema.type === "integer" || innerSchema.type === "number") {
+      return 0;
+    }
+    if (innerSchema.type === "string") {
+      return "";
+    }
+    return 0;
+  };
+
+  const handleToggle = (checked: boolean) => {
+    onChange(checked ? getDefaultValue() : undefined);
+  };
+
+  const innerProps: WidgetProps = {
+    ...props,
+    schema: innerSchema,
+    disabled: disabled || readonly || !isEnabled,
+    value: isEnabled ? value : getDefaultValue(),
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <Switch
+        id={`${id}-toggle`}
+        checked={isEnabled}
+        disabled={disabled || readonly}
+        onCheckedChange={handleToggle}
+      />
+      <div
+        className={cn("flex-1", !isEnabled && "pointer-events-none opacity-40")}
+      >
+        <InnerWidget {...innerProps} />
+      </div>
+    </div>
+  );
+}

web/src/components/overlay/dialog/DeleteCameraDialog.tsx

@@ -0,0 +1,215 @@
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Trans } from "react-i18next";
+import axios from "axios";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { Switch } from "@/components/ui/switch";
+
+type DeleteCameraDialogProps = {
+  show: boolean;
+  cameras: string[];
+  onClose: () => void;
+  onDeleted: () => void;
+};
+
+export default function DeleteCameraDialog({
+  show,
+  cameras,
+  onClose,
+  onDeleted,
+}: DeleteCameraDialogProps) {
+  const { t } = useTranslation(["views/settings", "common"]);
+  const [phase, setPhase] = useState<"select" | "confirm">("select");
+  const [selectedCamera, setSelectedCamera] = useState<string>("");
+  const [deleteExports, setDeleteExports] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleClose = useCallback(() => {
+    if (isDeleting) return;
+    setPhase("select");
+    setSelectedCamera("");
+    setDeleteExports(false);
+    onClose();
+  }, [isDeleting, onClose]);
+
+  const handleDelete = useCallback(() => {
+    setPhase("confirm");
+  }, []);
+
+  const handleBack = useCallback(() => {
+    setPhase("select");
+  }, []);
+
+  const handleConfirmDelete = useCallback(async () => {
+    if (!selectedCamera || isDeleting) return;
+
+    setIsDeleting(true);
+
+    try {
+      await axios.delete(
+        `cameras/${selectedCamera}?delete_exports=${deleteExports}`,
+      );
+      toast.success(
+        t("cameraManagement.deleteCameraDialog.success", {
+          cameraName: selectedCamera,
+        }),
+        { position: "top-center" },
+      );
+      setPhase("select");
+      setSelectedCamera("");
+      setDeleteExports(false);
+      onDeleted();
+    } catch (error) {
+      const errorMessage =
+        axios.isAxiosError(error) &&
+        (error.response?.data?.message || error.response?.data?.detail)
+          ? error.response?.data?.message || error.response?.data?.detail
+          : t("cameraManagement.deleteCameraDialog.error", {
+              cameraName: selectedCamera,
+            });
+
+      toast.error(errorMessage, { position: "top-center" });
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [selectedCamera, deleteExports, isDeleting, onDeleted, t]);
+
+  return (
+    <Dialog open={show} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        {phase === "select" ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                {t("cameraManagement.deleteCameraDialog.title")}
+              </DialogTitle>
+              <DialogDescription>
+                {t("cameraManagement.deleteCameraDialog.description")}
+              </DialogDescription>
+            </DialogHeader>
+            <Select value={selectedCamera} onValueChange={setSelectedCamera}>
+              <SelectTrigger>
+                <SelectValue
+                  placeholder={t(
+                    "cameraManagement.deleteCameraDialog.selectPlaceholder",
+                  )}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {cameras.map((camera) => (
+                  <SelectItem key={camera} value={camera}>
+                    {camera}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <DialogFooter className="flex gap-3 sm:justify-end">
+              <div className="flex flex-1 flex-col justify-end">
+                <div className="flex flex-row gap-2 pt-5">
+                  <Button
+                    className="flex flex-1"
+                    aria-label={t("button.cancel", { ns: "common" })}
+                    onClick={handleClose}
+                    type="button"
+                  >
+                    {t("button.cancel", { ns: "common" })}
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    aria-label={t("button.delete", { ns: "common" })}
+                    className="flex flex-1 text-white"
+                    onClick={handleDelete}
+                    disabled={!selectedCamera}
+                  >
+                    {t("button.delete", { ns: "common" })}
+                  </Button>
+                </div>
+              </div>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                {t("cameraManagement.deleteCameraDialog.confirmTitle")}
+              </DialogTitle>
+              <DialogDescription>
+                <Trans
+                  ns="views/settings"
+                  values={{ cameraName: selectedCamera }}
+                  components={{ strong: <span className="font-medium" /> }}
+                >
+                  cameraManagement.deleteCameraDialog.confirmWarning
+                </Trans>
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex items-center space-x-2">
+              <Switch
+                id="delete-exports"
+                checked={deleteExports}
+                onCheckedChange={(checked) =>
+                  setDeleteExports(checked === true)
+                }
+              />
+              <Label htmlFor="delete-exports" className="cursor-pointer">
+                {t("cameraManagement.deleteCameraDialog.deleteExports")}
+              </Label>
+            </div>
+            <DialogFooter className="flex gap-3 sm:justify-end">
+              <div className="flex flex-1 flex-col justify-end">
+                <div className="flex flex-row gap-2 pt-5">
+                  <Button
+                    className="flex flex-1"
+                    aria-label={t("button.back", { ns: "common" })}
+                    onClick={handleBack}
+                    type="button"
+                    disabled={isDeleting}
+                  >
+                    {t("button.back", { ns: "common" })}
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    className="flex flex-1 text-white"
+                    onClick={handleConfirmDelete}
+                    disabled={isDeleting}
+                  >
+                    {isDeleting ? (
+                      <div className="flex flex-row items-center gap-2">
+                        <ActivityIndicator />
+                        <span>
+                          {t(
+                            "cameraManagement.deleteCameraDialog.confirmButton",
+                          )}
+                        </span>
+                      </div>
+                    ) : (
+                      t("cameraManagement.deleteCameraDialog.confirmButton")
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/views/events/EventView.tsx

@@ -1284,7 +1284,7 @@ function MotionReview({
 
   return (
     <>
-      {motionPreviewsCamera && selectedMotionPreviewCamera ? (
+      {selectedMotionPreviewCamera && (
         <>
           <div className="relative mb-2 flex h-11 items-center justify-between pl-2 pr-2 md:px-3">
             <Button
@@ -1465,104 +1465,108 @@ function MotionReview({
             }}
           />
         </>
-      ) : (
-        <div className="no-scrollbar flex min-w-0 flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
-          <div
-            ref={contentRef}
-            className={cn(
-              "no-scrollbar grid w-full grid-cols-1",
-              isMobile && "landscape:grid-cols-2",
-              reviewCameras.length > 3 &&
-                isMobile &&
-                "portrait:md:grid-cols-2 landscape:md:grid-cols-3",
-              isDesktop && "grid-cols-2 lg:grid-cols-3",
-              "gap-2 overflow-auto px-1 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4",
-            )}
-          >
-            {reviewCameras.map((camera) => {
-              let grow;
-              let spans;
-              const aspectRatio = camera.detect.width / camera.detect.height;
-              if (aspectRatio > 2) {
-                grow = "aspect-wide";
-                spans = "sm:col-span-2";
-              } else if (aspectRatio < 1) {
-                grow = "h-full aspect-tall";
-                spans = "md:row-span-2";
-              } else {
-                grow = "aspect-video";
-              }
-              const detectionType = getDetectionType(camera.name);
-              return (
-                <div key={camera.name} className={`relative ${spans}`}>
-                  {motionData ? (
-                    <>
-                      <PreviewPlayer
-                        className={`rounded-lg md:rounded-2xl ${spans} ${grow}`}
-                        camera={camera.name}
-                        timeRange={currentTimeRange}
-                        startTime={previewStart}
-                        cameraPreviews={relevantPreviews}
-                        isScrubbing={scrubbing}
-                        onControllerReady={(controller) => {
-                          videoPlayersRef.current[camera.name] = controller;
-                        }}
-                        onClick={() =>
-                          onOpenRecording({
-                            camera: camera.name,
-                            startTime: Math.min(
-                              currentTime,
-                              Date.now() / 1000 - 30,
-                            ),
-                            severity: "significant_motion",
-                          })
-                        }
-                      />
-                      <div
-                        className={`review-item-ring pointer-events-none absolute inset-0 z-20 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
-                      />
-                      <div className="absolute bottom-2 right-2 z-30">
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <BlurredIconButton
-                              aria-label={t("motionSearch.openMenu")}
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <FiMoreVertical className="size-5" />
-                            </BlurredIconButton>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                setMotionPreviewsCamera(camera.name);
-                              }}
-                            >
-                              {t("motionPreviews.menuItem")}
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                setMotionSearchCamera(camera.name);
-                              }}
-                            >
-                              {t("motionSearch.menuItem")}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </>
-                  ) : (
-                    <Skeleton
-                      className={`size-full rounded-lg md:rounded-2xl ${spans} ${grow}`}
-                    />
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </div>
       )}
+      <div
+        className={cn(
+          "no-scrollbar flex min-w-0 flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4",
+          selectedMotionPreviewCamera && "hidden",
+        )}
+      >
+        <div
+          ref={selectedMotionPreviewCamera ? undefined : contentRef}
+          className={cn(
+            "no-scrollbar grid w-full grid-cols-1",
+            isMobile && "landscape:grid-cols-2",
+            reviewCameras.length > 3 &&
+              isMobile &&
+              "portrait:md:grid-cols-2 landscape:md:grid-cols-3",
+            isDesktop && "grid-cols-2 lg:grid-cols-3",
+            "gap-2 overflow-auto px-1 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4",
+          )}
+        >
+          {reviewCameras.map((camera) => {
+            let grow;
+            let spans;
+            const aspectRatio = camera.detect.width / camera.detect.height;
+            if (aspectRatio > 2) {
+              grow = "aspect-wide";
+              spans = "sm:col-span-2";
+            } else if (aspectRatio < 1) {
+              grow = "h-full aspect-tall";
+              spans = "md:row-span-2";
+            } else {
+              grow = "aspect-video";
+            }
+            const detectionType = getDetectionType(camera.name);
+            return (
+              <div key={camera.name} className={`relative ${spans}`}>
+                {motionData ? (
+                  <>
+                    <PreviewPlayer
+                      className={`rounded-lg md:rounded-2xl ${spans} ${grow}`}
+                      camera={camera.name}
+                      timeRange={currentTimeRange}
+                      startTime={previewStart}
+                      cameraPreviews={relevantPreviews}
+                      isScrubbing={scrubbing}
+                      onControllerReady={(controller) => {
+                        videoPlayersRef.current[camera.name] = controller;
+                      }}
+                      onClick={() =>
+                        onOpenRecording({
+                          camera: camera.name,
+                          startTime: Math.min(
+                            currentTime,
+                            Date.now() / 1000 - 30,
+                          ),
+                          severity: "significant_motion",
+                        })
+                      }
+                    />
+                    <div
+                      className={`review-item-ring pointer-events-none absolute inset-0 z-20 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
+                    />
+                    <div className="absolute bottom-2 right-2 z-30">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <BlurredIconButton
+                            aria-label={t("motionSearch.openMenu")}
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <FiMoreVertical className="size-5" />
+                          </BlurredIconButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setMotionPreviewsCamera(camera.name);
+                            }}
+                          >
+                            {t("motionPreviews.menuItem")}
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setMotionSearchCamera(camera.name);
+                            }}
+                          >
+                            {t("motionSearch.menuItem")}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </>
+                ) : (
+                  <Skeleton
+                    className={`size-full rounded-lg md:rounded-2xl ${spans} ${grow}`}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
       {!selectedMotionPreviewCamera && (
         <div className="no-scrollbar w-[55px] overflow-y-auto md:w-[100px]">
           {motionData ? (

web/src/views/events/MotionPreviewsPane.tsx

@@ -624,6 +624,9 @@ export default function MotionPreviewsPane({
   const [hasVisibilityData, setHasVisibilityData] = useState(false);
   const clipObserver = useRef<IntersectionObserver | null>(null);
 
+  const [mountedClips, setMountedClips] = useState<Set<string>>(new Set());
+  const mountObserver = useRef<IntersectionObserver | null>(null);
+
   const recordingTimeRange = useMemo(() => {
     if (!motionRanges.length) {
       return null;
@@ -788,15 +791,56 @@ export default function MotionPreviewsPane({
     };
   }, [scrollContainer]);
 
+  useEffect(() => {
+    if (!scrollContainer) {
+      return;
+    }
+
+    const nearClipIds = new Set<string>();
+    mountObserver.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const clipId = (entry.target as HTMLElement).dataset.clipId;
+
+          if (!clipId) {
+            return;
+          }
+
+          if (entry.isIntersecting) {
+            nearClipIds.add(clipId);
+          } else {
+            nearClipIds.delete(clipId);
+          }
+        });
+
+        setMountedClips(new Set(nearClipIds));
+      },
+      {
+        root: scrollContainer,
+        rootMargin: "200% 0px",
+        threshold: 0,
+      },
+    );
+
+    scrollContainer
+      .querySelectorAll<HTMLElement>("[data-clip-id]")
+      .forEach((node) => {
+        mountObserver.current?.observe(node);
+      });
+
+    return () => {
+      mountObserver.current?.disconnect();
+    };
+  }, [scrollContainer]);
+
   const clipRef = useCallback((node: HTMLElement | null) => {
-    if (!clipObserver.current) {
+    if (!node) {
       return;
     }
 
     try {
-      if (node) {
-        clipObserver.current.observe(node);
-      }
+      clipObserver.current?.observe(node);
+      mountObserver.current?.observe(node);
     } catch {
       // no op
     }
@@ -864,31 +908,38 @@ export default function MotionPreviewsPane({
         ) : (
           <div className="grid grid-cols-1 gap-2 pb-2 sm:grid-cols-2 md:gap-4 xl:grid-cols-4">
             {clipData.map(
-              ({ range, preview, fallbackFrameTimes, motionHeatmap }, idx) => (
-                <div
-                  key={`${camera.name}-${range.start_time}-${range.end_time}-${preview?.src ?? "none"}-${idx}`}
-                  data-clip-id={`${camera.name}-${range.start_time}-${range.end_time}-${idx}`}
-                  ref={clipRef}
-                >
-                  <MotionPreviewClip
-                    cameraName={camera.name}
-                    range={range}
-                    playbackRate={playbackRate}
-                    preview={preview}
-                    fallbackFrameTimes={fallbackFrameTimes}
-                    motionHeatmap={motionHeatmap}
-                    nonMotionAlpha={nonMotionAlpha}
-                    isVisible={
-                      windowVisible &&
-                      (visibleClips.includes(
-                        `${camera.name}-${range.start_time}-${range.end_time}-${idx}`,
-                      ) ||
-                        (!hasVisibilityData && idx < 8))
-                    }
-                    onSeek={onSeek}
-                  />
-                </div>
-              ),
+              ({ range, preview, fallbackFrameTimes, motionHeatmap }, idx) => {
+                const clipId = `${camera.name}-${range.start_time}-${range.end_time}-${idx}`;
+                const isMounted = mountedClips.has(clipId);
+
+                return (
+                  <div
+                    key={`${camera.name}-${range.start_time}-${range.end_time}-${preview?.src ?? "none"}-${idx}`}
+                    data-clip-id={clipId}
+                    ref={clipRef}
+                  >
+                    {isMounted ? (
+                      <MotionPreviewClip
+                        cameraName={camera.name}
+                        range={range}
+                        playbackRate={playbackRate}
+                        preview={preview}
+                        fallbackFrameTimes={fallbackFrameTimes}
+                        motionHeatmap={motionHeatmap}
+                        nonMotionAlpha={nonMotionAlpha}
+                        isVisible={
+                          windowVisible &&
+                          (visibleClips.includes(clipId) ||
+                            (!hasVisibilityData && idx < 8))
+                        }
+                        onSeek={onSeek}
+                      />
+                    ) : (
+                      <div className="aspect-video rounded-lg bg-black md:rounded-2xl" />
+                    )}
+                  </div>
+                );
+              },
             )}
           </div>
         )}

web/src/views/settings/CameraManagementView.tsx

@@ -13,7 +13,8 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { useTranslation } from "react-i18next";
 import CameraEditForm from "@/components/settings/CameraEditForm";
 import CameraWizardDialog from "@/components/settings/CameraWizardDialog";
-import { LuPlus } from "react-icons/lu";
+import DeleteCameraDialog from "@/components/overlay/dialog/DeleteCameraDialog";
+import { LuPlus, LuTrash2 } from "react-icons/lu";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { isDesktop } from "react-device-detect";
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
@@ -45,6 +46,7 @@ export default function CameraManagementView({
     undefined,
   ); // Track camera being edited
   const [showWizard, setShowWizard] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
   // State for restart dialog when enabling a disabled camera
   const [restartDialogOpen, setRestartDialogOpen] = useState(false);
@@ -98,14 +100,26 @@ export default function CameraManagementView({
               </Heading>
 
               <div className="w-full max-w-5xl space-y-6">
-                <Button
-                  variant="select"
-                  onClick={() => setShowWizard(true)}
-                  className="mb-2 flex max-w-48 items-center gap-2"
-                >
-                  <LuPlus className="h-4 w-4" />
-                  {t("cameraManagement.addCamera")}
-                </Button>
+                <div className="flex gap-2">
+                  <Button
+                    variant="select"
+                    onClick={() => setShowWizard(true)}
+                    className="mb-2 flex max-w-48 items-center gap-2"
+                  >
+                    <LuPlus className="h-4 w-4" />
+                    {t("cameraManagement.addCamera")}
+                  </Button>
+                  {enabledCameras.length + disabledCameras.length > 0 && (
+                    <Button
+                      variant="destructive"
+                      onClick={() => setShowDeleteDialog(true)}
+                      className="mb-2 flex max-w-48 items-center gap-2 text-white"
+                    >
+                      <LuTrash2 className="h-4 w-4" />
+                      {t("cameraManagement.deleteCamera")}
+                    </Button>
+                  )}
+                </div>
 
                 {enabledCameras.length > 0 && (
                   <SettingsGroupCard
@@ -221,6 +235,15 @@ export default function CameraManagementView({
         open={showWizard}
         onClose={() => setShowWizard(false)}
       />
+      <DeleteCameraDialog
+        show={showDeleteDialog}
+        cameras={[...enabledCameras, ...disabledCameras]}
+        onClose={() => setShowDeleteDialog(false)}
+        onDeleted={() => {
+          setShowDeleteDialog(false);
+          updateConfig();
+        }}
+      />
       <RestartDialog
         isOpen={restartDialogOpen}
         onClose={() => setRestartDialogOpen(false)}