Add camera_video option to picture cards

[iantrich]

To allow streaming of the HLS feeds as a background in picture cards

[hunterjm]

I would really like this for my Picture Glance cards, as I'd still like the overlay of sensors on the camera.

@balloob mentioned adding the functionality into HUI Image so it can be used everywhere that component is loaded.

I think it should be an option that uses the camera image by default, and an additional configuration parameter on the card that enables the stream. Click/Tap action should be disabled if using live video for more-info, and instead call the fullscreen API on the video element.

The suggestion came up to determine network connectivity for mobile, but the API is still experimental, so probably not needed for an MVP.

Looking at bandwidth usage, for my configuration, each video segment is ~400 KB and a new segment is requested from the backend every 2 seconds. This would result in ~1 MB/s network throughput for 5 cameras streaming at the same time in the frontend.

We would definitely want to unload the video when the lovelace view is not active (camera cards are hidden), even if the connection to the site remains open.

[balloob]

So we make a narrow boolean available to panels, however that is not accessible to individual cards. I think that a good start would be to measure window width/height when page loads, and use that to determine what kind of stream. Probably add a new option:

stream_video: "always" | "never" | "auto"

Auto will use a combination of connectivity API + MediaQuery to make a decision ?

[balloob]

Also, we should make sure that we only stream for HLS, not also support MJPEG streams, as those are buggy as hell.

We should probably try to generalize the HLS part of more-info-camera component into a new reusable component.