I am working with a live video stream coming from AWS MediaLive, and CloudFront as a CDN. We have a player inside a Vue front-end, which is showing the stream, and rendering HTML/JS/CSS items on the screen, based on what is happening in the stream.
Now, in our very naive solution we have a service pushing events over a web socket to the front end to render these things "in sync" with the stream delay, but this doesn't work, since the stream delay is neither stable, nor is it consistent across different screens.
As far as I can read, there should be ways to embed the data/events we need directly into the stream as meta-data.
I think SCTE-35 could be exploited here, even though this is really for ad insertion, I think we should be able to use it to encode other events/data?
My question is two-fold... Is what I describe above (SCTE-35) the way to go about this, or should I use something else (ID3 seems another option)?
And, more importantly, how can I manage to read/respond to these events on the front-end (javascript) side, because that is the real thing I can't seem to find any information on.
Thanks in advance.
That is generally handled via timed metadata. HLS uses ID3, or DATE-RAGE in the manifest, CMAF has emsg, DASH... doesn’t really have a standard that I know of. You need a player that know how to extract the information, and execute a callback.