Direct Creator Uploads - TUS Javascript

Developers Stream
#1

I am really struggling to get this working. I’ve tried both the php and javascript implementations. and Im only a basic javascript developer… But seriously the documentation sucks, the authentication doesn’t appear to run through “bearer $token”, the endpoint URL is not the Location URL as in the examples.

I should say, I can upload small videos and the player is working etc. I just cant get the tus direct creator upload to work.

Firstly I can get the single use URL…

I call https://api.cloudflare.com/client/v4/accounts/XXXX/stream?direct_user=true and I get a Location return of the form.

https://upload.videodelivery.net/tus/XXXX?tusv2=true

To the extent that its relevant, I cant get any authorization through with a bearer $token. (CORS Errors), I have to use email and api-key. And I’ve tried that in postman and same issues. If thats the correct way to do it… PLEASE UPDATE THE DOCUMENTATION.

Ive been to the CodeOpen site and while that worked on ONE occasion, its not working on any of the Location URLS that I’m being given currently. I’m not sure if they are “Single Use” or “valid for a period of time” like the expiry value.

I WAS supplying the Location URL (the videodelivery one ) to TUS, but then you get a crapload of CORS errors… so I read the forums here and apparently you dont need to supply those… I need to supply “my own endpoint”.

Now I dont know what that is, so I’ve been supplying my website url. Which def stops all of the CORS errors, but now I get “Failed because: Error: tus: invalid or missing Location header, originated from request”

despite the fact, that the Location URL has been returned.

It would be great if a CloudFlare support person could contact me, cause i’m reading "Cloudflare Stream is an easy-to-use… " and I’m thinking no its not…

#2

The goal of Direct Creator Uploads is to let your users upload videos without you having to expose your API Key or bearer token to the client (browser). The CORS errors implies that you are trying to authenticate directly from the browser (ie. exposing your bearer token or API Key to the client).

Instead, you should…

1. Configure your client-side tus code to call your endpoint.

This is why in the codepen example, the Endpoint field value is to my server side script:

tus-endpoint
tus-endpoint1996×436 66.3 KB

2. Your custom endpoint should call the Stream API to request the one-time upload url

3. Your custom endpoint should return the one-time upload url in the location header.

You can see this in my server-side demo script which uses Cloudflare Worker (https://developers.cloudflare.com/stream/uploading-videos/direct-creator-uploads#using-tus-recommended-for-videos-over-200mb):

tus-serverside
tus-serverside1546×1436 277 KB

Once configured this way, this is what the flow will look like:

  1. tus will call your endpoint to get the one-time upload url
  2. your endpoint will call the Stream API to obtain the one-time upload url
  3. your endpoint will return the one-time upload url in the “Location” header
  4. tus will automatically read the Location header returned by your endpoint and proceed to upload the actual contents of the video file directly to Stream

Let me know if this helps.

#3

Check out this Cloudflare video to implement tus uploads from scratch with Cloudflare Stream.

1 Like