Skip to content

dermotduffy/frigate-hass-card

Repository files navigation

Frigate icon GitHub Release Build Status License HACS Sponsor

Frigate card example

Frigate Lovelace Card

A full-featured Frigate Lovelace card:

  • Live viewing of multiple cameras.
  • 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.
  • Carousel/Swipeable media, thumbnails and cameras.
  • Direct media downloads.
  • Lovelace visual editing support.
  • Full Picture Elements support.
  • Theme friendly.

Screenshots Below!

See more screenshots below.

Supported Browsers

Modern Safari, Firefox and Chrome-based browsers are supported, as well as the Home Assistant App on Android and iOS. Other/older browsers may work, but are unsupported.

Installation

  • HACS is highly recommended to install the card -- it works for all Home Assistant variants. If you don't have HACS installed, start there -- then come back to these instructions.

  • Find the card in HACS:

Home Assistant > HACS > Frontend > "Explore & Add Integrations" > Frigate Card
  • Click Download this repository with HACS.

Lovelace YAML users

If Lovelace is in YAML mode then there's an additional step required to load the resource into your browser. (This mode is not the default -- you would seemode: yaml under lovelace: in your configuration.yaml if this applies to you),

  • 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

Note: This is very rarely needed -- please consider HACS (above)!

  • Download the frigate-hass-card.zip attachment of the desired release to a location accessible by Home Assistant. Note that the release will have a series of .js files (for HACS users) and a frigate-hass-card.zip for the convenience of manual installers.
  • Unzip the file and move the contents of the dist/ folder to any subfolder name you'd like, e.g. frigate-card is used in the below example.
  • Add the location as a Lovelace resource via the UI, or via YAML configuration such as:
lovelace:
  mode: yaml
  resources:
   - url: /local/frigate-card/frigate-hass-card.js
     type: module

Advanced Users: Installing Unreleased Versions

You can install any unreleased version of the card by leveraging the GitHub Actions artifacts that are generated on every revision. Here is a video walkthrough installing the latest revision of the release-4.1.0 branch:

Click here to show
c8lUaQ8PlS.mp4

Configuration

At least 1 camera must be configured in the cameras section, but otherwise all configuration parameters are optional.

Camera Options

The cameras block configures a list of cameras the card should support. The first listed camera is the default. Camera configuration is under:

cameras:
  - [...camera 0 (default camera)...]
  - [...camera 1...]
  - [...camera 2...]

See the fully expanded cameras configuration example for how these parameters are structured.

Option Default Overridable Description
camera_entity The Home Assistant camera entity to use with the frigate live provider view. Also used to automatically detect the name of the underlying Frigate camera, and the title/icon of the camera.
live_provider auto The choice of live stream provider. See Live Providers below.
title Autodetected from camera_entity if that is specified. A friendly name for this camera to use in the card.
icon Autodetected from camera_entity if that is specified. The icon to use for this camera in the camera menu and in the next & previous controls when using the icon style.
hide false Whether or not to hide this as an independent camera (e.g. hidden on the live carousel, media filter, camera menu, and triggers cannot trigger this camera). This may be useful if this camera is exclusively used as a dependency of another camera.
id camera_entity, webrtc_card.entity or frigate.camera_name if set (in that preference order). An optional identifier to use throughout the card configuration to refer unambiguously to this camera. See camera IDs.
engine auto Which camera engine to use for this camera. If auto the card will attempt to choose the correct engine from the specified options. See engines below for valid options.
frigate Options for a Frigate camera. See Frigate configuration below.
dependencies Other cameras that this camera should depend upon. See camera dependencies below.
triggers Define what should cause this camera to update/trigger. See camera triggers below.
webrtc_card The WebRTC entity/URL to use for this camera with the webrtc-card live provider. See below.

Available Live Providers

Live Provider Latency Frame Rate Loading Time Installation Description
ha (default HA configuration) Poor High Better Builtin Use the built-in Home Assistant camera stream. The camera doesn't even need to be a Frigate camera!
ha (when configured with LL-HLS) Better High Better Builtin Use the built-in Home Assistant camera streams -- can be configured to use an LL-HLS feed for lower latency.
ha (Native WebRTC) Best High Better Builtin Use the built-in Home Assistant camera streams -- can be configured to use native WebRTC offering a very low-latency feed direct to your browser.
image Poor Poor Best Builtin Use refreshing snapshots of the built-in Home Assistant camera streams.
jsmpeg Better Low Poor Builtin Use a the JSMPEG stream.
go2rtc Best High Better Builtin Uses go2rtc to stream live feeds. This is supported by Frigate >= 0.12.
webrtc-card Best High Better Separate installation required Embed's AlexxIT's WebRTC Card to stream live feed, requires manual extra setup, see below. Not to be confused with native Home Assistant WebRTC (use ha provider above).

Available Camera Engines

Engine Capabilities
Engine Live Supports clips Supports Snapshots Supports Recordings Supports Timeline Favorite events Favorite recordings
frigate ✖️
generic ✖️ ✖️ ✖️ ✖️ ✖️ ✖️
motioneye ✖️ ✖️ ✖️
Live providers supported per Engine
Engine / Live Provider ha image jsmpeg go2rtc webrtc-card
frigate
generic ✖️ ✖️
motioneye ✖️ ✖️ ✖️

Camera Frigate configuration

The frigate block configures options for a Frigate camera. This configuration is included as part of a camera entry in the cameras array.

cameras:
 - frigate:
Option Default Overridable 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.
url The URL of the frigate server. If set, this value will be (exclusively) used for a Camera UI menu button. All other communication with Frigate goes via Home Assistant.
labels An array of Frigate labels used to filter events (clips & snapshots), e.g. [person, car].
zones An array of Frigates zones used to filter events (clips & snapshots), e.g. [front_door, front_steps].
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.

Camera MotionEye configuration

The motioneye block configures options for a MotionEye camera. This configuration is included as part of a camera entry in the cameras array.

cameras:
 - motioneye:
Option Default Overridable Description
url The URL of the MotionEye server. If set, this value will be (exclusively) used for a Camera UI menu button.
images Configure how MotionEye images are consumed. See below.
movies Configure how MotionEye movies are consumed. See below.

Camera MotionEye images and movies configuration

The images and movies block configures options for a MotionEye camera. All options for images and movies are under their respective blocks. The options for both are the same.

cameras:
 - motioneye:
     images:
cameras:
 - motioneye:
     movies:
Option Default Overridable Description
directory_pattern %Y-%m-%d The directory that motionEye is configured to store media into. May contain multiple sub-directories separated by /. Path must