Card freezes cyclically after a while on Firefox browser

[wiredolphin]

Checklist:

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

Release with the issue: v5.2.0

Last working release (if known):

Browser and Operating System: Firefox/Debian 12

Description of problem:

After reaching the containing webpage, after about 20 seconds the card freezes for about 1 minute, while frigate docker logs stops outputting lines to console and the browser console emits an error line with the below content: Failed to load ‘https://<domain.example>/api/camera_proxy_stream/camera.yard01?token=<security-token>’. A ServiceWorker intercepted the request and encountered an unexpected error. Then the card automatically restarts live streaming of the camera and frigate docker continues logging to console. This happens cyclically.

Frigate card diagnostic information

{
  "ha_version": "2024.6.2",
  "card_version": "5.2.0",
  "browser": "Mozilla/5.0 (X11; Linux x86_64; rv:127.0) Gecko/20100101 Firefox/127.0",
  "date": "2024-06-13T07:27:23.522Z",
  "frigate_version": {
    "3e71cafb764ad6e9b4d331d33d343bfa": "5.2.0/0.13.2-6476f8a"
  },
  "lang": "it",
  "timezone": "Europe/Rome",
  "git": {
    "build_version": "5.2.0-HEAD+g69249b6",
    "build_date": "Fri, 23 Jun 2023 15:26:26 GMT",
    "commit_date": "Thu, 22 Jun 2023 09:21:26 -0600"
  },
  "config": {
    "type": "custom:frigate-card",
    "cameras": [
      {
        "camera_entity": "camera.yard01"
      }
    ],
    "view": {
      "default": "live"
    },
    "live": {
      "zoomable": true
    },
    "elements": [
      {
        "type": "custom:frigate-card-menu-icon",
        "icon": "mdi:wrench",
        "style": {
          "left": "calc(100% - 38px)",
          "position": "absolute"
        },
        "tap_action": {
          "action": "url",
          "url_path": "http://<internal_ip>/web/admin.html"
        }
      },
      {
        "type": "custom:frigate-card-menu-icon",
        "icon": "mdi:cog",
        "style": {
          "left": "calc(100% - 74px)",
          "position": "absolute"
        },
        "tap_action": {
          "action": "navigate",
          "navigation_path": "/dashboard-cameras/yard01"
        }
      },
      {
        "type": "custom:frigate-card-menu-icon",
        "icon": "mdi:view-grid-outline",
        "tap_action": {
          "action": "navigate",
          "navigation_path": "/dashboard-cameras"
        }
      },
      {
        "type": "custom:frigate-card-menu-state-icon",
        "entity": "switch.yard01_detect",
        "tap_action": {
          "action": "toggle"
        }
      },
      {
        "type": "custom:frigate-card-conditional",
        "conditions": {
          "camera": [
            "camera.yard01"
          ]
        },
        "elements": [
          {
            "type": "custom:frigate-card-ptz",
            "service": "onvif.ptz",
            "style": {
              "left": "20px",
              "bottom": "60px",
              "background": "rgba(255, 255, 255, 0.0)",
              "transform": "scale(1.2, 1.2)"
            },
            "data_left": {
              "device_id": "<device_id>",
              "distance": 0.5,
              "speed": 0,
              "continuous_duration": 0.5,
              "move_mode": "ContinuousMove",
              "pan": "LEFT"
            },
            "data_right": {
              "device_id": "<device_id>",
              "distance": 0.5,
              "speed": 0,
              "continuous_duration": 0.5,
              "move_mode": "ContinuousMove",
              "pan": "RIGHT"
            },
            "data_up": {
              "device_id": "<device_id>",
              "distance": 0.5,
              "speed": 0,
              "continuous_duration": 0.5,
              "move_mode": "ContinuousMove",
              "tilt": "UP"
            },
            "data_down": {
              "device_id": "<device_id>",
              "distance": 0.5,
              "speed": 0,
              "continuous_duration": 0.5,
              "move_mode": "ContinuousMove",
              "tilt": "DOWN"
            },
            "data_zoom_in": {
              "device_id": "<device_id>",
              "zoom": "ZOOM_IN",
              "distance": 0.01,
              "continuous_duration": 0.01,
              "move_mode": "ContinuousMove"
            },
            "data_zoom_out": {
              "device_id": "<device_id>",
              "zoom": "ZOOM_OUT",
              "distance": 0.01,
              "continuous_duration": 0.01,
              "move_mode": "ContinuousMove"
            }
          }
        ]
      }
    ],
    "menu": {
      "style": "outside",
      "position": "bottom",
      "alignment": "left",
      "button_size": 30,
      "buttons": {
        "cameras": {
          "enabled": false
        },
        "frigate": {
          "enabled": true
        }
      }
    }
  }
}

Javascript errors shown in the web inspector (if applicable):

Failed to load ‘https://<domain.example>/api/camera_proxy_stream/camera.yard01?token=<security-token>’. A ServiceWorker intercepted the request and encountered an unexpected error.

Additional information: IMPORTANT: Please note, this happens only with Firefox browser. Tested on Chromium and the card works always flawlessy.

[dermotduffy]

[Issue cleanup] Please update to the latest build and let me know if you still have this issue:

https://github.com/dermotduffy/frigate-hass-card/releases/tag/v6.0.0-beta.1

[dermotduffy]

Please re-open if this is confirmed still an issue with v6 releases.