I have an online course platform and I want to make it so that my users can directly upload their video on my website. (They’re using their Vimeo video id at the moment)
After viewing a few options, I think the Cloudflare Stream service fits my needs.
After following this doc (
https://developers.cloudflare.com/stream/uploading-videos/direct-creator-uploads/) I’ve created an endpoint on my server to authenticate the user and generate a TUF upload link.
I can generate the URL without any problem, but when I try to test it using this tool (
https://codepen.io/cfzf/pen/wvGMRXe) I can’t get it to work.
Here’s a link if anyone want’s to see what happens in the console or whatever:
If I take a look into my Cloudflare account, hereIs what I see:
Am I crazy? This should work right?!
I’m trying to upload this file:
And my “Upload-Length” header is set to 941021.
Any help would be greatly appreciated!
The process is a little more convoluted than that. The codepen needs to point to YOUR api not to Cloudflare. Your API is responsible for reading TUS input about the size of the file and generating a new direct upload and proxying this response in the LOCATION header just like Cloudflare gives it to you. DO NOT RETURN 301 or 302, just 200.
TUS will thus make 1 call to your API and then follow the location to actually upload elsewhere.
For proof of concept, I made a replit at https://TusResponder-1.microalps.repl.co that expects ?id=guid_part_of_url and that you manually create that WITH THE CORRECT upload size. Chunk size needs to meet CF requirements, I used 10485760. Code can be seen on index.php - TusResponder-1 - Replit
For example, you would use https://tusresponder-1.microalps.repl.co/?id=dc5a3a2d9ee2e58ff3bcef0157978bd6
I tried it and got an error that it has, expectedly, expired already.
I found that you can bypass all of that by simply changing
endpoint: endpoint to
uploadUrl: endpoint in the codepen js. Then you can put the direct URL from Cloudflare. It works for POC, but leaves you to work out how to get from the client and pass along to CF the upload-length. The above post is still the native and recommended way to implement end-to-end integration.