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.

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 unless you are developing the card. Please consider HACS (above)!

• 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

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.

Available Live Providers

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:

Camera WebRTC Card configuration

The webrtc_card block configures only the entity/URL for this camera to be used with the WebRTC Card live provider. This configuration is included as part of a camera entry in the cameras array.

cameras:
 - webrtc_card:

See Using the WebRTC Card below for more details on how to use the WebRTC Card live provider.

Camera Dependency Configuration

The dependencies block configures other cameras as dependents of this camera. Dependent cameras have their events fetched and merged with this camera. Configuration is under:

cameras:
 - dependencies:

Camera Trigger Configuration

The triggers block configures what triggers a camera. Triggering can be used to either reset to the default view / update the card, or active the camera in scan mode.

cameras:
 - triggers:

Camera IDs: Refering to cameras in card configuration

Each camera configured in the card has a single identifier (id). For a given camera, this will be one of the camera {id, camera_entity, webrtc_card.entity or frigate.camera_name} parameters for that camera -- in that order of precedence. These ids may be used in conditions, dependencies or custom actions to refer to a given camera unambiguously. |

Example

See the basic cameras configuration example below.

View Options

All configuration is under:

view:

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

View: Scan Mode configuration

All configuration is under:

view:
  scan:

Scan mode allows the card to automatically "follow the action". In this mode the card will automatically select a camera in the live view when an entity changes to an active state (specifically on or open). The entities considered are defined by your camera configuration (see triggers parameters). An untrigger is defined as the state for all the configured entities returning to inactive (i.e. not on or open), with an optional number of seconds to wait prior to the untriggering (see untrigger_seconds).

When the camera untriggers, the view will either remain as-is (if untrigger_reset is false) and the card return to normal operation, or reset to the default view (if untrigger_reset is true -- the default).

Triggering is only allowed when there is no ongoing human interaction with the card -- interaction will automatically untrigger and further triggering will not occur until after the card has been unattended for view.timeout_seconds.

Scan mode tracks Home Assistant state changes -- when the card is first started, it takes an active change in state to trigger (i.e. an already occupied room will not trigger it, but a newly occupied room will).

Menu Options

All configuration is under:

menu:

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

Menu Options: Buttons

All configuration is under:

menu:
  buttons:
    [button]:

Buttons

Configuration on each button

Live Options

All configuration is under:

live:

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

Live Provider: JSMPEG Configuration

All configuration is under:

live:
  jsmpeg:

Live Provider: WebRTC Card Configuration

All configuration is under:

live:
  webrtc_card:

See Using WebRTC Card below for more details on how to embed AlexxIT's WebRTC Card with the Frigate Card.

Live Controls: Thumbnails

All configuration is under:

live:
  controls:
    thumbnails:

Live Controls: Next / Previous

All configuration is under:

live:
  controls:
    next_previous:

Live Controls: Title

All configuration is under:

live:
  controls:
    title:

Media Viewer Options

The media_viewer is used for viewing all clip, snapshot or recording media, in a media carousel.

All configuration is under:

media_viewer:

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

Media Viewer Controls: Next / Previous

All configuration is under:

media_viewer:
  controls:
    next_previous:

Media Viewer Controls: Thumbnails

All configuration is under:

media_viewer:
  controls:
    thumbnails:

Media Viewer Controls: Title

All configuration is under:

media_viewer:
  controls:
    title:

Event Gallery Options

The event_gallery is used for providing an overview of all clips and snapshots in a thumbnail gallery.

All configuration is under:

event_gallery:

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

Image Options

All configuration is under:

image:

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

Timeline Options

The timeline is used to show the timing sequence of events and recordings across cameras. You can interact with the timeline in a number of ways:

• Clicking on an event will take you to the media viewer for that event.
• Clicking on the "background", or a camera title, will take you to the recordings for that camera (seeking to the clicked time).
• Clicking on the time axis will take you to recordings for all cameras (seeking to the clicked time).

All configuration is under:

timeline:

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

Timeline Controls: Thumbnails

All configuration is under:

timeline:
  controls:
    thumbnails:

Dimensions Options

These options control the aspect-ratio of the entire card to make placement in Home Assistant dashboards more stable. Aspect ratio configuration applies once to the entire card (including the menu, thumbnails, etc), not just to displayed media.

All configuration is under:

dimensions:

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

dimensions.aspect_ratio_mode:

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.

Overrides Options

All configuration is a list under:

overrides:

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

Various parts of this configuration may conditionally (see Frigate Card Conditions) be overridden, for example to use custom WebRTC parameters for a particular camera or to hide the menu in fullscreen mode.

Not all configuration parameters are overriddable (only those with check marks in this documentation) -- some because it doesn't make sense for that parameter to vary, and many because of the extra complexity of supporting overriding given the lack of compelling usecases (please request new overridable parameters here!).

Each entry under the top-level overrides configuration block should be a list item, that has both of the following parameters set:

Media Layout

The live, media_viewer and image sections all support layout option which is used to control the fit and position of the media within the card dimensions (in order to control the card dimensions themselves see the dimensions parameter ).

As the default card behavior is for the card to always expand to fit the media, these options only make sense if dimensions.aspect_ratio_mode is set to static.

All configuration is under:

live:
  layout:
image:
  layout:
media_viewer:
  layout:

If multiple cameras are configured in the card, use overrides to configure different values per camera.

See media layout examples.

Using AlexxIT's WebRTC Card

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

Note: AlexxIT's WebRTC Integration/Card must be installed and configured separately (see details) before it can be used with this card.

Specifying The WebRTC Card Camera

The WebRTC Card live provider does not support use of Frigate-provided camera entities, as it requires an RTSP stream which Frigate does not currently provide. There are two ways to specify the WebRTC Card 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 camera, or can be manually specified with a webrtc_card.entity option under that particular cameras configuration:

cameras:
 - webrtc_card:
     entity: 'camera.front_door_rstp`

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

cameras:
 - webrtc_card:
     url: 'rtsp://USERNAME:PASSWORD@CAMERA:554/RTSP_PATH'

Other WebRTC Card options may be specified under the live section, like so:

live:
  webrtc_card:
    ui: true

See the WebRTC Card live configuration above, and the external WebRTC Card configuration documentation for full configuration options that can be used here.

Frigate Card Conditions

Conditions are used to apply certain configuration depending on runtime evaluations. Conditions may be used in elements configuration (as part of a custom:frigate-card-conditional element) or the overrides configuration (see below for both).

All variables listed are under a conditions: section.

See the example below for a real-world example of how these conditions can be used.

State Conditions

- conditions:
    state:
      - [entries]

The Frigate Card Condition can compare HA state against fixed string values. This is the same as the Home Assistant Conditional Element condition, but can be used outside of a Picture Element context (e.g. card configuration overrides).

If multiple entries are provided, the results are ANDed.

See the Menu override example below for an illustration.

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 interaction (see actions below). The configuration is fairly versatile and can be simple, or very complex depending on the desires of the user.

All configuration is under:

elements:

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

Note: The Frigate Card allows either a single action (as in stock Home Assistant) or list of actions to be defined for each class of user interaction (e.g. tap, double_tap, hold, etc). See an example of multiple actions.

Special Elements

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

Note: ℹ️ Manual positioning of custom menu icons or submenus via the style parameter is not supported as the menu buttons displayed are context sensitive so manual positioning by the user is not feasible.

custom:frigate-card-menu-submenu

Parameters for the custom:frigate-card-menu-submenu element are identical to the parameters of the stock Home Assistant Icon Element with the exception of these parameters which differ:

Submenu Items

See the Configuring a Submenu example.

custom:frigate-card-menu-submenu-select

This element allows you to easily convert a Home Assistant Select Entity or Home Assistant Input Select Entity (an entity either starting with select or input_select) into an overridable submenu. This could be done by hand using a regular submenu (above) -- this element is a convenience.

Parameters for the custom:frigate-card-menu-submenu-select element are identical to the parameters of the stock Home Assistant State Icon Element with the exception of these parameters which differ:

See the Configuring a Select Submenu example.

custom:frigate-card-conditional

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

custom:frigate-card-ptz

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

Special Actions

custom:frigate-card-action

Command descriptions

Views

This card supports several different views:

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

Actions

Introduction to Actions

Actions are pre-configured activities that can be triggered in response to a variety of circumstances (e.g. tapping on a menu icon, double tapping on a picture element or holding the mouse/tap down on a particular view).

Configuring Actions

The format for actions is the standard Home Assistant action format, with the exception of differences called out below.

Differences in actions between Frigate Card and Home Assistant

Both the Home Assistant frontend and the Frigate card cooperate to provide action functionality. In general, the Frigate Card functionality is a superset of that offered by stock Home Assistant.

Stock action functionality is used for Stock Home Assistant picture elements. Extended Frigate card behavior covers all other interactions on the Frigate card (e.g. menu icon elements, submenus and actions on the card or views).

Custom action types: start_tap and end_tap

The card has partial support for two special action types start_tap and end_tap which occur when a tap is started (e.g. mouse is pressed down / touch begins), and ended (e.g. mouse released / touch ends) respectively. This might be useful for PTZ cameras cameras to start/stop movement on touch. Network latency may introduce unavoidable imprecision between end_tap and action actually occurring.

Multiple actions

Extended Frigate card behavior supports a list of actions which will be handled, in addition to using a singular action. See an example of multiple actions below.

Card & View Actions

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

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

Note: The card itself relies on user 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). Efforts are taken to de-duplicate interactions (e.g. card-wide actions will not be activated through interaction with menu buttons, next/previous controls, thumbnails, etc), but in some cases this is not possible (e.g. embedded WebRTC card controls) -- in these cases duplicate actions may occur with certain configurations (e.g. tap).

Note: Card-wide actions are not supported on the timeline view, nor when a info/error message is being displayed.

Menu Styles

This card supports several menu styles.

Key	Description	Screenshot
hidden	Hide the menu by default, expandable upon clicking the Frigate button.
overlay	Overlay the menu over the card contents. The Frigate button shows the default view.
hover	Overlay the menu over the card contents when the mouse is over the menu, otherwise it is not shown. The Frigate button shows the default view.
outside	Render the menu outside the card (i.e. above it if position is top, or below it if position is bottom). The Frigate button shows the default view.
none	No menu is shown.

Screenshots

Live Viewing of Multiple Cameras

Scroll through your live cameras, or choose from a menu. Seamlessly supports cameras of different dimensions, and custom submenus per camera.

Full Viewing Of Events

Live Viewing With Thumbnail Carousel

Clip Viewing With Thumbnail Carousel

Hover Menu / Thumbnail Next & Previous Controls

Card Editing

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

Configurable Submenus

This card supports fully configurable submenus.

Select Entity Submenus

Automatically generate submenus from select entities.

Cast media from the card

Cast media from the card to a local player.

Scan Mode

Automatically choose the camera with the action!

Thumbnail Drawers

View thumbnails in side-drawers.

Event Timeline

View events in the timeline.

Single Camera Recordings

View recordings for a camera across time:

Multiple Camera Recordings

View recordings for multiple cameras at a given time:

Dark Mode

Dim the card when not used.

Card Casting

A dashboard with the card can be cast onto a suitable device (such as the Nest Hub shown below).

Event starring

Retain interesting Frigate events forever:

PTZ Control

Control a PTZ camera:

Media Layout

Pan around a large camera view to only show part of the video feed in the card at a different aspect ratio:

Before

After

Examples

Illustrative Expanded Configuration Reference

Caution: 🚩 Just copying this full reference into your configuration will cause you a significant maintenance burden. Don't do it! Please only specify what you need as defaults can / do change continually as this card develops. Almost all the values shown here are the defaults (except in cases where is no default, parameters are added here for illustrative purposes).

cameras:
  - camera_entity: camera.front_Door
    live_provider: ha
    frigate:
      url: http://my.frigate.local
      client_id: frigate
      camera_name: front_door
      label: person
      zone: steps
    # Show events for camera-2 when this camera is viewed.
    dependencies:
      all_cameras: false
      cameras:
        - camera-2
    triggers:
      motion: false
      occupancy: true
      entities:
        - binary_sensor.front_door_sensor
  - camera_entity: camera.entrance
    live_provider: webrtc-card
    frigate:
      url: http://my-other.frigate.local
      client_id: frigate-other
      camera_name: entrance
      label: car
      zone: driveway
    icon: 'mdi:car'
    title: 'Front entrance'
    # Custom identifier for the camera to refer to it above.
    id: 'camera-2'
    webrtc_card:
      entity: camera.entrance_rtsp
      url: 'rtsp://username:password@camera:554/av_stream/ch0'
    triggers:
      motion: false
      occupancy: true
      entities:
        - binary_sensor.entrance_sensor
    dependencies:
      all_cameras: false

view:
  default: live
  camera_select: current
  timeout_seconds: 300
  update_seconds: 0
  update_force: false
  update_cycle_camera: false
  update_entities:
    - binary_sensor.my_motion_sensor
  render_entities:
    - switch.render_card
  dark_mode: 'off'
  scan:
    enabled: false
    show_trigger_status: true
    untrigger_reset: true
    untrigger_seconds: 0
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none

menu:
  style: hidden
  position: top
  alignment: left
  buttons:
    frigate:
      priority: 50
      enabled: true
      alignment: matching
      # Default icon is an internal coded Frigate icon. Note
      # absence of 'mdi' here (mdi has no Frigate icon).
      icon: frigate
    cameras:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:video-switch
    live:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:cctv
    clips:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:filmstrip
    snapshots:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:camera
    image:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:image
    timeline:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:chart-gantt
    download:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:download
    frigate_ui:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:web
    fullscreen:
      priority: 50
      enabled: true
      alignment: matching
      icon: mdi:fullscreen
    media_player:
      priority: 50
      enabled: false
      alignment: matching
      icon: mdi:cast
  button_size: 40

live:
  auto_play: all
  auto_pause: never
  auto_mute: all
  auto_unmute: never
  preload: false
  lazy_load: true
  lazy_unload: never
  draggable: true
  transition_effect: slide
  webrtc_card:
    # Arbitrary WebRTC Card options, see https://github.com/AlexxIT/WebRTC#configuration .
    ui: true
  jsmpeg:
    options:
      audio: false
      video: true
      pauseWhenHidden: false
      disableGl: false
      disableWebAssembly: false
      preserveDrawingBuffer: false
      progressive: true
      throttled: true
      chunkSize: 1048576
      maxAudioLag: 10
      videoBufferSize: 524288
      audioBufferSize: 131072
  controls:
    next_previous:
      style: chevrons
      size: 48
    thumbnails:
      media: clips
      size: 100
      show_details: false
      show_favorite_control: true
      show_timeline_control: true
      mode: none
    title:
      mode: popup-bottom-right
      duration_seconds: 2
  layout:
    fit: contain
    position:
      x: 50
      y: 50
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none

media_viewer:
  auto_play: all
  auto_pause: all
  auto_mute: all
  auto_unmute: never
  lazy_load: true
  draggable: true
  transition_effect: slide
  controls:
    next_previous:
      size: 48
      style: thumbnails
    thumbnails:
      size: 100
      mode: none
      show_details: false
      show_favorite_control: true
      show_timeline_control: true
    title:
      mode: popup-bottom-right
      duration_seconds: 2
  layout:
    fit: contain
    position:
      x: 50
      y: 50
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none

event_gallery:
  controls:
    thumbnails:
      size: 100
      show_details: false
      show_favorite_control: true
      show_timeline_control: true
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none

image:
  mode: url
  refresh_seconds: 0
  layout:
    fit: contain
    position:
      x: 50
      y: 50
  actions:
    entity: light.office_main_lights
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    start_tap_action:
      action: none
    end_tap_action:
      action: none

elements:
  - type: state-badge
    entity: sensor.kitchen_dining_multisensor_air_temperature
    style:
      left: 100px
      top: 50px
    title: "Temperature"
  - type: state-icon
    entity: light.office_main_lights
    icon: mdi:lamp
    state_color: true
    style:
      left: 100px
      top: 100px
  - type: state-label
    entity: sensor.kitchen_motion_sensor_battery
    attribute: battery_voltage
    prefix: Volts
    title: Battery Voltage
    style:
      left: 100px
      top: 150px
  - type: state-label
    entity: sensor.kitchen_motion_sensor_battery
    attribute: battery_voltage
    prefix: 'Volts: '
    title: Battery Voltage
    style:
      background-color: black
      left: 100px
      top: 200px
  - type: service-button
    title: Light on
    service: homeassistant.turn_on
    service_data:
      entity: light.office_main_lights
    style:
      left: 100px
      top: 250px
  - type: icon
    icon: mdi:cow
    title: Moo
    style:
      left: 100px
      top: 300px
  - type: image
    entity: light.office_main_lights
    title: Image
    state_image:
      on: "https://picsum.photos/id/1003/1181/1772"
      off: "https://picsum.photos/id/102/4320/3240"
    state_filter:
      "on": brightness(110%) saturate(1.2)
      "off": brightness(50%) hue-rotate(45deg)
    style:
      left: 100px
      top: 350px
      height: 50px
      width: 100px
  - type: conditional
    conditions:
      - entity: light.office_main_lights
        state: on
        state_not: off
    elements:
    - type: icon
      icon: mdi:dog
      title: Woof
      style:
        left: 100px
        top: 400px

elements:
  - type: icon
    icon: mdi:numeric-1-box
    title: More info action
    style:
      left: 200px
      top: 50px
    entity: light.office_main_lights
    tap_action:
      action: more-info
  - type: icon
    icon: mdi:numeric-2-box
    title: Toggle action
    style:
      left: 200px
      top: 100px
    entity: light.office_main_lights
    tap_action:
      action: toggle
  - type: icon
    icon: mdi:numeric-3-box
    title: Call Service action
    style:
      left: 200px
      top: 150px
    tap_action:
      action: call-service
      service: homeassistant.toggle
      service_data:
        entity_id: light.office_main_lights
  - type: icon
    icon: mdi:numeric-4-box
    title: Navigate action
    style:
      left: 200px
      top: 200px
    tap_action:
      action: navigate
      navigation_path: /lovelace/2
  - type: icon
    icon: mdi:numeric-5-box
    title: URL action
    style:
      left: 200px
      top: 250px
    tap_action:
      action: url
      url_path: https://www.home-assistant.io/
  - type: icon
    icon: mdi:numeric-6-box
    title: None action
    style:
      left: 200px
      top: 300px
    tap_action:
      action: none
  - type: icon
    icon: mdi:numeric-7-box
    title: Custom action
    style:
      left: 200px
      top: 350px
    tap_action:
      action: fire-dom-event
      key: value

elements:
  - type: custom:frigate-card-menu-icon
    icon: mdi:car
    title: Vroom
  - type: custom:frigate-card-menu-state-icon
    entity: light.office_main_lights
    title: Office lights
    icon: mdi:chair-rolling
    state_color: true
  - type: custom:frigate-card-menu-submenu
    icon: mdi:menu
    items:
      - title: Lights
        icon: mdi:lightbulb
        entity: light.office_main_lights
        tap_action:
          action: toggle
      - title: Google
        icon: mdi:google
        enabled: false
        tap_action:
          action: url
          url_path: https://www.google.com
  - type: custom:frigate-card-menu-submenu-select
    icon: mdi:lamps
    entity: input_select.kitchen_scene
    options:
      scene.kitchen_cooking_scene:
        icon: mdi:chef-hat
        title: Cooking time!
      scene.kitchen_tv_scene:
        icon: mdi:television
        title: TV!
    # Show a pig icon if the card is in the live view, in fullscreen mode, light.office_main_lights is on and the media has been loaded.
  - type: custom:frigate-card-conditional
    elements:
      - type: icon
        icon: mdi:pig
        title: Oink
        style:
          left: 300px
          top: 100px
    conditions:
      view:
        - live
      fullscreen: true
      camera:
        - camera.front_door
      state:
        - entity: light.office_main_lights
          state: on
          state_not: off
      mediaLoaded: true
    # Full form PTZ actions (only left button shown).
  - type: custom:frigate-card-ptz
    orientation: vertical
    style:
      transform: none
      right: 5%
      top: 50%
    actions_left:
      tap_action:
        action: call-service
        service: sonoff.send_command
        service_data:
          device: '048123'
          cmd: left 
    # Equivalent short form PTZ actions (only left button shown)
  - type: custom:frigate-card-ptz
    orientation: vertical
    style:
      transform: none
      right: 20px
      top: 180px
    service: sonoff.send_command
    data_left:
      device: '048123'
      cmd: left

elements:
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-a-circle
    title: Show default view
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: default
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-b-circle
    title: Show most recent clip
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: clip
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-c-circle
    title: Show clips
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: clips
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-d-circle
    title: Show image view
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: image
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-e-circle
    title: Show live view
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: live
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-f-circle
    title: Show most recent snapshot
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: snapshot
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-g-circle
    title: Show snapshots
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: snapshots
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-h-circle
    title: Download media
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: download
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-i-circle
    title: Open Frigate UI
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: frigate_ui
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-j-circle
    title: Change to fullscreen
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-k-circle
    title: Toggle hidden menu
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: menu_toggle
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-l-circle
    title: Select Front Door
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: camera_select
      camera: camera.front_door
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-m-circle
    title: Media player play
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: media_player
      media_player: media_player.nesthub50be
      media_player_action: play
  - type: custom:frigate-card-menu-icon
    icon: mdi:alpha-n-circle
    title: Media player stop
    tap_action:
      action: custom:frigate-card-action
      frigate_card_action: media_player
      media_player: media_player.nesthub
      media_player_action: stop

dimensions:
  aspect_ratio_mode: dynamic
  aspect_ratio: 16:9

timeline:
  clustering_threshold: 3
  media: all
  show_recordings: true
  window_seconds: 3600
  controls:
    thumbnails:
      mode: left
      size: 100
      show_details: true
      show_favorite_control: true
      show_timeline_control: true

overrides:
  - conditions:
      view:
        - live
      fullscreen: true
      camera:
        - camera.front_door
      state:
        - entity: light.office_main_lights
          state: on
          state_not: off
    overrides:
      live:
        webrtc_card:
          ui: true
        jsmpeg:
          options:
            audio: false
            video: true
            pauseWhenHidden: false
            disableGl: false
            disableWebAssembly: false
            preserveDrawingBuffer: false
            progressive: true
            throttled: true
            chunkSize: 1048576
            maxAudioLag: 10
            videoBufferSize: 524288
            audioBufferSize: 131072
        controls:
          next_previous:
            style: chevrons
            size: 48
          thumbnails:
            media: clips
            size: 100
            show_details: false
            show_favorite_control: true
            show_timeline_control: true
            mode: none
          title:
            mode: popup-bottom-right
            duration_seconds: 2
        actions:
          entity: light.office_main_lights
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
          start_tap_action:
            action: none
          end_tap_action:
            action: none
      menu:
        style: hidden
        position: top
        alignment: left
        buttons:
          frigate:
            priority: 50
            enabled: true
            alignment: matching
            # Default icon is an internal coded Frigate icon. Note
            # absence of 'mdi' here (mdi has no Frigate icon).
            icon: frigate
          cameras:
            priority: 50
            enabled: true
            alignment: matching
            icon: mdi:video-switch
          live:
            priority: 50
            enabled: true
            alignment: matching
            icon: mdi:cctv
          clips:
            priority: 50
            enabled: true
            alignment: matching
            icon: mdi:filmstrip
          snapshots:
            priority: 50
            enabled: true
            alignment: matching
            icon: mdi:camera
          image:
            priority: 50
            # Disable the image button.
            enabled: false
            alignment: matching
            icon: mdi:image
          timeline:
            # Ensure the timeline button is ordered earlier.
            priority: 100
            enabled: true
            alignment: matching
            icon: mdi:chart-gantt
          download:
            priority: 50
            enabled: true
            alignment: matching
            icon: mdi:download
          frigate_ui:
            priority: 50
            enabled: true
            alignment: matching
            icon: mdi:web
          fullscreen:
            priority: 50
            enabled: true
            alignment: matching
            icon: mdi:fullscreen
          media_player:
            priority: 50
            enabled: false
            alignment: matching
            icon: mdi:cast
        button_size: 40
      image:
        mode: url
        refresh_seconds: 0
        actions:
          entity: light.office_main_lights
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
          start_tap_action:
            action: none
          end_tap_action:
            action: none
      view:
        default: live
        camera_select: current
        timeout_seconds: 300
        update_seconds: 0
        update_force: false
        update_cycle_camera: false
        update_entities:
          - binary_sensor.my_motion_sensor
        render_entities:
          - switch.render_card
        dark_mode: 'off'
        actions:
          entity: light.office_main_lights
          tap_action:
            action: none
          hold_action:
            action: toggle
          double_tap_action:
            action: none
          start_tap_action:
            action: none
          end_tap_action:
            action: none

Basic cameras configuration

type: custom:frigate-card
cameras:
  - camera_entity: camera.sitting_room
  - camera_entity: camera.front_door

type: custom:frigate-card
cameras:
  - camera_entity: camera.front_door
    live_provider: frigate-jsmpeg
    title: Front Door (JSMPEG)
  - camera_entity: camera.front_door
    live_provider: webrtc-card
    title: Front Door (WebRTC)
    webrtc_card:
      entity: camera.front_door_rtsp
    id: front-door-webrtc

WebRTC Card Provider

type: custom:frigate-card
cameras:
  - camera_entity: camera.front_door
    live_provider: webrtc-card
    title: Front Door
    webrtc_card:
      entity: camera.front_door_rtsp
live:
  webrtc_card:
    ui: true

Static Aspect Ratios

You can set a static aspect ratio.

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

Adding Menu Icons

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

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

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

Adding State Badges

You can add 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.

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

[...]
elements:
  - type: custom:frigate-card-conditional
    conditions:
      view:
        - live
    elements:
      - type: icon
        icon: mdi:car
        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

Triggering Card Actions

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

[...]
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, hold, start_tap or end_tap. See actions above.

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

Configuring a submenu

You can add submenus to the menu -- buttons that when pressed reveal a dropdown submenu of configurable options.

[...]
elements:
  - type: custom:frigate-card-menu-submenu
    icon: mdi:menu
    items:
      - title: Lights
        icon: mdi:lightbulb
        entity: light.office_main_lights
        tap_action:
          action: toggle
      - title: Google
        icon: mdi:google
        tap_action:
          action: url
          url_path: https://www.google.com
      - title: Fullscreen
        icon: mdi:fullscreen
        tap_action:
          action: custom:frigate-card-action
          frigate_card_action: fullscreen

[...]
elements:
  - type: custom:frigate-card-conditional
    conditions:
      camera:
        - camera.front_door
    elements:
      - type: custom:frigate-card-menu-submenu
        icon: mdi:door
        items:
          - title: Front Door Lights
            icon: mdi:lightbulb
            entity: light.front_door_lights
            tap_action:
              action: toggle
  - type: custom:frigate-card-conditional
    conditions:
      camera:
        - camera.living_room
    elements:
      - type: custom:frigate-card-menu-submenu
        icon: mdi:sofa
        items:
          - title: Living Room Lights
            icon: mdi:lightbulb
            entity: light.living_room_lights
            tap_action:
              action: toggle
          - title: Living Room Lamp
            icon: mdi:lightbulb
            entity: light.living_room_lamp
            tap_action:
              action: toggle

Configuring a select submenu

You can easily add a submenu to the menu based on a select or input_select entity.

input_select:
  kitchen_scene:
    name: Kitchen Scene Select
    options:
      - scene.kitchen_cooking_scene
      - scene.kitchen_tv_scene
    icon: mdi:lightbulb

[...]
elements:
  - type: custom:frigate-card-menu-submenu-select
    entity: input_select.kitchen_scene

[...]
elements:
  - type: custom:frigate-card-menu-submenu-select
    icon: mdi:lamps
    entity: input_select.kitchen_scene
    options:
      scene.kitchen_cooking_scene:
        icon: mdi:chef-hat
        title: Cooking time!
      scene.kitchen_tv_scene:
        icon: mdi:television
        title: TV!

Overriding card behavior

You can override card configuration when certain conditions are met.

view:
  actions:
    double_tap_action:
      action: custom:frigate-card-action
      frigate_card_action: fullscreen
overrides:
  - conditions:
      fullscreen: true
    overrides:
      menu:
        style: none

cameras:
 - camera_entity: camera.office
   live_provider: webrtc-card
 - camera_entity: camera.a-different-camera
[...]
overrides:
  - conditions:
      camera:
        - camera.office
    overrides:
      live:
        webrtc_card:
          ui: true

overrides:
  - conditions:
      state:
        - entity: light.office_lights
          state: 'on'
    overrides:
      menu:
        position: bottom

view:
  default: live
  update_entities:
    - binary_sensor.alarm_armed
overrides:
  - conditions:
      state:
        - entity: binary_sensor.alarm_armed
          state: 'off'
    overrides:
      view:
        default: image

Refreshing a static image

[...]
view:
  default: image
image:
  src: https://my-friage-server/api/living_room/latest.jpg
  refresh_seconds: 10

Defining multiple actions for Elements

[...]
elements:
  - type: custom:frigate-card-menu-icon
    icon: mdi:chair-rolling
    tap_action:
      - action: custom:frigate-card-action
        frigate_card_action: camera_select
        camera: camera.office
      - action: custom:frigate-card-action
        frigate_card_action: live

Using a PTZ picture element

The card supports a custom PTZ element (custom:frigate-card-ptz) to conveniently control pan, tilt and zoom for cameras.

[...]
elements:
  - type: custom:frigate-card-conditional
    conditions:
      mediaLoaded: true
      view:
        - live
        - image
    elements:
      - type: custom:frigate-card-ptz
        orientation: horizontal
        style:
          transform: none
          right: 20px
          top: 180px
        service: sonoff.send_command
        data_left:
          device: '048123'
          cmd: left
        data_right:
          device: '048123'
          cmd: right
        data_up:
          device: '048123'
          cmd: up
        data_down:
          device: '048123'
          cmd: down

Using card-mod to style the card

This card allows the use of card-mod to style arbitrary card contents. card-mod can be complex to use and relies on the underlying internal DOM structure to style elements -- as such, while its use is possible it's not officially supported and no attempt is made to preserve backwards compatability of the internal DOM between any versions. It'll look good, but you're on your own!

[...]
card_mod:
  style:
    frigate-card-elements $:
      hui-state-label-element $: |
        div {
          padding: 0px !important;
          color: blue;
        }

Overriding default menu behavior

[...]
menu:
  alignment: right
  buttons:
    image:
      enabled: true
      priority: 100
    fullscreen:
      alignment: opposing

Using a dependent camera

dependencies.cameras allows events for other cameras to be shown along with the currently selected camera. For example, this can be used to show events with the birdseye camera (since it will not have events of its own).

[...]
cameras:
  - camera_entity: camera.kitchen
  - camera_entity: camera.sitting_room
  - camera_name: birdseye
    dependencies:
      cameras:
        - camera.kitchen
        - camera.sitting_room

[...]
cameras:
  - camera_entity: camera.kitchen
  - camera_entity: camera.sitting_room
  - frigate:
      camera_name: birdseye
    dependencies:
      all_cameras: true

Using Scan Mode

Have your card follow the action with Scan Mode.

type: custom:frigate-card
cameras:
  - camera_entity: camera.back_yard
    # This camera will automatically trigger by occupancy.
  - camera_entity: camera.front_door
    triggers:
      occupancy: false
      motion: true
      entities:
        - binary_sensor.door_opened
view:
  scan:
    enabled: true
    trigger_show_border: true

Changing the Media Layout

Change how the media fits and is positioned within the card dimensions.

type: custom:frigate-card
cameras:
  - camera_entity: camera.landing
view:
  default: image
dimensions:
  aspect_ratio_mode: static
  aspect_ratio: '4:4'
image:
  layout:
    fit: fill

type: custom:frigate-card
cameras:
  - camera_entity: camera.landing
dimensions:
  aspect_ratio_mode: static
  aspect_ratio: '9:16'
live:
  layout:
    fit: cover
    position:
      x: 0

type: custom:frigate-card
cameras:
  - camera_entity: camera.landing
  - camera_entity: camera.living_room
  - camera_entity: camera.sitting_room
overrides:
  - conditions:
      camera:
        - camera.living_room
        - camera.sitting_room
    overrides:
      dimensions:
        aspect_ratio_mode: static
        aspect_ratio: '9:16'
      live:
        layout:
          fit: cover
  - conditions:
      camera:
        - camera.living_room
    overrides:
      live:
        layout:
          position:
            x: 0
  - conditions:
      camera:
        - camera.sitting_room
    overrides:
      live:
        layout:
          position:
            x: 100

Card Refreshes

Four sets of flags govern when the card will automatically refresh in the absence of user interaction.

The following table describes the behavior these flags have.

Card Update Truth Table

Note that no (other) automated updates are permitted when scan mode is being triggered.

In the below "Trigger Entities" refers to the combination of view.update_entities and the triggers.entities for the currently selected camera (which in turn will also include the occupancy and motion sensor entities for Frigate cameras if triggers.occupancy and triggers.motion options are enabled, see Trigger Configuration).

Usecases For Automated Refreshes

• Refreshing the live thumbnails every 30 seconds.

view:
  default: live
  update_seconds: 30

• Using clip or snapshot as the default view (for the most recent clip or snapshot respectively) and having the card automatically refresh (to fetch a newer clip/snapshot) on motion.

cameras:
  - entity: camera.office
    triggers:
      motion: true

• Cycle the live view of the camera every 60 seconds

view:
  update_cycle_camera: true
  update_seconds: 60

• Return to the most recent clip of the default camera 30 seconds after user interaction with the card stops.

view:
  default: clip
  timeout_seconds: 30

Casting the Card

This card can be (Chrome) casted to a device (such as a Nest Hub) through the use of Home Assistant Cast.

Instructions to Cast

• Visit Home Assistant Cast and click Start Casting
• Enter your Home Assistant URL, and authorize your account.
• Click Start Casting and choose the device to cast to from the browser menu.
• Choose which view/dashboard to display.
• If successful, the view will be cast to the device.

Limitations

Casting Home Assistant dashboards comes with a number of caveats:

• Home Assistant Casting does not support the HA streaming component (source). This means clips playing and the ha live provider can not work. Other live providers such as jsmpeg and webrtc-card function correctly.
• The Javascript fullscreen API does not work (so the fullscreen button does not work, but see below for an equivalent).

Recommended configuration for a Nest Hub

Using a panel dashboard with the following base configuration will result in the card consuming the entire device screen:

type: custom:frigate-card
cameras:
  - camera_entity: camera.front_door
    live_provider: frigate-jsmpeg
dimensions:
  aspect_ratio: 1024:600
  aspect_ratio_mode: static

See screenshot above.

Troubleshooting

v4 doesn't show recordings / clips

You must be using a version of the Frigate integration >= 3.0.0-rc.2 to see recordings. Using an older version of the integration may also show blank thumbnails in the events viewer. Please upgrade your integration accordingly.

Chrome autoplays when a tab becomes visible again

Even if live.auto_play or media_viewer.auto_play is set to never, Chrome itself will still auto play a video that was previously playing prior to the tab being hidden, once that tab is visible again. This behavior cannot be influenced by the card. Other browsers (e.g. Firefox, Safari) do not exhibit this behavior.

The live view just shows a blank white image during loading

For some slowly loading cameras, for which Home Assistant stream preloading is not enabled, Home Assistant may return a blank white image when asked for a still. These stills are used during initial Frigate card load of the live view if the live.show_image_during_load option is enabled. Disabling this option should show the default media loading controls (e.g. a spinner or empty video player) instead of the blank white image.

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.

Timeline shows error message

If the timeline shows a message such as Failed to receive response from Home Assistant for request. make sure you are running a version of the Frigate integration >= 3.0.0-rc.1.

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.

Android Will Not Render >4 JSMPEG Live Views

Android Webview (as used by Android Chrome / Android Home Assistant Companion) appears to severely limit the number of simultaneous OpenGL contexts that can be opened. The JSMPEG player (that this card uses), consumes 1 OpenGL context per rendering.

This limitation may be worked around (at a performance penalty) by disabling OpenGL for JSMPEG live views:

live:
  jsmpeg:
    options:
      disableGl: true

This bug has some more discussion on this topic. New ideas to address this underlying limitation most welcome!

Carousels with video players cannot be dragged in Firefox

The Firefox video player swallows mouse interactions, so dragging is not possible in carousels that use the Firefox video player (e.g. clips carousel, or live views that use the frigate or webrtc-card provider). The next and previous buttons may be used to navigate in these instances.

Dragging works as expected for snapshots, or for the frigate-jsmpeg provider.

Progress bar cannot be dragged in Safari

Dragging the Safari video controls "progress bar" conflicts with carousel "dragging", meaning the video controls progress bar cannot be moved left or right. Turning off carousel dragging (and using next/previous controls) will return full video controls in Safari:

live:
  draggable: false
media_viewer:
  draggable: false

webrtc_card unloads in the background

AlexxIT's WebRTC Card which is embedded by the webrtc_card live provider internally disconnects the stream when the browser tab is changed (regardless of any Frigate card configuration settings, e.g. lazy_unload). To allow the stream to continue running in the background, pass the background argument to the webrtc_card live provider as shown below. This effectively allows the Frigate card to decide whether or not to unload the stream.

live:
  webrtc_card:
    background: true

double_tap does not work for card-wide actions on Android

The Android video player swallows double_tap interactions in order to rewind or fast-forward. Workarounds:

• Use hold instead of double_tap for your card-wide action.
• Use a Frigate Card Element or menu icon to trigger the action instead.

Home Assistant iOS App not updating after card version change

Try resetting the app frontend cache:

• Configuration -> Companion App -> Debugging -> Reset frontend cache

Casting to a remote media player does not work

This could be for any number of reasons. Chromecast devices can be quite picky on network, DNS and certificate issues, as well as audio and video codecs. Check your Home Assistant log as there may be more information in there.

NOTE: In particular, for Frigate to support casting of clips, the default ffmpeg settings for Frigate must be modified, i.e. Frigate does not encode clips in a Chromecast compatible format out of the box (specifically: audio must be enabled in the AAC codec, whether your camera supports audio or not). See the Frigate Home Assistant documentation or this issue for more.

Javascript console shows [Violation] Added non-passive event listener to a scroll-blocking [...] event

This card heavily uses Embla Carousel -- a light-weight performant carousel library -- to show media. This carousel library uses non-passive event-listeners in a considered and performant way, but one that still causes occasional and unhelpful Chrome warnings. These warnings can be safely ignored in this instance, and cannot easily be fixed in the underlying library as it heavily relies on non-passive event listeners (see this bug comment for explanation).

Development

Building

$ git clone https://github.com/dermotduffy/frigate-hass-card
$ cd frigate-hass-card
$ yarn install
$ yarn run build

Resultant build will be at dist/frigate-hass-card.js. This could be installed via the manual installation instructions above.

Dev Container

You can use the VS Code Remote - Containers extension to speed up the development environment creation. Simply:

1. Clone the repository to your machine
2. Open VS Code on it
3. Reopen the folder in the Dev Container
4. Once done, press F5 to start debugging

Everything should just work without any additional configuration. Under the hood, the dev container setup takes care of bringing up:

• Home Assistant (port 48123:8123)
• Frigate (ports 45000:5000, 41935:1935)
• MQTT (port 41883:1883)

As docker-compose containers.

• The Frigate Home Assistant Integration is registered as a git submodule at .devcontainer/frigate-hass-integration, and VS Code will initialize/clone it for you before opening the dev container.

Some environment variables are supported in a .env file:

• FRIGATE_VERSION: The version of Frigate to use. Defaults to the latest stable version.
• HA_VERSION: The version of Home Assistant to use. Defaults to the latest stable version.

NOTE: When not specifying any version, it's recommended that you docker-compose pull the stack from time to time to ensure you have the latest versions of the images.

The Home Assistant container will get preconfigured during first initialization, therefore, if you changed the Home Assistant configuration, you will need to remove the HA container and start another.

Releasing

1. Merge a PR that contains only a package.json and const.ts version number bump (see this example).
2. Go to the releases page.
3. A release draft will automatically have been created, click 'Edit'.
4. Use the same version number for the release title and tag.
5. Choose 'This is a pre-release' for a beta version.
6. Hit 'Publish release'.