Better Camera Cards With HomeAssistant

- 3 minutes read - 442 words

So around my apartment I have several Amcrest IP2M 841B cameras for keeping an eye on the puppy while I’m at work. One thing that is very useful is being able to keep an eye on all of the streams at the same time, which is one of the places HomeAssistant has really shined for me. But with the default Lovelace card there is no way to control the PTZ functionality of the cameras so they’re pretty much fixed in position unless you want to fish out a different app to control them.

Luckily, the HomeAssistant documentation for Amcrest provides an example card configuration which breaks out the PTZ functionality into a series of buttons in a Picture Elements card. Great, but unfortunately with only 3 cameras running I had a constant 2MBps stream coming in from them if I had the camera_view mode set to live and their implementation disabled the handy popout live feed that the default card has. So I set to work trying to get the best of all worlds and settled upon the following. It manages to combine the two binary status indicators for online and motion detection as well as keeping both PTZ and popout live feed. All of that with a much more sedate flow of 500kbps with all of the cameras open!

This configuration assumes that you’re doing custom UI configuration for Lovelace and that you have a camera already configured at camera.webcam to hook up to. Here’s what the finished product looks like.

HomeAssistant Camera Card

Finally, here’s the configuration to get there. Good luck!

type: picture-elements
camera_image: camera.webcam
camera_view: auto
elements:
  - type: image
    camera_image: camera.webcam
    camera_view: auto
    style:
      top: 50%
      left: 50%
      height: 100%
      width: 100%
    tap_action:
      action: more-info
  - type: state-icon
    entity: binary_sensor.webcam_online
    style:
      left: 25px
      bottom: 0px
  - type: state-icon
    entity: binary_sensor.webcam_motion_detected
    style:
      left: 50px
      bottom: 0px
  - type: icon
    icon: 'mdi:arrow-up'
    style:
      background: 'rgba(255, 255, 255, 0.25)'
      right: 25px
      bottom: 50px
    tap_action:
      action: call-service
      service: amcrest.ptz_control
      service_data:
        entity_id: camera.webcam
        movement: up
  - type: icon
    icon: 'mdi:arrow-down'
    style:
      background: 'rgba(255, 255, 255, 0.25)'
      right: 25px
      bottom: 0px
    tap_action:
      action: call-service
      service: amcrest.ptz_control
      service_data:
        entity_id: camera.webcam
        movement: down
  - type: icon
    icon: 'mdi:arrow-left'
    style:
      background: 'rgba(255, 255, 255, 0.25)'
      right: 50px
      bottom: 25px
    tap_action:
      action: call-service
      service: amcrest.ptz_control
      service_data:
        entity_id: camera.webcam
        movement: left
  - type: icon
    icon: 'mdi:arrow-right'
    style:
      background: 'rgba(255, 255, 255, 0.25)'
      right: 0px
      bottom: 25px
    tap_action:
      action: call-service
      service: amcrest.ptz_control
      service_data:
        entity_id: camera.webcam
        movement: right
  - type: icon
    icon: 'mdi:magnify'
    style:
      background: 'rgba(255, 255, 255, 0.25)'
      right: 25px
      bottom: 25px
    tap_action:
      action: call-service
      service: amcrest.ptz_control
      service_data:
        entity_id: camera.webcam
        movement: zoom_in
    hold_action:
      action: call-service
      service: amcrest.ptz_control
      service_data:
        entity_id: camera.webcam
        movement: zoom_out