Jamstack Explorers

Video Streaming with Adaptive Bitrate with Scott Wachtmann & Jen Brissman

Profiles, Representations and Transformations for ABR

Here, we will see what the Cloudinary transformations can do for us, and what the output looks like within the code. We will also walk you through how to use this repo and set up your own credentials.

Link to Github repository: https://github.com/cloudinary-training/jamstack-explorer-video-abr


We are now getting ready to implement HLS with adaptive bitrate streaming. Let's try to understand what the data that we produce is going to look like. There will be a profile made up of a series of representations. The representations provide the information for each of the bandwidths that we want to support.

We use the Cloudinary transformation to create these different settings for the representations. Cloudinary transformations are a key part of the Cloudinary platform. They allow us to change the properties of our video. We can adjust width, height, codec, bitrate, as well as the crop. Let's look at how we can use the built-in profiles that Cloudinary provides to create these transformations for us. To start, we'll go to our code and use the admin API to list out the profile that we want to use. To run code for this admin API, we'll be using the Cloudinary node SDK.

We'll need to include some credentials. To do this, you will need to create a free Cloudinary account, which offers up lots of bandwidth storage and the ability to create transformations. Once you've created your account and logged in, you will be brought to the Cloudinary dashboard. Here you'll see your cloud name, API key, API secret, and API environment variable. Locate your API environment variable, which is for the most part hidden because it contains a secret, and click on the clipboard to load it into your buffer. Now you're ready to go to your code. In the code, you will see a file called .env.sample. In this file, you can see the format of the full Cloudinary URL.

You can paste in yours, which should look just like this, and save it as a .env file. With these credentials in place, we are ready to run a script.

I'm using a GitHub repository that you can access from a link attached to this training mission. If you go to "cloudinary-training" on GitHub and find jamstack-explorer-video-abr, you can download clone or fork this repo.

I have downloaded the repo and you can see that we have quite a few files in here. However, at this point, we're going to focus on the scripts directory and look at the list profile function. Open up the listFullHDProfileTransformation script. In this script, we are bringing in the Cloudinary node SDK, and running the listFullHDProfile() function.

This function is going to provide us with the contents of the full HD profile that is provided by Cloudinary. We can run this script from the root.

As you can see, we are getting back a response from Cloudinary. You can see the display name of the profile listFullHDProfile. Then our profile representations, which are an array of transformations. Just as we showed in the slide, each of these transformations has a resolution in terms of width and height, a video codec, a bitrate, and a crop.

It is possible to create your own custom profiles. The way that you would do this is again with the Cloudinary admin API. You can use the "create streaming profile" function. You would provide your own name and display name. And then the easiest way to do it is to copy the response for the representations from the list that we just ran, and then change the transformation values to whatever you want for customization.

In this slide, we are showing that we are using the same resolutions and bitrates, but we have a profile that uses the h265 codec, and then one that uses the VP9 codec. The reason you might want to do this is to create fallback so that if your browser can use these more optimized codecs, it can choose them.


your progress