From 9f1fec910d480a1f6e37633415058e29e356dc5f Mon Sep 17 00:00:00 2001 From: zaidf Date: Fri, 11 Dec 2020 11:25:15 -0800 Subject: [PATCH 1/5] tus support for direct creator uploads --- .../direct-creator-uploads.md | 62 ++++++++++++++++++- 1 file changed, 61 insertions(+), 1 deletion(-) diff --git a/products/stream/src/content/uploading-videos/direct-creator-uploads.md b/products/stream/src/content/uploading-videos/direct-creator-uploads.md index c8df94cd5a53b58..2fef3ac055557ad 100644 --- a/products/stream/src/content/uploading-videos/direct-creator-uploads.md +++ b/products/stream/src/content/uploading-videos/direct-creator-uploads.md @@ -51,7 +51,11 @@ Additionally, you can control security features through these fields: -### Example request +## Using Basic Uploads + +If the uploads from your creators are under 200MB, you can use basic uploads. For videos over 200 MB, use TUS uploads (described later in this article.) + +The first step is to request a token by calling the `direct_upload` end point from your server: ```bash curl -X POST \ @@ -172,6 +176,62 @@ size, the user will receive a `4xx` response. +## Using TUS (recommended for videos over 200MB) + +TUS is a protocol that supports resumable uploads and works best for larger files. + +Typically, tus uploads require the authentication information to be sent with every request. This is not ideal for direct creators uploads because it exposes your API key (or token) to the end user. + +To get around this, you can request a one-time tokenized URL by making a POST request to the `/stream?direct_user=true` end point: + + +``` +curl -H "Authorization: bearer $TOKEN" -X POST -H 'Tus-Resumable: 1.0.0' -H 'Upload-Length: $VIDEO_LENGTH' 'https://api.cloudflare.com/client/v4/accounts/$ACCOUNT/stream?direct_user=true' +``` + +The response will contain a `Location` header which provides the one-time URL the client can use to upload the video using tus. + +Here is a demo Cloudflare Worker script which returns the one-time upload URL: + +``` +addEventListener('fetch', event => { + event.respondWith(handleRequest(event.request)) +}) + +/** + * Respond to the request + * @param {Request} request + */ +async function handleRequest(request) { + const init = { + method: 'POST', + headers: { + 'X-Auth-Email': 'MYEMAIL', + 'X-Auth-Key':'MYKEY', + 'Tus-Resumable': '1.0.0', + 'Upload-Length': request.headers.get('Upload-Length'), + 'Upload-Metadata': request.headers.get('Upload-Metadata') + }, + } + const response = await fetch("https://api.cloudflare.com/client/v4/accounts/MYACCOUNT/media?direct_user=true", init) + const results = await gatherResponse(response) + return new Response(null, {headers: {'Access-Control-Expose-Headers':'Location','Access-Control-Allow-Headers':'*','Access-Control-Allow-Origin':'*','location':results}}) + +} + +async function gatherResponse(response) { + const { headers } = response + return await headers.get('location') + +} +``` + +You can apply the same constraints as Direct Creator Upload via basic upload: expiry and maxDurationSeconds. They have the exact same meaning here as elsewhere. No metadata or authentication is required from the client. If any is provided, it will be ignored. + +Once you have the tokenized URL, you can pass it to the tus client to begin the upload. For details on using a tus client, refer to the [Resumable uploads with tus ](https://developers.cloudflare.com/stream/uploading-videos/upload-video-file#resumable-uploads-with-tus-for-large-files) article. + +If you simply want to do a test upload with a tokenized url, visit the [tus codepen demo](https://codepen.io/cfzf/pen/wvGMRXe) and paste the returned url in the "Upload endpoint" field. + ## Tracking user upload progress After the creation of a unique one-time upload URL, you may wish to retain the From fafc5812920de841dd439a5feaba9442eeb8b70a Mon Sep 17 00:00:00 2001 From: zaidf Date: Fri, 11 Dec 2020 14:50:40 -0800 Subject: [PATCH 2/5] revised tus section based on kyle's feedback based on feedback from https://github.com/cloudflare/cloudflare-docs/pull/483 --- .../src/content/uploading-videos/direct-creator-uploads.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/products/stream/src/content/uploading-videos/direct-creator-uploads.md b/products/stream/src/content/uploading-videos/direct-creator-uploads.md index 2fef3ac055557ad..4d9c8397ed46809 100644 --- a/products/stream/src/content/uploading-videos/direct-creator-uploads.md +++ b/products/stream/src/content/uploading-videos/direct-creator-uploads.md @@ -213,7 +213,7 @@ async function handleRequest(request) { 'Upload-Metadata': request.headers.get('Upload-Metadata') }, } - const response = await fetch("https://api.cloudflare.com/client/v4/accounts/MYACCOUNT/media?direct_user=true", init) + const response = await fetch("https://api.cloudflare.com/client/v4/accounts/$ACCOUNT/stream?direct_user=true", init) const results = await gatherResponse(response) return new Response(null, {headers: {'Access-Control-Expose-Headers':'Location','Access-Control-Allow-Headers':'*','Access-Control-Allow-Origin':'*','location':results}}) @@ -226,7 +226,7 @@ async function gatherResponse(response) { } ``` -You can apply the same constraints as Direct Creator Upload via basic upload: expiry and maxDurationSeconds. They have the exact same meaning here as elsewhere. No metadata or authentication is required from the client. If any is provided, it will be ignored. +You can apply the same constraints as Direct Creator Upload via basic upload: expiry and maxDurationSeconds. To do so, you must pass the expiry and maxDurationSeconds as part of the `Upload-Metadata` request header as part of the first request (made by the Worker in the example above.) The `Upload-Metadata` values are ignored from subsequent requests that do the actual file upload. Once you have the tokenized URL, you can pass it to the tus client to begin the upload. For details on using a tus client, refer to the [Resumable uploads with tus ](https://developers.cloudflare.com/stream/uploading-videos/upload-video-file#resumable-uploads-with-tus-for-large-files) article. From 9c526d5f789820dcc45d764b6fe411d6ba20ca57 Mon Sep 17 00:00:00 2001 From: zaidf Date: Fri, 11 Dec 2020 15:01:18 -0800 Subject: [PATCH 3/5] updated to use bearer token --- .../src/content/uploading-videos/direct-creator-uploads.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/products/stream/src/content/uploading-videos/direct-creator-uploads.md b/products/stream/src/content/uploading-videos/direct-creator-uploads.md index 4d9c8397ed46809..0315a82f2e2953e 100644 --- a/products/stream/src/content/uploading-videos/direct-creator-uploads.md +++ b/products/stream/src/content/uploading-videos/direct-creator-uploads.md @@ -206,8 +206,7 @@ async function handleRequest(request) { const init = { method: 'POST', headers: { - 'X-Auth-Email': 'MYEMAIL', - 'X-Auth-Key':'MYKEY', + 'Authorization': 'bearer $TOKEN' 'Tus-Resumable': '1.0.0', 'Upload-Length': request.headers.get('Upload-Length'), 'Upload-Metadata': request.headers.get('Upload-Metadata') From 95dda602e34c79f988430595e2bb61586f539b70 Mon Sep 17 00:00:00 2001 From: zaidf Date: Fri, 11 Dec 2020 15:02:05 -0800 Subject: [PATCH 4/5] Update direct-creator-uploads.md --- .../src/content/uploading-videos/direct-creator-uploads.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/products/stream/src/content/uploading-videos/direct-creator-uploads.md b/products/stream/src/content/uploading-videos/direct-creator-uploads.md index 0315a82f2e2953e..6baf110aa80900c 100644 --- a/products/stream/src/content/uploading-videos/direct-creator-uploads.md +++ b/products/stream/src/content/uploading-videos/direct-creator-uploads.md @@ -206,7 +206,7 @@ async function handleRequest(request) { const init = { method: 'POST', headers: { - 'Authorization': 'bearer $TOKEN' + 'Authorization': 'bearer $TOKEN', 'Tus-Resumable': '1.0.0', 'Upload-Length': request.headers.get('Upload-Length'), 'Upload-Metadata': request.headers.get('Upload-Metadata') From 1a822f933b7f3a2be25f7d90c6518fb6af608e3e Mon Sep 17 00:00:00 2001 From: zaidf Date: Mon, 14 Dec 2020 12:35:13 -0800 Subject: [PATCH 5/5] tus capitaliation --- .../src/content/uploading-videos/direct-creator-uploads.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/products/stream/src/content/uploading-videos/direct-creator-uploads.md b/products/stream/src/content/uploading-videos/direct-creator-uploads.md index 6baf110aa80900c..faf70aadfc6b87b 100644 --- a/products/stream/src/content/uploading-videos/direct-creator-uploads.md +++ b/products/stream/src/content/uploading-videos/direct-creator-uploads.md @@ -176,9 +176,9 @@ size, the user will receive a `4xx` response. -## Using TUS (recommended for videos over 200MB) +## Using tus (recommended for videos over 200MB) -TUS is a protocol that supports resumable uploads and works best for larger files. +tus is a protocol that supports resumable uploads and works best for larger files. Typically, tus uploads require the authentication information to be sent with every request. This is not ideal for direct creators uploads because it exposes your API key (or token) to the end user.