View it in production

Edit on StackBlitz ⚡️

Welcome to Lab 4 at Cloudflare Connect 2022 - This lab will focus on getting up and running with Cloudflare Stream.

By the end of this lab you will have:

• Explored the Cloudflare Stream dashboard
• Upload a video to Cloudflare Stream using Stream Direct Uploads, eliminating the need for storage buckets
• Example code to continue using and integrating Stream into your projects

Stream is an enterprise-scale API that lets Cloudflare customers build serverless apps with minimal engineering effort and cost.

The Stream dashboard allows you to manage, view and upload videos without needing to write code. The Dashboard also provides example cURL commands for common operations, helping you fast-track app development.

In our workshop, we'll be working with some example code to show how you can quickly build a video sharing app with Workers and Stream. The mini app will enable users to upload videos using Cloudflare Workers and the Stream API. But the dashboard remains a great way to understand what's being uploaded to your Stream account.

Visit dash.cloudflare.com/profile/api-tokens and select "Create Token". Use the below screenshot as an example of how to configure the token -- specifically, the "Stream - Read" and "Stream - Edit" settings.

Stream's Direct Creator Upload API enables you to directly accept user uploads without exposing your API Key. By using the Direct Creator Uploads API, you eliminate the need to use storage buckets and leverage built-in storage.

To use the Direct Upload feature, we'll make a client-side HTTP request to obtain a new tokenized upload URL:

let response = await fetch('/token');
let uploadToken = await response.text();
uprog.videoId = uploadToken;

In a Pages Function, defined at functions/token.js, we can create a new request to the Stream API, including our credentials - an auth email and API key - which will create a unique Direct Upload URL.

// functions/token.js

export async function onRequestGet({ env }) {
  const init = {
    method: 'POST',
    headers: {
      'X-Auth-Email': env.STREAM_AUTH_EMAIL,
      'X-Auth-Key': env.STREAM_AUTH_KEY,
    },
    body: "{\"maxDurationSeconds\":3600,\"meta\":{\"name\":\"My First Stream Video\",\"test2\":\"hi\"}}"
  }
  const response = await fetch(`https://api.cloudflare.com/client/v4/accounts/${env.STREAM_ACCOUNT_ID}/stream/direct_upload`, init)
  const results = await response.json();
  return new Response(results.result.uploadURL, { 
    headers: { 
      'Access-Control-Allow-Headers': '*', 
      'Access-Control-Allow-Origin': '*' 
    } 
  })
}

With the Direct Upload URL created, we can update the submission form for the video, and begin making a request to upload the video file to the Direct Upload URL.

let file = uprog.hFile.files[0];
let xhr = new XMLHttpRequest();
let data = new FormData();
data.append("file", file);
xhr.open("POST", uploadToken);

This example code is designed to give you a starting point to build applications based on Stream. You can re-use these serverless functions or the frontend to allow submission of user-generated content.

For the complete open-source code, check out the repo on GitHub.