A full-featured Frigate Lovelace card:

• Live viewing.
• Clips and snapshot browsing via mini-gallery.
• Automatic updating to continually show latest clip / snapshot.
• Support for filtering events by zone and label.
• Arbitrary entity access via menu (e.g. motion sensor access).
• Fullscreen event gallery & media viewing.
• Full Lovelace editing support.
• Theme friendly.
• Advanced: Support for WebRTC live viewing by embedding the WebRTC card.

• Use HACS to install the card:

Home Assistant > HACS > Frontend > "Explore & Add Integrations" > Frigate Card

• Add the following to configuration.yaml (note that /hacsfiles/ is just an optimized equivalent of /local/community/ that HACS natively supports):

lovelace:
  resources:
    - url: /hacsfiles/frigate-hass-card/frigate-hass-card.js
      type: module

• Restart Home Assistant.
• Add the new card to the Lovelace configuration!

• Download the frigate-hass-card.js attachment of the desired release to a location accessible by Home Assistant.
• Add the location as a Lovelace resource via the UI, or via YAML configuration) such as:

lovelace:
  mode: yaml
  resources:
   - url: /local/frigate-hass-card.js
     type: module

The card can show live cameras, stored events (clip or snapshot) and an event gallery (clips or snapshots). Of these views, the gallery views have no intrinsic aspect-ratio, whereas the other views have the aspect-ratio of the media.

The card aspect ratio can be changed with the dimensions.aspect_ratio_mode and dimensions.aspect_ratio appearance options.

If no aspect ratio is specified or available, but one is needed then 16:9 will be used by default.

• 16 / 9 or 16:9: Default widescreen ratio.
• 4 / 3 or 4:3: Default fullscreen ratio.
• <W>/<H> or <W>:<H>: Any arbitrary aspect-ratio.

Have the card aspect-ratio dynamically follow the last loaded media, but use 4:3 as the default when there is no such media:

dimensions:
  aspect_ratio_mode: dynamic
  aspect_ratio: '4:3'

WebRTC support blends the use of the ultra-realtime WebRTC live view with convenient access to Frigate events/snapshots/UI. A perfect combination!

Note: WebRTC must be installed and configured separately (see details) before it can be used with this card.

WebRTC does not support use of Frigate-provided camera entities, as it requires an RTSP stream which Frigate does not provide. There are two ways to specify the WebRTC source camera:

• Manual setup of separate RTSP camera entities in Home Assistant (see example). These entities will then be available for selection in the GUI card editor for the Frigate card under the WebRTC options, or can be manually specified with a webrtc.entity option in the YAML configuration for this card:

[rest of Frigate card configuration]
webrtc:
  entity: 'camera.front_door_rstp`

• OR manually entering the WebRTC camera URL parameter in the GUI card editor, or configuring the url parameter as part of a manual Frigate card configuration, like the following example:

[rest of Frigate card configuration]
webrtc:
  url: 'rtsp:https://USERNAME:PASSWORD@CAMERA:554/RTSP_PATH'

See WebRTC configuration for full configuration options.

This example allows access to the detection, recordings and snapshots switches from the menu. It also enables a different entity to trigger a card update (but without appearing in the menu).

entities:
  - entity: switch.front_door_recordings
  - entity: switch.front_door_snapshots
  - entity: switch.front_door_detect
  - entity: binary_sensor.front_door_person_motion
    show: false

This card supports the Picture Elements configuration syntax to seamlessly allow the user to add custom elements to the card, which may be configured to perform a variety of actions on tap, double_tap and hold.

In the card YAML configuration, elements may be manually added under an elements key.

See the action documentation for more information on the action options available.

This card supports all Picture Elements using the same syntax. The card also supports a handful of custom special elements to add special Frigate card functionality.

Parameters for the custom:frigate-card-conditional element:

See the PTZ example below for a real-world example.

You can add custom icons to the menu with arbitrary actions.

  - type: custom:frigate-card-menu-icon
    icon: mdi:book
    tap_action:
      action: url
      url_path: https://github.com/dermotduffy/frigate-hass-card/releases

You can add custom state icons to the menu to show the state of an entity and complete arbitrary actions.

elements:
  - type: custom:frigate-card-menu-state-icon
    entity: light.office_main_lights
    tap_action:
      action: toggle

You can adds a state badge to the card showing arbitrary entity states.

Expand: State badge

This example adds a state badge showing the temperature and hides the label text:

  - type: state-badge
    entity: sensor.kitchen_temperature
    style:
      right: '-20px'
      top: 100px
      color: rgba(0,0,0,0)
      opacity: 0.5

You can have icons conditionally added to the menu based on entity state.

  - type: conditional
    conditions:
      - entity: light.kitchen
        state: 'on'
    elements:
      - type: custom:frigate-card-menu-state-icon
        entity: light.kitchen
        tap_action:
          action: toggle

You can restrict icons to only show for certain views using a custom:frigate-card-conditional element (e.g. PTZ controls)

elements:
  - type: custom:frigate-card-conditional
    conditions:
      view:
        - live
    elements:
      - type: icon
        icon: mdi:arrow-up
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 25px
          bottom: 50px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: up
      - type: icon
        icon: mdi:arrow-down
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 25px
          bottom: 0px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: down
      - type: icon
        icon: mdi:arrow-left
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 50px
          bottom: 25px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: left
      - type: icon
        icon: mdi:arrow-right
        style:
          background: rgba(255, 255, 255, 0.25)
          border-radius: 5px
          right: 0px
          bottom: 25px
        tap_action:
          action: call-service
          service: amcrest.ptz_control
          service_data:
            entity_id: camera.kitchen
            movement: right

This card supports several different views.

Updates will occur whenever on every change of the state of the camera_entity or any entity configured under update_entities. In particular, if the desire is to have an auto-refreshing view of the most recent event, the camera_entity will not be sufficient alone since the Home Assistant state for Frigate camera entities does not change often. Instead, use the Frigate binary_sensor for that camera (or any other entity at your discretion) to trigger the update:

update_entities:
  - binary_sensor.office_person_motion

See the advanced options above.

Clicking on a snapshot will take the user to a clip that was taken at the ~same time as the snapshot (if any).

More details about an event can be found by clicking the 'globe' icon in the menu, which takes the user to the Frigate page for that event.

This card supports several menu configurations.

Key	Description	Screenshot
hidden-{top,bottom,right,left} [default: hidden-top]	Hide the menu by default, expandable upon clicking the 'F' button.
overlay-{top,bottom,right,left}	Overlay the menu over the card contents. The 'F' button shows the default view.
hover-{top,bottom,right,left}	Overlay the menu over the card contents when the mouse is over the card / touch on the card, otherwise it is not shown. The 'F' button shows the default view.
above	Render the menu above the card. The 'F' button shows the default view.
below	Render the menu below the card. The 'F' button shows the default view.
none	No menu is shown.

A configuration that uses WebRTC for live:

- type: 'custom:frigate-card'
  camera_entity: camera.front_door
  frigate_url: http:https://frigate
  live_provider: webrtc
  webrtc:
    entity: camera.front_door_rtsp

A configuration that shows the latest clip on load, but does not automatically play it:

- type: 'custom:frigate-card'
  camera_entity: camera.front_door
  frigate_url: http:https://frigate
  view_default: clip

Full viewing of clips:

This card supports full editing via the Lovelace card editor. Additional arbitrary configuration for WebRTC may be specified in YAML mode.

You must be using a version of the Frigate integration >= 2.1.0 to use JSMPEG proxying. The frigate-jsmpeg live provider will not work with earlier integration versions.

Unfortunately, iOS does not support the Javascript fullscreen API. As a result, card-level fullscreen support for the iPhone is not currently possible.

Note: This error should no longer be possible >= v0.1.5 .

Failed to fetch is a generic error indicating your browser (and this card) could not communicate with the Frigate server specified in the card configuration. This could be for any number of reasons (e.g. incorrect URL, incorrect port, broken DNS, etc).

If the 'globe' icon in the menu bar of the card also doesn't open the Frigate UI, the address entered is probably incorrect/inaccessible.

Note: This error should no longer be possible >= v0.1.5 .

If you are accessing your Home Assistant instance over https, you will likely receive this error unless you have configured the card to also communicate with Frigate via https (e.g. via a reverse proxy). This is because the browser is blocking the attempt to mix access to both https and http resources.

The javascript console (how to access) will show an error such as:

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an 
insecure resource '<URL>'. This request has been blocked; the content must be
served over HTTPS.

Accessing both Home Assistant and Frigate over https will likely resolve this issue (e.g. through the use of a reverse proxy in front of Frigate).