First Camera stream in the dashboard not starting automarically

[edomasca]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.
• [ ] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

When loading a specific dashboard in Lovelace with multiple cameras to stream, the first one do not starts automatically while the others do. Changing the order of the devices causes always the first one to fail doing autoplay. (E.g. it is not an issue related to an entity but only to the first entity in the dashboard whatever it is). The dashboard has only cameras to steam from UNIFI protect. If I switch to another dashboard and then I go back to the one with the cameras, then all streams start normally. the issue happens then only when loading the page directly to the specific dashboard It happens to all browsers and app too.

Describe the behavior you expected

All cameras should start streaming when opening the specific dashboard (Autoplay)

Steps to reproduce the issue

1. Create a dashboard with more than one camera to stream (live)
2. Load that specific page directly without switching between dashboards

What version of Home Assistant Core has the issue?

Core 2024.2.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

No response

Which operating system are you using to run this browser?

No response

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[acshef]

I'm experiencing the same thing. I have a picture-glance card with camera_view: live and the stream never starts (though it appears to fall back to camera thumbnails as I have those defined for RTSP and Frigate cameras I've tested)

Additional findings: I receive a JS error in the Chrome DevTools console:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'KeySystemFormats')
    at 96996 (96996.w7vKRby48d0.js:1:283711)
    at Function.c (bootstrap:19:32)
    at async a.value (ha-hls-player.ts:112:11)

And sure enough this part of the frontend bundle doesn't seem to play well. The offending bundle file "96996.w7vKRby48d0.js" is attempting the following near its end:

var oi = $.KeySystemFormats
  , li = $.KeySystems
  , di = $.SubtitleStreamController
  , hi = $.TimelineController

But above that, $ is initialized to undefined:

var $ = void 0
  , G = s($);

It is not reassigned between the two code blocks.

I'm fairly certain this code comes from https://github.com/video-dev/hls.js, but due to being minified and lacking sourcemaps I'm unable to locate exactly where in hls.js these offending lines map to.

ETA: Still present on Home Assistant v2024.2.2, frontend v20240207.1

[sdotter]

yeah I am experiencing the same problem

[nomonkeynodeal]

Came here for this issue.

[b0mbays]

Experiencing the same issue after updating to 2024.2.x

[sebastian-bugajny]

Same problem for me since version 2024.2.x

[Daniel-dev22]

I'm experiencing the same thing. I have a picture-glance card with camera_view: live and the stream never starts (though it appears to fall back to camera thumbnails as I have those defined for RTSP and Frigate cameras I've tested)

Additional findings: I receive a JS error in the Chrome DevTools console:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'KeySystemFormats')
    at 96996 (96996.w7vKRby48d0.js:1:283711)
    at Function.c (bootstrap:19:32)
    at async a.value (ha-hls-player.ts:112:11)

And sure enough this part of the frontend bundle doesn't seem to play well. The offending bundle file "96996.w7vKRby48d0.js" is attempting the following near its end:

var oi = $.KeySystemFormats
  , li = $.KeySystems
  , di = $.SubtitleStreamController
  , hi = $.TimelineController

But above that, $ is initialized to undefined:

var $ = void 0
  , G = s($);

It is not reassigned between the two code blocks.

I'm fairly certain this code comes from https://github.com/video-dev/hls.js, but due to being minified and lacking sourcemaps I'm unable to locate exactly where in hls.js these offending lines map to.

ETA: Still present on Home Assistant v2024.2.2, frontend v20240207.1

It's likely one of the dependency bumps for hls broke this and they need to revert until it's fixed upstream? I'm surprised more users aren't reporting this.

[bramkragten]

There have been multiple bumps of hls.js in 2024.3, can anyone check if this issue is still there in the beta of 2024.3?

[sdotter]

Just checked... Seems still to be an issue that it is not loading first cam.

But wondering... I didn't get notified that there's new frontend and that I should reload home assistant... Is it maybe that I need to force? Or is that same as ctrl+f5? Force refresh in chrome etc...

[bramkragten]

Reproduced the issue in dev 👍

[sdotter]

Think you already know... but just in case:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'KeySystemFormats') at 96996 (96996.w7vKRby48d0.js:1:283711) at Function.c (bootstrap:19:32) at async a.value(ha-hls-player.ts:112:11) `

[bramkragten]

Yeah, we use the light dist of hls, and they replace some packages with undefined... and then they import stuff from it 🙃

[postaccountgh]

Same issue here! I'm back to 2024.1.6 and everythig works fine.

[Daniel-dev22]

Yeah, we use the light dist of hls, and they replace some packages with undefined... and then they import stuff from it 🙃

Any idea if this can be fixed for 2024.3.x? If we have to wait for upstream?

[alphasixtyfive]

I've noticed that every time I'm opening more-info dialog of any camera, live via never starts and image is just frozen. If I open this or any other camera again, streaming starts just fine. If I refresh the page it happens again. The error I'm seeing in dev tools:

Belive it is related.

[woempiej]

Same issue 2024.2.5 See: https://github.com/dermotduffy/frigate-hass-card/issues/1368

[Daniel-dev22]

Yeah, we use the light dist of hls, and they replace some packages with undefined... and then they import stuff from it 🙃

Is it possible it will be fixed in 2024.3.x as it seems as if a lot more users are experiencing this issue?

[DaWheelz]

I'm experiencing the same since 2024.2 and above.

[Daniel-dev22]

It looks like there was a patch pushed to the frontend which could fix this in 2024.4.0?

[woempiej]

Hi all,

The issue is fixed in HA 2024.3.0

[sebastian-bugajny]

Version 2024.3.0 haven't resolved that issue for me.

[Daniel-dev22]

Version 2024.3.0 haven't resolved that issue for me.

Did you clear cache?

[b0mbays]

2024.3.0 is working for me 👍

[kenni]

Ditto, 2024.3.0 also seems to work here (first playback of recordings from Frigate now works again).

[crhass]

Ok for me now in 2024.3.0

[sdotter]

Yep confirm in 2024.3 it's working again.. all streams are loading and playing

[XBigTK13X]

Adding my vote that upgrading from

Core 2024.2.5
Frontend 20240207.1

to

Core 2024.3.0
Frontend 20240306.0

Resolved this issue for me on both Firefox and Android.