feature request: Thumbnail image support for chromecast or google home hubs

rainieryoung commented 2 years ago

Objective

As a user, I want to be able to cast a dashboard with custom aarlo-glance cards to a chromecast or google home hub, so that I can have a summary view of my home visible at a glance.

Issue

Expected Behavior When I view the dashboard on a chromecast or google hub device, that the thumbnail displays from the aarlo camera the same as it does in a browser.

Actual Behavior When I use type: custom:aarlo-glance cards, the thumbnail displayed is not the camera image, but instead displays: https://cast.home-assistant.io//images/google-nest-hub.png

I found the source of that here: https://github.com/home-assistant/frontend/blob/dev/cast/public/_redirects

# Some custom cards are not prefixing the instance URL when fetching data
# and can end up fetching the data from the Cast domain instead of HA.
# This will make sure that some common ones are replaced with a placeholder.

/api/camera_proxy/* /images/google-nest-hub.png
/api/camera_proxy_stream/* /images/google-nest-hub.png
/api/media_player_proxy/* /images/google-nest-hub.png

Workaround: Stock Picture Card The same camera thubmnail works if a stock home assistant card like picture-elements is used. This is my workaround today but requires maintaining duplicate dashboards and aarlo camera feature limitations when casting to a hub.

I tried to dig through the existing picture-elements and similar cards and got down to hui-image.ts and camera, but it was't obvious to me what the custom:aarlo-glance card needed to behave the same way.

Steps to Reproduce

Prerequisites for Casting:

A google home hub or chromecast device on your network
Addition of those as media_player devices in home assistant
Setup of https://cast.home-assistant.io/ (which also assumes external https access to your instance)

Create a Dashboard

Create a new dashboard (for simplicity) with a custom:aarlo-glance card -- confirm the camera it is visible and functioning normally from a browser
Go to the cast device's media_player card and cast the new dashboard (this can be also done with an automation)

Alternative to Casting Prereqs I believe the issue can be seen by comparing the image source of custom:aarlo-glance to any picture-glance, picture-elements, or picture-entity card in Home Assistant.

Create a new dashboard
Add a custom:aarlo-glance card using one of your aarlo cameras
Add a picture-elements card using the same aarlo camera *code sample included below
Inspect the image source (e.g. chrome > developer tools)

For the custom:aarlo-glance card, the image path is:

src="/api/camera_proxy/camera.aarlo_front_door?token=[token]&t=1667998953090"

For the picture-elements card:

src="https://[sub-domain].duckdns.org:8123/api/camera_proxy/camera.aarlo_front_door?authSig=[authSigToken]&width=490&height=274"

The two noticeable differences are:

The url includes the instance prefix
The url is using an authSig parameter instead of token

picture-elements code sample

``` type: picture-elements elements: - type: image camera_image: camera.aarlo_front_door style: left: 50% top: 50% width: 100% height: 100% - type: icon icon: mdi title: Front Door style: background-color: rgba(0, 0, 0, 0.3) bottom: 0 color: white font-size: 12px left: 0 line-height: 300% padding: 0 0px transform: initial width: 100% - type: state-label entity: sensor.aarlo_last_front_door style: top: 94% left: 14% '--paper-item-icon-color': '#a9a9a9' font-weight: bold font-size: 16px - type: state-icon entity: binary_sensor.aarlo_motion_front_door style: top: 94% left: 32% '--paper-item-icon-color': '#a9a9a9' image: /local/camera_background.jpeg ```

Other Information

Video Works I did confirm that if I cast to a google home hub and tap the thumbnail, the video does play normally. So whatever the issue is, appears to be limited to the thumbnail image itself.

Scope is only when casting (as far as I know) As anyone who's used the custom:aarlo-glance card knows, the thumbnail image displays as expected from a browser, which resolves to the full URL without issue. However, for cast, because we are seeing the redirect thumbnails my assumption is this is resolving to https://cast.home-assistant.io/api/camera_proxy/[...]

I'm unclear if the issue is only the full url or both the url and authSig...

rainieryoung commented 2 years ago

The visuals might help explain better..

From a browser, for both the picture-elements or custom:aarlo-glance cards, everything works as expected:

From a chromecast or google home hub device:

Awful photo (and I see some theme/card_mod custom css variances) but hopefully this shows 'the problem' that I'm trying to solve...

rainieryoung commented 2 years ago

Not sure what I missed the first time around as I had previously tried to use hassUrl(), but didn't succeed. Could have easily been a cache issue.

At any rate, I believe https://github.com/twrecked/lovelace-hass-aarlo/pull/130 solves this. I have it running in a personal fork, so I'm set to go. Wanted to share it back in case it's useful to you to pull in. Thanks!

twrecked / lovelace-hass-aarlo