[](https://github.com/dermotduffy/frigate-hass-card/releases) [](https://github.com/dermotduffy/frigate-hass-card/actions/workflows/build.yaml) [](LICENSE) [](https://hacs.xyz) # 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. * Motion sensor access. * Full Lovelace editing support. * Theme friendly. * **Advanced**: Support for [WebRTC](https://github.com/AlexxIT/WebRTC) live viewing. ## Installation * Add the custom repository: ``` Home Assistant > HACS > Integrations > [...] > Custom Repositories ``` | Key | Value | | -------------- | --------------------------------------------- | | Repository URL | https://github.com/dermotduffy/frigate-hass-card | | Category | Lovelace / Plugin | * Use [HACS](https://hacs.xyz/) to install the card: ``` Home Assistant > HACS > Integrations > "Explore & Add Integrations" > Frigate Card ``` * Add the following to `configuration.yaml`: ```yaml lovelace: resources: - url: /hacsfiles/frigate-hass-card/frigate-hass-card.js type: module ``` * Restart Home Assistant. * Add the new card to the Lovelace configuration! ## Options ### Required | Option | Default | Description | | ------------- | - | --------------------------------------------- | | `camera_entity` | | The Frigate camera entity to show by default on the card.| | `frigate_url` | | The URL of the frigate server. Must be manually specified, as the URL from the underlying device is not available to Lovelace cards.| ### Optional | Option | Default | Description | | ------------- | --------------------------------------------- | - | | `motion_entity` | | A binary sensor to show in the menu (e.g. a Frigate motion binary sensor) and to use to trigger card updates.| | `frigate_camera_name` | The string after the "camera." in the `camera_entity` option (above). | This parameter allows the camera name heuristic to be overriden for cases where the entity name does not cleanly map to the Frigate camera name.| | `view_default` | `live` | The view to show by default. See [views](#views) below.| | `menu_mode` | `hidden` | The menu mode to show by default. See [menu modes](#menu-modes) below.| | `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.| | `autoplay_clip` | `false` | Whether or not to autoplay clips in the 'clip' [view](#views). Clips manually chosen in the clips gallery will still autoplay.| ### Advanced | 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'.| ### WebRTC Options WebRTC support allows the use of the ultra-realtime [WebRTC live view](https://github.com/AlexxIT/WebRTC) along with the event browsing of Frigate. A perfect combination! Note: WebRTC must be installed and configured separately (see [details](https://github.com/AlexxIT/WebRTC)). | Option | Default | Description | | ------------- | - | -------------------------------------------- | | `live_provider` | | Whether `frigate` or `webrtc` should provide the live camera view.| | `webrtc.entity` | | The RTSP entity to use with WebRTC.| | `webrtc.*`| | Any other options in a `webrtc:` YAML dictionary are silently passed through to WebRTC. See [WebRTC Configuration](https://github.com/AlexxIT/WebRTC#configuration) for full details this external card provides.| ## Views This card supports several different views. | Key | Description | | ------------- | --------------------------------------------- | |`live` (default)| Shows the live camera view, either the name Frigate view or [WebRTC](#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.| ### Automatic updates in the `clip` or `snapshot` view Updates will occur whenever the state of the `camera_entity` or `motion_entity` changes. In particular, if the desire is to have a live view of the most recent event, the user should configure `motion_entity` to a Frigate binary sensor associated with that camera in order to trigger updates more regularly (the underlying camera entity state does not change often, the motion binary sensors do). ### Getting from a snapshot to a clip Clicking on a snapshot will take the user to the clip associated with the snapshot (if any). ### Getting event details 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. ## Menu Modes This card supports several menu configurations. | Key | Description | Screenshot | | ------------- | --------------------------------------------- | - | |`hidden` (default)| Hide the menu by default, expandable upon clicking the 'F' button. | | |`overlay`| Overlay the menu on top of the card contents. 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. | | ### Example YAML Configuration A configuration that uses WebRTC for live: ```yaml - type: 'custom:frigate-card' camera_entity: camera.front_door frigate_url: http://frigate motion_entity: binary_sensor.front_door_person_motion live_provider: webrtc webrtc: entity: camera.front_door_rtsp ``` A configuration that shows the latest clip on load, but does not automatically play it: ```yaml - type: 'custom:frigate-card' camera_entity: camera.front_door frigate_url: http://frigate motion_entity: binary_sensor.front_door_person_motion view_default: clip ``` ### 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.