Frigate Lovelace Card

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 mode.
• Lovelace visual editing support.
• Full Picture Elements support.
• Theme friendly.
• Advanced: Support for WebRTC live viewing by embedding the WebRTC card.

Installation

• 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!

Advanced Users: Manual Installation

• 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

Options

Basic options

Option	Default	Description
camera_entity		The optional Frigate camera entity to use in the frigate live provider view. Also used to automatically detect the value of frigate.camera_name.

Frigate server options

All variables listed are under a frigate: section.

Option	Default	Description
camera_name	Autodetected from camera_entity if that is specified.	The Frigate camera name to use when communicating with the Frigate server, e.g. for viewing clips/snapshots or the JSMPEG live view. To view the birdseye view set this to birdseye and use the frigate-jsmpeg live provider.
url		The URL of the frigate server. If set, this value will be (exclusively) used for a Frigate UI menu button.
label		A Frigate label / object filter used to filter events (clips & snapshots), e.g. 'person'.
zone		A Frigate zone used to filter events (clips & snapshots), e.g. 'front_door'.
client_id	frigate	The Frigate client id to use. If this Home Assistant server has multiple Frigate server backends configured, this selects which server should be used. It should be set to the MQTT client id configured for this server, see Frigate Integration Multiple Instance Support.

View options

All variables listed are under a view: section.

Option	Default	Description
default	live	The view to show in the card by default. See views below.
timeout		A numbers of seconds of inactivity after which the card will reset to the default configured view. Inactivity is defined as lack of interaction with the Frigate menu.
actions		Actions to use for all views, individual actions may be overriden by view-specific actions. See actions below.

Menu options

All variables listed are under a menu: section.

Option	Default	Description
mode	hidden-top	The menu mode to show by default. See menu modes below.
button_size	40px	The size of the menu buttons (in CSS Units)[https://www.w3schools.com/cssref/css_units.asp].
buttons.{frigate, live, clips, snapshots, image, download, frigate_ui, fullscreen}	true, except for image	Whether or not to show these builtin actions in the card menu.
conditions		Condition(s) that must be met in order for the menu to be displayed. These conditions use the same format as the custom:frigate-card-conditional card (see Possible conditions below). If conditions are specified but not met, then the menu is not rendered.

Live options

All variables listed are under a live: section.

Option	Default	Description
preload	false	Whether or not to preload the live view. Preloading causes the live view to render in the background so it's instantly available when requested. This consumes additional network/CPU resources continually.
provider	frigate	The means through which the live camera view is displayed. See Live Provider below.
webrtc.url		The RTSP url to pass to WebRTC. Specify this OR webrtc.entity (below).
webrtc.entity		The RTSP entity to pass WebRTC. Specify this OR webrtc.url (above).
webrtc.*		Any other options in a webrtc: YAML dictionary are silently passed through to WebRTC. See WebRTC Configuration for full details this external card provides.
actions		Actions to use for the live view. See actions below.

Available Live Providers

Live Provider	Latency	Frame Rate	Installation	Description
frigate	High	High	Builtin	Use the built-in Home Assistant camera stream from Frigate (RTMP). The camera doesn't even need to be a Frigate camera!
frigate-jsmpeg	Lower	Low	Builtin	Stream the JSMPEG stream from Frigate (proxied via the Frigate integration). See note below on the required integration version for this live provider to function. This is the only live provider that can view the Frigate birdseye view.
webrtc	Lowest	High	Separate installation required	Uses WebRTC to stream live feed, requires manual extra setup, see below.

Event Viewer options

The event_viewer is used for viewing all clip and snapshot media, in a media carousel. All variables listed are under an event_viewer: section.

Option	Default	Description
autoplay_clip	false	Whether or not to autoplay clips in the 'clip' view. Clips manually chosen in the clips gallery will still autoplay.
lazy_load	true	Whether or not to lazily load media in the event viewer carousel. Setting this will false will fetch all media immediately which may make the carousel experience smoother at a cost of (potentially) a substantial number of simultaneous media fetches on load.
draggable	true	Whether or not the event viewer carousel can be dragged left or right, via touch/swipe and mouse dragging.
controls.next_previous.style	thumbnails	When viewing media, what kind of controls to show to move to the previous/next media item. Acceptable values: thumbnails, chevrons, none .
controls.next_previous.size	48px	The size of the next/previous controls (in CSS Units)[https://www.w3schools.com/cssref/css_units.asp].
actions		Actions to use for all views that use the event_viewer (e.g. clip, snapshot). See actions below.

Event Gallery options

The event_gallery is used for providing an overview of all clips and snapshots in a thumbnail gallery. All variables listed are under a event_gallery: section.

Option	Default	Description
actions		Actions to use for all views that use the event_gallery (e.g. clips, snapshots). See actions below.

Image options

All variables listed are under a image: section.

Option	Default	Description
src	embedded image	A static image URL for use with the image view.
actions		Actions to use for the image view. See actions below.

Dimension options

All variables listed are under a dimensions: section.

Option	Default	Description
aspect_ratio_mode	dynamic	The aspect ratio mode to use. Acceptable values: dynamic, static, unconstrained. See aspect ratios below.
aspect_ratio	16:9	The aspect ratio to use. Acceptable values: <W>:<H> or <W>/<H>. See aspect ratios below.

dimensions.aspect_ratio_mode:

Option	Description
dynamic	The aspect-ratio of the card will match the aspect-ratio of the last loaded media.
static	A fixed aspect-ratio (as defined by dimensions.aspect_ratio) will be applied to all views.
unconstrained	No aspect ratio is enforced in any view, the card will expand with the content (may be especially useful for a panel-mode dashboard).

dimensions.aspect_ratio:

• 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.

Aspect Ratio

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 options described above.

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

Other Options

Option	Default	Description
update_entities		A list of entity ids that should cause the whole card to re-render, this can be useful in the clip or snapshot mode to (for example) cause a motion sensor to trigger a card refresh. Configurable in YAML only. Entities used in picture elements / included in the menu do not need to be explicitly included here to be kept updated.

Using WebRTC

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.

Specifying the WebRTC Camera

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]
live:
  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]
live:
  webrtc:
    url: 'rtsp://USERNAME:PASSWORD@CAMERA:554/RTSP_PATH'

See WebRTC configuration for full configuration options.

Picture Elements / Menu customizations

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.

Special Elements

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.

Element name	Description
custom:frigate-card-menu-icon	Add an arbitrary icon to the Frigate Card menu. Configuration is ~identical to that of the Picture Elements Icon except with a type name of custom:frigate-card-menu-icon.
custom:frigate-card-menu-state-icon	Add a state icon to the Frigate Card menu that represents the state of a Home Assistant entity. Configuration is ~identical to that of the Picture Elements State Icon except with a type name of custom:frigate-card-menu-state-icon.
custom:frigate-card-conditional	Restrict a set of elements to only render when the card is showing particular a particular view. See configuration below.

custom:frigate-card-conditional

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

Parameter	Description
type	Must be custom:frigate-card-conditional.
conditions	A set of conditions that must evaluate to true in order for the elements to be rendered. See below.
elements	The elements to render. Can be any supported element, include additional condition or custom elements.

Frigate Card Conditions

All variables listed are under a conditions: section.

Condition	Description
view	A list of views in which these elements should be rendered.
fullscreen	If true the elements are only rendered if the card is in fullscreen mode. If false the elements are only rendered if the card is NOT in fullscreen mode.

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

Special Actions

custom:frigate-card-action

Action name	Description
custom:frigate-card-action	Call a Frigate Card action. Acceptable values are frigate, clip, clips, image, live, snapshot, snapshots, download, frigate_ui, fullscreen.

Value	Description
frigate	Show/hide the menu or trigger the default view.
clip, clips, image, live, snapshot, snapshots	Trigger the named view.
download	Download the displayed media.
frigate_ui	Open the Frigate UI at the configured URL.
fullscreen	Toggle fullscreen.

Views

This card supports several different views:

Key	Description
live (default)	Shows the live camera view, either the name Frigate view or WebRTC if configured.
snapshots	Shows an event gallery of snapshots for this camera/zone/label.
snapshot	Shows an event viewer for the most recent snapshot for this camera/zone/label. Can also be accessed by holding down the snapshots menu icon.
clips	Shows an event gallery of clips for this camera/zone/label.
clip	Shows an event viewer for the most recent clip for this camera/zone/label. Can also be accessed by holding down the clips menu icon.
image	Shows a static image specified by the image parameter, can be used as a discrete default view or a screensaver (via view_timeout).

Automatic updates in the clip or snapshot view

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 other options above.

Getting from a snapshot to a clip

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

Card & View Actions

Actions may be attached to the card itself, to trigger action when the card experiences a tap, double_tap or hold event. These actions can be specified both for the overall card and for individual groups of view.

Configuration path	Views to which it refers
view.actions	All (may be overriden by the below)
event_viewer.actions	clip, snapshot
event_gallery.actions	clips, snapshots
live.actions	live
image.actions	image

If an action is configured for both the whole card (view.actions) and a more specific view (e.g. live.actions) then the actions are merged, with the more specific overriding the less specific (see example below).

The format for actions is the standard Home Assistant action format as well as the custom Frigate card action to trigger Frigate card changes.

Note: The card itself obviously relies on human interactions to function (e.g. tap on the menu should activate that button, tap on a gallery thumbnail should open that piece of media, etc). These internal actions are executed also, which means that a card-wide tap action probably isn't that useful as it may be disorienting to the user and will trigger on all kinds of basic interaction on the card (e.g. tapping/clicking a menu button).

Menu Modes

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.

Screenshot: Snapshot / Clip Gallery

Full viewing of clips:

Card Editing

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

Examples

WebRTC

Expand: Basic WebRTC configuration

type: 'custom:frigate-card'
camera_entity: camera.front_door
live:
  provider: webrtc
  webrtc:
    entity: camera.front_door_rtsp

Static Aspect Ratios

You can set a static aspect ratio.

Expand: Static 4:3 aspect ratios

[...]
dimensions:
  aspect_ratio_mode: dynamic
  aspect_ratio: '4:3'

Adding Menu Icons

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

Expand: Custom menu icon

This example adds an icon that navigates the browser to the releases page for this card:

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

Adding Menu State Icons

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

Expand: Custom menu state icon

This example adds an icon that represents the state of the light.office_main_lights entity, that toggles the light on double click.

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

Adding State Badges

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:

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

Adding State Badges

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

Expand: Conditional menu icons

This example only adds the light entity to the menu if a light is on.

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

Restricting icons to certain views

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

Expand: View-based conditions (e.g. PTZ controls)

This example shows PTZ icons that call a PTZ service, but only in the live view.

[...]
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

Triggering card actions

You can control the card itself with the custom:frigate-card-action action.

Expand: Custom fullscreen button

This example shows an icon that toggles the card fullscreen mode.

[...]
elements:
  - type: icon
    icon: mdi:fullscreen
    style:
      left: 40px
      top: 40px
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen

Adding card-wide actions

You can add actions to the card to be trigger on tap, double_tap or hold. See actions above.

Expand: Adding a card-wide action

In this example double clicking the card in any view will cause the card to go into fullscreen mode, except when the view is live in which case the office lights are toggled.

[...]
view:
  actions:
    double_tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
live:
  provider: frigate-jsmpeg
  actions:
    entity: light.office_main_lights
    double_tap_action:
      action: toggle

Hiding the menu in certain circumstances

You can add conditions to the menu, which will hide the menu unless met.

Expand: Hiding the menu

This example hides the menu unless the card is in fullscreen mode, and uses a card-wide action to enable fullscreen mode on double_tap:

[...]
view:
  actions:
    double_tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
menu:
  conditions:
    fullscreen: true

Troubleshooting

JSMPEG live camera only shows a 'spinner'

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.

Fullscreen button does not appear on iPhone

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

Failed to fetch

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.

Mixed content

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).