Allow `image` view to use a HA camera snapshot

[jdehlin]

I am using the image view as the default view in my cards. For the image view, I'm using the snapshot URL of my cameras. This provides a snapshot from each camera every few seconds. Works great for my Reolink cameras, which support Basic authentication, but not for my Amcrest camera, which only supports Digest.

Amcrest:

image:
  src: http://admin:password1@192.168.x.x/cgi-bin/snapshot.cgi1
  refresh_seconds: 5

Reolink:

image:
  src: >-
    http://192.168.x.x/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=xxx&user=admin&password=password&width=640&height=360
  refresh_seconds: 5

Entering the Amcrest URL in the browser pops up a browser dialog for username and password. After entering the camera credentials, the snapshot from the camera loads. Using that URL is the Frigate card results in a broken image and HTTP 401 responses: Failed to load resource: the server responded with a status of 401 (Unauthorized).

Ideally the Frigate card would extract the credentials from the image URL and use those. Alternatively there could be additional username and password fields for the image configuration.

Love the card. Thanks for the great work!

[dermotduffy]

Thanks for the well formulated request @jdehlin !

I have two related suggestions / things I've been mulling over:

• Whether there should be an image live provider, that would have a "refreshing image view" in the live camera carousel. I can see some people wanting this, but I suspect it wouldn't actually help you (as you're probably using the image view as a 'cheap' live view, but still want to be able to click 'live' to see the real stream).
• Whether or not the image view could have an option to just ask Home Assistant to repeatedly snapshot the configured camera every N seconds.

I think the second one could help you. In that case, as long as the camera is configured in HA, you actually wouldn't need to specify the URL, the username or the password -- which is pretty attractive...

To check what snapshot this would actually give you:

• Go to 'Developer Tools' in your HA instance.
• Find an example camera entity.
• Look for the entity_picture attribute on the right-hand side.
• Append that URL to your HA host and you should get a snapshot back.

If I implemented this, would it cover your usecase?

[jdehlin]

Spot on with using the image view as a 'cheap' live view for a grid of cameras on a dashboard, with the option to click the live view button to actually stream each camera as needed.

Second option sounds pretty good. I got the URL from Developer Tools and it works in the browser, as well as in the card. Seems that the token is regenerated periodically, though, meaning it only works for a short period of time. Being able to configure the card to use that URL with the dynamic token would be amazing.

image:
  src: >-
    http://192.168.x.x:8123/api/camera_proxy/camera.amcrest_camera?token=abcd1234
  refresh_seconds: 2

[dermotduffy]

@jdehlin Don't need to worry about that, the card has access to the live attributes for the camera, so every time the image is refreshed it would automatically use the correct token.

So, I think this would work for you then. I think the option would be something like:

Uses the camera snapshot as the default image:

image:
  default: camera

Uses the Frigate bird image as the default image:

image:
  default: screensaver

The latter would remain the default, and also be used if HA doesn't provide the snapshot URL.

Please let me know if you have better/different ideas!

[jdehlin]

Sounds good to me. Would refresh_seconds still work for the default: camera option?

[dermotduffy]

Absolutely.

[jdehlin]

Would be a breaking change, but I think something like the following would be the most intuitive.

image:
  src: [camera|screensaver|url]
  src_url: <string>
  refresh_seconds: <int>

The src attribute would default to 'screensaver' and the src_url attribute would only be relevant for the 'url' source option.

Alternative non-breaking could be something like the following, where src would only be relevant for the 'url' type.

image:
  type: [camera|screensaver|url]
  src: <string>
  refresh_seconds: <int>

[dermotduffy]

Not shy about a breaking change, would rather get it right. I think I like your option 1, maybe a tweak:

image:
  src: [camera|screensaver|url]
  url: <string>
  refresh_seconds: <int>

[dermotduffy]

FYI: I went with the follow tweak to better match the existing naming scheme:

image:
  mode: [camera|screensaver|url]
  url: <string>
  refresh_seconds: <int>