Digital zoom controls (via css)

[dbuezas]

I have been wanting to have a "fake"/digital zoom for my cameras for a while. It would be a really cool feature if this card could do that (maybe even full fake ptz).

But in the meanwhile, here's a way to add it via yaml. It even works in full screen :)

Digital zoom in the card

Instructions

1. install https://github.com/thomasloven/lovelace-card-mod

2. Create a number helper from

3. Modify the yaml of your webrtc-camera like this

type: custom:webrtc-camera
url: my_camera
card_mod:
  style: |
    ha-card .player {
      transition: transform 200ms;
      transform: scale({{2**(states('input_number.zoom')|float-1)}});
    }
shortcuts:
  services:
    - name: Zoom in
      icon: mdi:magnify-plus
      service: input_number.increment
      service_data:
        entity_id: input_number.zoom
    - name: Zoom out
      icon: mdi:magnify-minus
      service: input_number.decrement
      service_data:
        entity_id: input_number.zoom

(of course you can use the same input_number for multiple cameras)

[dbuezas]

This variation of the css is less elegant (zooms to top left instead of center), but it allows to scroll to any portion of the screen later.
May be useful for cameras without ptz

card_mod:
  style: |
    ha-card .player{
        overflow: auto;
    }
    ha-card .player video{
      transition: transform 200ms;
      transform: scale({{2**(states('input_number.zoom')|float-1)}});
      transform-origin: top left;
    }

[dbuezas]

I'm considering making a PR with a proper implementation of this. @AlexxIT If I do it cleanly and put it behind a config, and code touch support is googd, would you consider taking a PR?

[AlexxIT]

If your PR won't require helper entities and other custom cards - it will be good PR.

[dbuezas]

I have the first prototype, it feels really nice.

It has support for both mouse and touch (exactly the same zoom/pan behaviour as google maps) and can even persist the zoom options between reloads. It is also configurable (disable mouse and each touch interaction and persistance)

The PR will be coming soon. It's ~200 lines in a separate file and I'm only missing handling transitions to full screen correctly.

[dbuezas]

PR: #491