{"id":13582929,"url":"https://github.com/custom-cards/surveillance-card","last_synced_at":"2025-04-07T14:12:55.544Z","repository":{"id":33301249,"uuid":"147764937","full_name":"custom-cards/surveillance-card","owner":"custom-cards","description":"A custom component for displaying camera feeds in the style of a surveillance system.","archived":false,"fork":false,"pushed_at":"2023-05-15T22:13:17.000Z","size":252,"stargazers_count":256,"open_issues_count":22,"forks_count":38,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-31T12:07:55.994Z","etag":null,"topics":["camera","home-assistant","motion","security"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/custom-cards.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-07T03:21:51.000Z","updated_at":"2025-03-20T04:30:46.000Z","dependencies_parsed_at":"2024-09-29T06:19:15.705Z","dependency_job_id":null,"html_url":"https://github.com/custom-cards/surveillance-card","commit_stats":{"total_commits":17,"total_committers":8,"mean_commits":2.125,"dds":"0.47058823529411764","last_synced_commit":"4f9ead3d9b28897c79d95095a4d488a0f476a9f8"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/custom-cards%2Fsurveillance-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/custom-cards%2Fsurveillance-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/custom-cards%2Fsurveillance-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/custom-cards%2Fsurveillance-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/custom-cards","download_url":"https://codeload.github.com/custom-cards/surveillance-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247666014,"owners_count":20975788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["camera","home-assistant","motion","security"],"created_at":"2024-08-01T15:03:08.126Z","updated_at":"2025-04-07T14:12:55.519Z","avatar_url":"https://github.com/custom-cards.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Surveillance Card\n\nSurveillance Card is a 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.\n\n![GitHub release (latest by date)](https://img.shields.io/github/v/release/custom-cards/surveillance-card?color=green\u0026display_name=tag\u0026style=for-the-badge)\n![Apache 2.0](https://img.shields.io/github/license/custom-cards/surveillance-card?color=blue\u0026style=for-the-badge)\n![hacs_badge](https://img.shields.io/badge/HACS-Default-blue.svg?style=for-the-badge)\n\n![Screenshot](/surveillancecard.png)\n\n---\n\n## Configuration Parameters\n\n| Name | Type | Description | Default\n| ---- | ---- | ----------- | -------\n| type | string | `custom:surveillance-card` | **Required**\n| cameras | list | _See camera section below_ | **Required**\n| thumb_interval | number | Update interval for thumbnails in seconds (_min_ 0.5) | 10\n| update_interval | number | Update interval for main image in seconds (_min_ 0.5) | 1\n| show_capture_buttons | boolean | Show screenshot and record buttons | true\n| recording_duration | number | Number of seconds to record after clicking record button (_min_ 0.5) | 10\n| focus_motion | boolean | Switch to camera when motion detected | true\n| camera_view | string | “live” will show the live view if  the `stream` integration is enabled. | \"\"\n| thumb_position | string | Position of the thumbnails (left, right, top, bottom, none) | left\n\n### Camera Parameters\n\nEach entry in the camera list takes the following options\n\n| Name | Type | Description | Default\n| ---- | ---- | ----------- | -------\n| entity | string or array | Camera entity_id | **Required**\n| motion_entity | string | entity_id of a binary sensor to use for motion detection (_uses state=='on' as motion detected_) | none\n\n---\n\n## Install Using HACS\n\n### Simple Install (Requires Core 2022.8 or newer)\n\n[![Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.](https://img.shields.io/badge/HACS-Install-blue?style=for-the-badge)](https://my.home-assistant.io/redirect/hacs_repository/?owner=custom-cards\u0026repository=custom-cards%2Fsurveillance-card)\n\n### Manually Install through HACS\n\n1. Make sure you have the latest version of HACS installed. [HACS install guide](https://hacs.xyz/docs/setup/prerequisites)\n2. Log in as an Admin and go to HACS \u003e Frontend \u003e Explore and Download Repositories \u003e Search for \"surveillance-card\" and select it from the list\n3. Click download on the bottom right\n4. Reload your browser when prompted\n\n### Add Card To Dashboard\n\n\u003e **Note** For the page you create, make sure to set the View Type to \"Panel (1 card)\"\n\n1. Create a new dashboard or select the dashboard you wish to use (must be a UI configured dashboard, use 3b for YAML)\n2. Click the menu button (top right 3 dots) and select edit\n3. Add a \"Manual Card\" to your screen\n4. Fill out options like the example below\n\n```yaml\ntype: custom:surveillance-card\nthumb_interval: 15\nupdate_interval: 2\nrecording_duration: 10\nshow_capture_buttons: true\ncamera_view: \"\"\ncameras:\n  - entity: camera.front_porch\n    motion_entity: binary_sensor.front_porch_motion\n  - entity: camera.back_yard\n    motion_entity: binary_sensor.back_yard_motion\n```\n\n---\n\n## Saving Snapshots from Cameras\n\nClicking on the _camera button_ will save a single snapshot from that camera.\n\nClicking the _record button_ will grab as many images as it can (based on the update intervals) for the set `recording_duration`\n\nNote: This functionality is not available in native app versions (iOS \u0026 Android) and depends on the browser/device's ability to download image files.\n\n## Motion entities\n\nCameras can automatically be set to foccussed when motion is detected from the associated motion entities.\n\n`motion_entity` can either be a single entity ID or a list of multiple entity IDs.\n\nNote: The entities don't necessarily need to be motion sensors, they just need to be a binary sensor that is triggered when in the \"on\" state. E.g. a door sensor could also be used.\n\n```yaml\nviews:\n  - title: Surveillance\n    icon: mdi:cctv\n    cards:\n      - type: custom:surveillance-card\n        cameras:\n          - entity: camera.front_porch\n            motion_entity: binary_sensor.front_porch_motion\n          - entity: camera.back_yard\n            motion_entity:\n            - binary_sensor.back_yard_motion\n            - binary_sensor.back_yard_gate\n\n```\n\n## Thanks\n\nThanks to all the people who have contributed!\n\n[![contributors](https://contributors-img.web.app/image?repo=custom-cards/surveillance-card)](https://github.com/custom-cards/surveillance-card/graphs/contributors)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcustom-cards%2Fsurveillance-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcustom-cards%2Fsurveillance-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcustom-cards%2Fsurveillance-card/lists"}