Allow ExoPlayer only from more-info-camera

[uvjustin]

Proposed change

Using ExoPlayer to play media draws over the webview, causing problems when elements such as the toolbar need to draw over the video element. The current implementation also does not handle scrolling.
This PR attempts to avoid these problems by only allowing ExoPlayer from more-info-camera.ts and not from ha-image.ts.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue: Problems with ExoPlayer and webview #6973
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[uvjustin]

@bramkragten I don't have a frontend dev environment set up so I haven't tried this and it probably has some problems. But would something like this work?

[bramkragten]

Yes, the code looks fine. I'll test it tomorrow.

[bramkragten]

Can we check if the format is playable in the default browser player and only use exoplayer when needed?

[uvjustin]

Can we check if the format is playable in the default browser player and only use exoplayer when needed?

I don't think that it is possible to tell whether it is playable without trying to play it. Maybe @hunterjm has a better idea? See #2950

[bramkragten]

Was thinking about the backend, not sure what info is available there.

[uvjustin]

Was thinking about the backend, not sure what info is available there.

Yes, the backend knows which codecs we are using, so if we start from there we can pass the relevant information forward. But I'm not sure if we want to do that - let's ask @hunterjm ?

[hunterjm]

We could potentially send it as a part of the camera/stream WebSocket response: https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py#L605

That would require a bit of a refactor though because while the stream worker knows what the video encoding is, it's not really passed up the chain.

Either way, we could return whether or not the stream is H.264 or H.265, but then you would have to keep a mapping in the browser to determine support. H.265 is unsupported in everything except Safari, and with this PR Android using Exoplayer at the moment. Since we don't have workarounds for Chrome/Firefox/Edge, I'm not sure if it's worth the effort.

[uvjustin]

@bramkragten Did the code work for you? As I mentioned, the change of ?allowExoPlayer to .allowExoPlayer (ie from an attribute to a property) didn't seem to work for me.
It seems that passing allow-exoplayer as an attribute from ha-more-info to ha-camera-stream works fine, but if you change the ha-camera-stream to ha-hls-player part from an attribute to a property you have to set the property in ha-hls-player to attribute: false, otherwise ha-hls-player just looks for an attribute which doesn't exist and ends up always mapping to false. Of course I also know next to nothing about JS/Typescript/LitElement so I could be totally wrong here.

[bramkragten]

It should work

[uvjustin]

It wasn't working on my end, but it could have been some other problem. I'll try again with the dev docker image.
Let me know if you get a chance to try it.
Edit: Nevermind, got a chance to do a proper build and it seems to work for me.