[Resolved] How I can embed video with Appwrite?

I'm just wondering how I should embed videos from Appwrite. I used getFileView and then pass href to src of video tag and I had 401 status code. How I can retrieve video from Appwrite if it secured?

If it's a resource protected by permissions, you will need to specify a JWT token in the request body or you can alternatively use any of the Appwrite SDK

Yes, I already try, it strange that I need additionaly specify JWT for user to retrieve the stream of asset. But I stuck with problem, if I do it protected then I have only one way, retrieve stream and convert it to Blob, then it works as expected.

But when filed like 200MB or even more, I need to await whole asset before user can play it. Very bad UX, and I didn't find any solution to this. I already play around with Buffers, Blobs, but no luck. The MediaSource API from the browser also didn't work for me.

@D5 Also when I embed without protection by direct url for appwrite file, it loads like partially with chunks of data and the video started even if loaded 20MB from 200MB for example.

But with protection I can't perform that, and this is bad somehow. I can't add custom headers to native request (maybe service worker can, but I'm not sure that the video native request can be controlled). And I haven't other ways to perform authorization. 🤨

Hmm that's weird. Seems like a bug

I thought appwrite wasn't able to load the video with chunks and needed to load everything before starting to play

Yep, I already 5 hours try to workaround with that and try everything that I know so far and even not 😆

You know would be great to have some query param like &jwt=

Which will authorize such GET request

Then I guess it will be possible to embed urls where you want

Probably the token is not being specified in URL due to security reasons

But sincerely idk

@D5 thank you for you feedback

@D5 FYI:

self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
const searchParams = url.searchParams;
const jwt = searchParams.get('jwt');

if (jwt) {
const request = event.request.clone();

}
});

self.addEventListener('install', () => {
self.skipWaiting();
});

Resolve it with service worker, maybe someone else will face the same problem.

So the logic to have jwt as query param, but under the hood map request with headers instead.

[Resolved] How I can embed video with Appwrite?