Restructured camera specific documentation (#4005)

* Restructured camera specific documentation

* Make room for manufacture specific docs
* Added initial (more or less) working setup for Annke C800 camera

* Update docs/docs/configuration/camera_specific.md

remove tracking settings from example

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

* Moved unify and blue iris cams examples

* headline cleanup

* removed doubled headline in advanced options
* changed headline level for camera specific setup to make headlines
  show up in toc

* removed specific optimizations not related to cam

* more generic phrasing

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

.github/ISSUE_TEMPLATE/edgetpu_support_request.yml

@@ -0,0 +1,84 @@
+name: EdgeTpu Support Request
+description: Support for setting up EdgeTPU in Frigate
+title: "[EdgeTPU Support]: "
+labels: ["support", "triage"]
+assignees: []
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the problem you are having
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Version
+      description: Visible on the Debug page in the Web UI
+    validations:
+      required: true
+  - type: textarea
+    id: config
+    attributes:
+      label: Frigate config file
+      description: This will be automatically formatted into code, so no need for backticks.
+      render: yaml
+    validations:
+      required: true
+  - type: textarea
+    id: docker
+    attributes:
+      label: docker-compose file or Docker CLI command
+      description: This will be automatically formatted into code, so no need for backticks.
+      render: yaml
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating system
+      options:
+        - HassOS
+        - Debian
+        - Other Linux
+        - Proxmox
+        - UNRAID
+        - Windows
+        - Other
+    validations:
+      required: true
+  - type: dropdown
+    id: install-method
+    attributes:
+      label: Install method
+      options:
+        - HassOS Addon
+        - Docker Compose
+        - Docker CLI
+    validations:
+      required: true
+  - type: dropdown
+    id: coral
+    attributes:
+      label: Coral version
+      options:
+        - USB
+        - PCIe
+        - M.2
+        - Dev Board
+        - Other
+        - CPU (no coral)
+    validations:
+      required: true
+  - type: textarea
+    id: other
+    attributes:
+      label: Any other information that may be helpful

.github/ISSUE_TEMPLATE/hwaccel_support_request.yml

@@ -0,0 +1,96 @@
+name: Hardware Acceleration Support Request
+description: Support for setting up GPU hardware acceleration in Frigate
+title: "[HW Accel Support]: "
+labels: ["support", "triage"]
+assignees: []
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the problem you are having
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Version
+      description: Visible on the Debug page in the Web UI
+    validations:
+      required: true
+  - type: textarea
+    id: config
+    attributes:
+      label: Frigate config file
+      description: This will be automatically formatted into code, so no need for backticks.
+      render: yaml
+    validations:
+      required: true
+  - type: textarea
+    id: docker
+    attributes:
+      label: docker-compose file or Docker CLI command
+      description: This will be automatically formatted into code, so no need for backticks.
+      render: yaml
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: textarea
+    id: ffprobe
+    attributes:
+      label: FFprobe output from your camera
+      description: Run `ffprobe <camera_url>` and provide output below
+      render: shell
+    validations:
+      required: true
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating system
+      options:
+        - HassOS
+        - Debian
+        - Other Linux
+        - Proxmox
+        - UNRAID
+        - Windows
+        - Other
+    validations:
+      required: true
+  - type: dropdown
+    id: install-method
+    attributes:
+      label: Install method
+      options:
+        - HassOS Addon
+        - Docker Compose
+        - Docker CLI
+    validations:
+      required: true
+  - type: dropdown
+    id: network
+    attributes:
+      label: Network connection
+      options:
+        - Wired
+        - Wireless
+        - Mixed
+    validations:
+      required: true
+  - type: input
+    id: camera
+    attributes:
+      label: Camera make and model
+      description: Dahua, hikvision, amcrest, reolink, etc and model number
+    validations:
+      required: true
+  - type: textarea
+    id: other
+    attributes:
+      label: Any other information that may be helpful

.github/stale.yml

@@ -1,17 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 30
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 3
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - pinned
-  - security
-# Label to use when marking an issue as stale
-staleLabel: stale
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

.github/workflows/stale.yml

@@ -0,0 +1,25 @@
+# Close Stale Issues
+# Warns and then closes issues and PRs that have had no activity for a specified amount of time.
+# https://github.com/actions/stale
+
+name: "Stalebot"
+on:
+  schedule:
+    - cron: "0 0 * * *" # run stalebot once a day
+    
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@main
+        id: stale
+        with:
+          stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
+          close-issue-message: ''
+          days-before-stale: 30
+          days-before-close: 3
+          exempt-draft-pr: true
+          exempt-issue-labels: 'pinned,security'
+          exempt-pr-labels: 'pinned,security'
+      - name: Print outputs
+        run: echo ${{ join(steps.stale.outputs.*, ',') }}

Makefile

@@ -1,7 +1,7 @@
 default_target: local
 
 COMMIT_HASH := $(shell git log -1 --pretty=format:"%h"|tail -1)
-VERSION = 0.11.0
+VERSION = 0.11.1
 CURRENT_UID := $(shell id -u)
 CURRENT_GID := $(shell id -g)
 

docs/docs/configuration/advanced.md

@@ -4,8 +4,6 @@ title: Advanced Options
 sidebar_label: Advanced Options
 ---
 
-## Advanced configuration
-
 ### `logger`
 
 Change the default log level for troubleshooting purposes.

docs/docs/configuration/birdseye.md

@@ -12,3 +12,24 @@ Birdseye offers different modes to customize which cameras show under which circ
 ### Custom Birdseye Icon
 
 A custom icon can be added to the birdseye background by provided a file `custom.png` inside of the Frigate `media` folder. The file must be a png with the icon as transparent, any non-transparent pixels will be white when displayed in the birdseye view. 
+
+### Birdseye view override at camera level
+
+If you want to include a camera in Birdseye view only for specific circumstances, or just don't include it at all, the Birdseye setting can be set at the camera level.
+
+```yaml
+# Include all cameras by default in Birdseye view
+birdseye:
+  enabled: True
+  mode: continuous
+
+cameras:
+  front:
+    # Only include the "front" camera in Birdseye view when objects are detected
+    birdseye:
+      mode: objects
+  back:
+    # Exclude the "back" camera from Birdseye view
+    birdseye:
+      enabled: False
+```

docs/docs/configuration/camera_specific.md

@@ -3,7 +3,7 @@ id: camera_specific
 title: Camera Specific Configurations
 ---
 
-### MJPEG Cameras
+## MJPEG Cameras
 
 The input and output parameters need to be adjusted for MJPEG cameras
 
@@ -19,7 +19,7 @@ output_args:
   rtmp: -c:v libx264 -an -f flv
 ```
 
-### JPEG Stream Cameras
+## JPEG Stream Cameras
 
 Cameras using a live changing jpeg image will need input parameters as below
 
@@ -47,7 +47,7 @@ input_args:
 
 Outputting the stream will have the same args and caveats as per [MJPEG Cameras](#mjpeg-cameras)
 
-### RTMP Cameras
+## RTMP Cameras
 
 The input parameters need to be adjusted for RTMP cameras
 
@@ -56,8 +56,56 @@ ffmpeg:
   input_args: -avoid_negative_ts make_zero -fflags nobuffer -flags low_delay -strict experimental -fflags +genpts+discardcorrupt -rw_timeout 5000000 -use_wallclock_as_timestamps 1 -f live_flv
 ```
 
+## UDP Only Cameras
+
+If your cameras do not support TCP connections for RTSP, you can use UDP.
+
+```yaml
+ffmpeg:
+  input_args: -avoid_negative_ts make_zero -fflags +genpts+discardcorrupt -rtsp_transport udp -timeout 5000000 -use_wallclock_as_timestamps 1
+```
+
+## Model/vendor specific setup
+
+### Annke C800
+This camera is H.265 only. To be able to play clips on some devices (like MacOs or iPhone) the H.265 stream has to be repackaged and the audio stream has to be converted to aac. Unfortunately direct playback of in the browser is not working (yet), but the downloaded clip can be played locally.
+
+```yaml
+cameras:
+  annkec800: # <------ Name the camera
+    ffmpeg:
+      output_args:
+        record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v copy -tag:v hvc1 -bsf:v hevc_mp4toannexb -c:a aac
+        rtmp: -c:v copy -c:a aac -f flv
+        
+      inputs:
+        - path: rtsp://user:password@camera-ip:554/H264/ch1/main/av_stream # <----- Update for your camera
+          roles:
+            - detect
+            - record
+            - rtmp
+    rtmp:
+      enabled: False # <-- RTMP should be disabled if your stream is not H264
+    detect:
+      width:  # <---- update for your camera's resolution
+      height:  # <---- update for your camera's resolution
+
+
+```
+
+### Blue Iris RTSP Cameras
+
+You will need to remove `nobuffer` flag for Blue Iris RTSP cameras
+
+```yaml
+ffmpeg:
+  input_args: -avoid_negative_ts make_zero -flags low_delay -strict experimental -fflags +genpts+discardcorrupt -rtsp_transport tcp -timeout 5000000 -use_wallclock_as_timestamps 1
+```
+
 ### Reolink 410/520 (possibly others)
 
+![Resolutions](/img/reolink-settings.png)
+
 According to [this discussion](https://github.com/blakeblackshear/frigate/issues/3235#issuecomment-1135876973), the http video streams seem to be the most reliable for Reolink.
 
 ```yaml
@@ -93,26 +141,6 @@ cameras:
       fps: 7
 ```
 
-![Resolutions](/img/reolink-settings.png)
-
-### Blue Iris RTSP Cameras
-
-You will need to remove `nobuffer` flag for Blue Iris RTSP cameras
-
-```yaml
-ffmpeg:
-  input_args: -avoid_negative_ts make_zero -flags low_delay -strict experimental -fflags +genpts+discardcorrupt -rtsp_transport tcp -timeout 5000000 -use_wallclock_as_timestamps 1
-```
-
-### UDP Only Cameras
-
-If your cameras do not support TCP connections for RTSP, you can use UDP.
-
-```yaml
-ffmpeg:
-  input_args: -avoid_negative_ts make_zero -fflags +genpts+discardcorrupt -rtsp_transport udp -timeout 5000000 -use_wallclock_as_timestamps 1
-```
-
 ### Unifi Protect Cameras
 
 In the Unifi 2.0 update Unifi Protect Cameras had a change in audio sample rate which causes issues for ffmpeg. The input rate needs to be set for record and rtmp.

docs/docs/configuration/cameras.md

@@ -43,3 +43,5 @@ cameras:
   front: ...
   side: ...
 ```
+
+For camera model specific settings check the [camera specific](/configuration/camera_specific) infos.

docs/docs/configuration/hardware_acceleration.md

@@ -21,7 +21,7 @@ ffmpeg:
 ffmpeg:
   hwaccel_args: -hwaccel vaapi -hwaccel_device /dev/dri/renderD128 -hwaccel_output_format yuv420p
 ```
-**NOTICE**: With some of the processors, like the J4125, the default driver `iHD` doesn't seem to work correctly for hardware acceleration. You may need to change the driver to `i965` by adding the following environment variable `LIBVA_DRIVER_NAME=i965` to your docker-compose file.   
+**NOTICE**: With some of the processors, like the J4125, the default driver `iHD` doesn't seem to work correctly for hardware acceleration. You may need to change the driver to `i965` by adding the following environment variable `LIBVA_DRIVER_NAME=i965` to your docker-compose file or [in the frigate.yml for HA OS users](advanced.md#environment_vars).   
 
 ### Intel-based CPUs (>=10th Generation) via Quicksync
 
@@ -46,7 +46,7 @@ ffmpeg:
 These instructions are based on the [jellyfin documentation](https://jellyfin.org/docs/general/administration/hardware-acceleration.html#nvidia-hardware-acceleration-on-docker-linux)
 
 Add `--gpus all` to your docker run command or update your compose file.
-
+If you have multiple Nvidia graphic card, you can add them with their ids obtained via `nvidia-smi` command
 ```yaml
 services:
   frigate:
@@ -57,7 +57,7 @@ services:
         reservations:
           devices:
             - driver: nvidia
-            count: 1
+              device_ids: ['0'] # this is only needed when using multiple GPUs
               capabilities: [gpu]
 ```
 
@@ -86,7 +86,7 @@ ffmpeg:
 ```
 
 If everything is working correctly, you should see a significant improvement in performance.
-Verify that hardware decoding is working by running `nvidia-smi`, which should show the ffmpeg
+Verify that hardware decoding is working by running `docker exec -it frigate nvidia-smi`, which should show the ffmpeg
 processes:
 
 ```

docs/docs/guides/getting_started.md

@@ -45,6 +45,12 @@ More details on available detectors can be found [here](/configuration/detectors
 
 Now let's add the first camera:
 
+:::caution
+
+Note that passwords that contain special characters often cause issues with ffmpeg connecting to the camera. If receiving `end-of-file` or `unauthorized` errors with a verified correct password, try changing the password to something simple to rule out the possibility that the password is the issue.
+
+:::
+
 ```yaml
 mqtt:
   host: <ip of your mqtt server>

docs/docs/hardware.md

@@ -24,8 +24,8 @@ I may earn a small commission for my endorsement, recommendation, testimonial, o
 My current favorite is the Minisforum GK41 because of the dual NICs that allow you to setup a dedicated private network for your cameras where they can be blocked from accessing the internet. There are many used workstation options on eBay that work very well. Anything with an Intel CPU and capable of running Debian should work fine. As a bonus, you may want to look for devices with a M.2 or PCIe express slot that is compatible with the Google Coral. I may earn a small commission for my endorsement, recommendation, testimonial, or link to any products or services from this website.
 
 | Name                                                                                                                                                                                                                                                                                                              | Inference Speed | Coral Compatibility | Notes                                                                                                                                   |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| Odyssey X86 Blue J4125 (<a href="https://amzn.to/3oH4BKi" target="_blank" rel="nofollow noopener sponsored">Amazon</a>) (<a href="https://www.seeedstudio.com/Odyssey-Blue-J4125-128GB-p-4921.html?utm_source=Frigate" target="_blank" rel="nofollow noopener sponsored">SeeedStudio</a>) | 9-10ms          | M.2 B+M             | Dual gigabit NICs for easy isolated camera network. Easily handles several 1080p cameras.                                               |
+| Odyssey X86 Blue J4125 (<a href="https://amzn.to/3oH4BKi" target="_blank" rel="nofollow noopener sponsored">Amazon</a>) (<a href="https://www.seeedstudio.com/Frigate-NVR-with-Odyssey-Blue-and-Coral-USB-Accelerator.html?utm_source=Frigate" target="_blank" rel="nofollow noopener sponsored">SeeedStudio</a>) | 9-10ms          | M.2 B+M, USB        | Dual gigabit NICs for easy isolated camera network. Easily handles several 1080p cameras.                                               |
 | Minisforum GK41 (<a href="https://amzn.to/3ptnb8D" target="_blank" rel="nofollow noopener sponsored">Amazon</a>)                                                                                                                                                                                                  | 9-10ms          | USB                 | Dual gigabit NICs for easy isolated camera network. Easily handles several 1080p cameras.                                               |
 | Beelink GK55 (<a href="https://amzn.to/35E79BC" target="_blank" rel="nofollow noopener sponsored">Amazon</a>)                                                                                                                                                                                                     | 9-10ms          | USB                 | Dual gigabit NICs for easy isolated camera network. Easily handles several 1080p cameras.                                               |
 | Intel NUC (<a href="https://amzn.to/3psFlHi" target="_blank" rel="nofollow noopener sponsored">Amazon</a>)                                                                                                                                                                                                        | 8-10ms          | USB                 | Overkill for most, but great performance. Can handle many cameras at 5fps depending on typical amounts of motion. Requires extra parts. |

docs/docs/integrations/home-assistant.md

@@ -178,7 +178,7 @@ for how to set these.
 
 When multiple Frigate instances are configured, [API](#api) URLs should include an
 identifier to tell Home Assistant which Frigate instance to refer to. The
-identifier used is the MQTT `client_id` paremeter included in the configuration,
+identifier used is the MQTT `client_id` parameter included in the configuration,
 and is used like so:
 
 ```

docs/docs/integrations/mqtt.md

@@ -45,6 +45,7 @@ Message published for each changed event. The first message is published when th
     "frame_time": 1607123961.837752,
     "snapshot_time": 1607123961.837752,
     "label": "person",
+    "sub_label": null,
     "top_score": 0.958984375,
     "false_positive": false,
     "start_time": 1607123955.475377,
@@ -69,6 +70,7 @@ Message published for each changed event. The first message is published when th
     "frame_time": 1607123962.082975,
     "snapshot_time": 1607123961.837752,
     "label": "person",
+    "sub_label": null,
     "top_score": 0.958984375,
     "false_positive": false,
     "start_time": 1607123955.475377,

frigate/http.py

@@ -28,6 +28,7 @@ from playhouse.shortcuts import model_to_dict
 
 from frigate.const import CLIPS_DIR
 from frigate.models import Event, Recordings
+from frigate.object_processing import TrackedObject, TrackedObjectProcessor
 from frigate.stats import stats_snapshot
 from frigate.version import VERSION
 
@@ -211,7 +212,7 @@ def delete_retain(id):
 @bp.route("/events/<id>/sub_label", methods=("POST",))
 def set_sub_label(id):
     try:
-        event = Event.get(Event.id == id)
+        event: Event = Event.get(Event.id == id)
     except DoesNotExist:
         return make_response(
             jsonify({"success": False, "message": "Event " + id + " not found"}), 404
@@ -234,6 +235,16 @@ def set_sub_label(id):
             400,
         )
 
+    if not event.end_time:
+        tracked_obj: TrackedObject = (
+            current_app.detected_frames_processor.camera_states[
+                event.camera
+            ].tracked_objects.get(event.id)
+        )
+
+        if tracked_obj:
+            tracked_obj.obj_data["sub_label"] = new_sub_label
+
     event.sub_label = new_sub_label
     event.save()
     return make_response(
@@ -347,7 +358,6 @@ def label_thumbnail(camera_name, label):
         event_query = (
             Event.select()
             .where(Event.camera == camera_name)
-            .where(Event.has_snapshot == True)
             .order_by(Event.start_time.desc())
         )
     else:
@@ -355,7 +365,6 @@ def label_thumbnail(camera_name, label):
             Event.select()
             .where(Event.camera == camera_name)
             .where(Event.label == label)
-            .where(Event.has_snapshot == True)
             .order_by(Event.start_time.desc())
         )
 

frigate/mqtt.py

@@ -84,6 +84,8 @@ def create_mqtt_client(config: FrigateConfig, camera_metrics):
                         f"Turning on motion for {camera_name} due to detection being enabled."
                     )
                     camera_metrics[camera_name]["motion_enabled"].value = True
+                    state_topic = f"{message.topic[:-11]}/motion/state"
+                    client.publish(state_topic, payload, retain=True)
         elif payload == "OFF":
             if camera_metrics[camera_name]["detection_enabled"].value:
                 logger.info(f"Turning off detection for {camera_name} via mqtt")

frigate/object_processing.py

@@ -180,6 +180,7 @@ class TrackedObject:
             "frame_time": self.obj_data["frame_time"],
             "snapshot_time": snapshot_time,
             "label": self.obj_data["label"],
+            "sub_label": self.obj_data.get("sub_label"),
             "top_score": self.top_score,
             "false_positive": self.false_positive,
             "start_time": self.obj_data["start_time"],

frigate/record.py

@@ -167,7 +167,7 @@ class RecordingMaintainer(threading.Thread):
                         f"{cache_path}",
                     ]
                     p = sp.run(ffprobe_cmd, capture_output=True)
-                    if p.returncode == 0:
+                    if p.returncode == 0 and p.stdout.decode():
                         duration = float(p.stdout.decode().strip())
                         end_time = start_time + datetime.timedelta(seconds=duration)
                         self.end_time_cache[cache_path] = (end_time, duration)
@@ -276,13 +276,13 @@ class RecordingMaintainer(threading.Thread):
         file_path = os.path.join(directory, file_name)
 
         try:
+            if not os.path.exists(file_path):
                 start_frame = datetime.datetime.now().timestamp()
                 # copy then delete is required when recordings are stored on some network drives
                 shutil.copyfile(cache_path, file_path)
                 logger.debug(
                     f"Copied {file_path} in {datetime.datetime.now().timestamp()-start_frame} seconds."
                 )
-            os.remove(cache_path)
 
                 rand_id = "".join(
                     random.choices(string.ascii_lowercase + string.digits, k=6)
@@ -298,6 +298,9 @@ class RecordingMaintainer(threading.Thread):
                     # TODO: update this to store list of active objects at some point
                     objects=active_count,
                 )
+            else:
+                logger.warning(f"Ignoring segment because {file_path} already exists.")
+            os.remove(cache_path)
         except Exception as e:
             logger.error(f"Unable to store recording segment {cache_path}")
             Path(cache_path).unlink(missing_ok=True)

frigate/stats.py

@@ -22,7 +22,8 @@ logger = logging.getLogger(__name__)
 def get_latest_version() -> str:
     try:
         request = requests.get(
-            "https://api.github.com/repos/blakeblackshear/frigate/releases/latest"
+            "https://api.github.com/repos/blakeblackshear/frigate/releases/latest",
+            timeout=10,
         )
     except:
         return "unknown"

frigate/video.py

@@ -457,8 +457,13 @@ def detect(
         size = region[2] - region[0]
         x_min = int(max(0, (box[1] * size) + region[0]))
         y_min = int(max(0, (box[0] * size) + region[1]))
-        x_max = int(min(detect_config.width, (box[3] * size) + region[0]))
+        x_max = int(min(detect_config.width - 1, (box[3] * size) + region[0]))
-        y_max = int(min(detect_config.height, (box[2] * size) + region[1]))
+        y_max = int(min(detect_config.height - 1, (box[2] * size) + region[1]))
+
+        # ignore objects that were detected outside the frame
+        if (x_min >= detect_config.width - 1) or (y_min >= detect_config.height - 1):
+            continue
+
         width = x_max - x_min
         height = y_max - y_min
         area = width * height
@@ -657,10 +662,10 @@ def process_frames(
                     # apply max/min to ensure values do not exceed the known frame size
                     boxes = [
                         (
-                            max(o[2][0], 0),
+                            o[2][0],
-                            max(o[2][1], 0),
+                            o[2][1],
-                            min(o[2][2] - o[2][0], detect_config.width - 1),
+                            o[2][2] - o[2][0],
-                            min(o[2][3] - o[2][1], detect_config.height - 1),
+                            o[2][3] - o[2][1],
                         )
                         for o in group
                     ]

web/src/components/RecordingPlaylist.jsx

@@ -41,15 +41,15 @@ export default function RecordingPlaylist({ camera, recordings, selectedDate })
   const openClass = active ? '-left-6' : 'right-0';
 
   return (
-    <div className="flex absolute z-10 inset-y-0 right-0 w-9/12 md:w-1/2 lg:w-3/5 max-w-md text-base text-white font-sans">
+    <div className="flex absolute inset-y-0 right-0 w-9/12 md:w-1/2 lg:w-3/5 max-w-md text-base text-white font-sans">
       <div
         onClick={toggle}
-        className={`absolute ${openClass} cursor-pointer items-center self-center rounded-tl-lg rounded-bl-lg border border-r-0 w-6 h-20 py-7 bg-gray-800 bg-opacity-70`}
+        className={`absolute ${openClass} cursor-pointer items-center self-center rounded-tl-lg rounded-bl-lg border border-r-0 w-6 h-20 py-7 bg-gray-800 bg-opacity-70 z-10`}
       >
         {active ? <Menu /> : <MenuOpen />}
       </div>
       <div
-        className={`w-full h-full bg-gray-800 bg-opacity-70 border-l overflow-x-hidden overflow-y-auto${
+        className={`w-full h-full bg-gray-800 bg-opacity-70 border-l overflow-x-hidden overflow-y-auto z-10${
           active ? '' : ' hidden'
         }`}
       >