Skip to content
master
Switch branches/tags
Code

Custom component for lovelace to be used as a panel for viewing security cameras. It shows all of the cameras on the left, and shows a big one with motion on the right. Screenshot

Note: When including this file in your ui-lovelace.yaml you must use type: module

Config

Name Type Description Default
type string custom:surveillance-card Required
cameras list See camera section below Required
thumb_interval number Update interval for thumbnails in seconds (min 0.5) 10
update_interval number Update interval for main image in seconds (min 0.5) 1
show_capture_buttons boolean Show screenshot and record buttons true
recording_duration number Number of seconds to record after clicking record button (min 0.5) 10
focus_motion boolean Switch to camera when motion detected true
camera_view string “live” will show the live view if the stream integration is enabled. ""

Camera configuration

Each entry in the camera list takes the following options

Name Type Description Default
entity string Camera entity_id Required
motion_entity string entity_id of a binary sensor to use for motion detection (uses state=='on' as motion detected) none

Installation

Step 1

Install surveillance-card by copying surveillance-card.js, record.svg, and snapshot.svg from this repo to <config directory>/www/surveillance-card/ on your Home Assistant instance.

Example:

mkdir <config directory>/www/surveillance-card/
cd <config directory>/www/surveillance-card/

wget https://raw.githubusercontent.com/custom-cards/surveillance-card/master/surveillance-card.js
wget https://raw.githubusercontent.com/custom-cards/surveillance-card/master/record.svg
wget https://raw.githubusercontent.com/custom-cards/surveillance-card/master/snapshot.svg

Step 2

Link surveillance-card inside you ui-lovelace.yaml.

resources:
  - url: /local/surveillance-card.js?v=0
    type: module

Step 3

Add as custom card of a panel view in your ui-lovelace.yaml using type: custom:surveillance-card

Example

views:
  - title: Surveillance
    icon: mdi:cctv
    panel: true
    cards:
      - type: custom:surveillance-card
        thumb_interval: 15
        update_interval: 2
        recording_duration: 10
        show_capture_buttons: true
        cameras:
          - entity: camera.front_porch
            motion_entity: binary_sensor.front_porch_motion
          - entity: camera.back_yard
            motion_entity: binary_sensor.back_yard_motion
          - entity: camera.driveway

Saving Snapshots from Cameras

Clicking on the camera button will save a single snapshot from that camera.

Clicking the record button will grab as many images as it can (based on the update intervals) for the set recording_duration

Note: This functionality is not available in native app versions (iOS & Android) and depends on the browser/device's ability to download image files.

Thanks

Thanks to all the people who have contributed!

contributors

About

A custom component for displaying camera feeds in the style of a surveillance system.

Resources

License

Stars

Watchers

Forks

Packages

No packages published