[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?

TL;DR

The user is asking how to embed a video with Appwrite and retrieve it securely. They tried adding the JWT token as a query parameter but it didn't work. Another user suggests using a service worker to resolve the issue. The user also mentions that when embedding the video without protection, it loads partially with chunks of data, but when protected, they can't add custom headers. They also tried using Buffers and Blobs, but it didn't work. The solution suggested is to specify the JWT token in the request body or use one of the Appwrite SDKs to retrieve the video.

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=<token>

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();

TypeScript

const headers = new Headers(request.headers);
headers.append('X-Appwrite-JWT', jwt);

const modifiedRequest = new Request(request.url, {
  method: request.method,
  headers: headers,
  mode: 'cors',
});

event.respondWith(
  fetch(modifiedRequest)
);

} });

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.