Intercepting requests to thumbnails/storyboard

[sidis405]

Hi folks

thank you for the excellent work you're doing!

I've got vidstack installed and running properly via the HLS provider.
It is correctly processing, master manifest, stream manifests, frames, qualities and so on.

In this particular case i'm passing also a poster and a vtt file build to spec to server the thumbnails.

The problem i'm having is the following-

For all of the assets i serve, i pipe the request through authentication and autorization.
So when i load the player page i feed it the main manifest with a token. For example

[http://.../master.m3u8?token=eyJ0eXAiOiJKV1Q...

Then on provider-change i set the config of hls to intercept the xhr requests that hls performs and i attach the token of the master manifest to other playlists, frames and so on

...
xhrSetup: (xhr, url) => {
                if (!url.includes("?token=")) {
                    xhr.open('GET', `${url}${url.includes('?') ? '&' : '?'}token=${token}`, true);
                }
            }
...

This works excellently.

Now my poster url and thumbnails.vtt url also have a token.
It works as expected and poster.jpg and thumbnails.vtt get loaded fine.

The problem arises when the player tries to fetch parts of the thumbnails.jpg (referenced in thumbnails.vtt).
The references of thumbnails.jpg don't contain a token as it makes no sense to hardcode it.

00:00:00.000 --> 00:00:02.000
thumbnails.jpg#xywh=0,0,200,101

00:00:02.000 --> 00:00:04.000
thumbnails.jpg#xywh=200,0,200,101

So my authorisation fails. Makes sense.

As i said, for the hls stream i solve this by intercepting xhr requests.

Is there a way for me to intercept the call that is made to get the relevant thumbnail section as instructed in the vtt?

Thanks in advance

[mihar-22]

Hey Sidis! We currently don't have an API defined for modifying the thumbnail fetch request. We're loading/displaying thumbnail images via the native <img> element which doesn't expose such API. We could use fetch and expose hooks if this functionality is a common use-case, but for most I've seen so far thumbnails are unprotected. A more practical approach might be securing via CORS headers or cookies?

[sidis405]

Hi @mihar-22! Thank you for the clarification. This explains it

The reason why i have everything token protected is that there are a number of clients to this data.
One being vidstack but then other players running on native application and so on.
Do the token offers a unified checkpoint (for all assets).

Anyhow, thank you. I'll look into finding another way to authenticate that request.

[mihar-22]

No problem, let me know if other options don't work out and we can look into adding something on our end for this use-case.

[sidis405]

For the time being i went the CORS way. Will figure it out with the mobile clients (depending on what's being used as a player) about how they're to get this image.

In the meanwhile i'll keep my eye on the Vidstack docs if something relevant to this shows up :)

But really, great job with everything. I'm having a pretty good time using vidstack (and i might bother you in the future with other questions :))

[devaoto]

@mihar-22 I get cors origin error as well, how do I fix it?