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
Option | Default | Description |
---|---|---|
camera_entity |
The optional Frigate camera entity to use in the frigate live provider view. Also used to automatically detect the frigate_camera_name . |
|
frigate_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. |
view_default |
live |
The view to show by default. See views below. |
Option | Default | Description |
---|---|---|
live_provider |
frigate |
The means through which the live camera view is displayed. See Live Provider below. |
frigate_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_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. | |
frigate_url |
The URL of the frigate server. If set, this value will be (exclusively) used for a Frigate UI menu button. |
|
autoplay_clip |
false |
Whether or not to autoplay clips in the 'clip' view. Clips manually chosen in the clips gallery will still autoplay. |
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. |
Option | Default | Description |
---|---|---|
menu_mode |
hidden-top |
The menu mode to show by default. See menu modes below. |
menu_buttons.{frigate, live, clips, snapshots, frigate_ui, fullscreen} |
true |
Whether or not to show these builtin actions in the card menu. |
controls.nextprev |
thumbnails |
When viewing media, what kind of controls to show to move to the previous/next media item. Acceptable values: thumbnails , chevrons , none . |
dimensions.aspect_ratio_mode |
dynamic |
The aspect ratio mode to use. Acceptable values: dynamic , static , unconstrained . See aspect ratios below. |
dimensions.aspect_ratio |
16:9 |
The aspect ratio to use. Acceptable values: <W>:<H> or <W>/<H> . See aspect ratios below. |
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.
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). |
16 / 9
or16:9
: Default widescreen ratio.4 / 3
or4: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'
Option | Default | Description |
---|---|---|
label |
A label used to filter events (clips & snapshots), e.g. 'person'. | |
zone |
A zone used to filter events (clips & snapshots), e.g. 'front_door'. | |
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. |
WebRTC support blends the use of the ultra-realtime WebRTC live view with convenient access to Frigate events/snapshots/UI. A perfect combination!
Option | Default | Description |
---|---|---|
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. |
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.
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. |
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. |
conditions.view |
A list of views in which these elements should be rendered. |
elements |
The elements to render. Can be any supported element, include additional condition or custom elements. |
See the PTZ example below for a real-world example.
You can add custom icons to the menu with arbitrary actions.
Expand: Custom menu icon
This example adds an icon that navigates the brower to the releases page for this card:
- 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.
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
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
![Picture elements temperature example](https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/picture_elements_temperature.png)
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.
- 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)
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
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 the snapshot gallery for this camera/zone/label. |
snapshot |
Shows the most recent snapshot for this camera/zone/label. |
clips |
Shows the clip gallery for this camera/zone/label. |
clip |
Shows the most recent clip for this camera/zone/label. |
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.
A configuration that uses WebRTC for live:
- type: 'custom:frigate-card'
camera_entity: camera.front_door
frigate_url: 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: 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).