Creating Video Processing Pipelines With Cloudinary

Processing is an important step for storing and delivering digital media. Many common transformations are applied to videos, such as codecs, bitrate encoding, segmenting, changing resolution, generating thumbnails, applying effects, and adding watermarks.

A pipeline is a simple but powerful concept: it’s a series of steps, each building upon the last. You can imagine it as a function that takes in some data and passes the return value to another function. Each function or step acts on the result of the last one and returns a new version of the input data. 

Combining video data transformations using a pipeline streamlines your workflow. Sometimes, transformations must be applied in a particular order to achieve a desired result. For example, before you encode or trim the size of a video, apply the transformation first. This is why pipelines are an ideal pattern for transforming digital media. You have control over the order in which transformations are performed.

Cloudinary provides an incredibly powerful API for applying transformations to digital media. We’ll build example transformations using the Cloudinary API and cover many important concepts. Transformation URL API Reference and Video Transformations will be useful for planning our transformations.

We’ll implement two different transformation pipelines. Combined, we’ll cover many useful concepts and common transformations. Here are the pipelines that we’ll create: 

1. Upload a video to Cloudinary and apply eager transformations: adjusting quality and bitrate, changing format containers, applying a codec, and generating thumbnails.
2. Apply a lazy transformation to trim, resize, adjust quality, add an effect, and convert a video to a GIF.

One of the more interesting parts of the API is the ability to use different delivery types. You’ll be blown away by how simple these complex operations are pieced together using the Cloudinary API.

For this example, we want to adjust quality and bitrate, change format containers, apply a codec, and generate thumbnail images.

The first thing to highlight about this use case is the delivery type. Since we’re using the upload delivery type, we’ll apply eager or incoming transformations to our video. Eager transformations will be applied once our video has completed uploading, which means that we’ll also still have our original video uploaded. Incoming transformations will be applied during the upload, so only the transformed video will be available after the upload is completed.

For this example, we’ll use async eager transformations, which allow the transformations to be applied during upload and preserve our original file.

Here’s the code using the Cloudinary NodeJS API:

const cloudinary = require('cloudinary').v2;

// Configure Cloudinary
// Replace with your actual Cloudinary credentials
cloudinary.config({
  cloud_name: 'your_cloud_name',
  api_key: 'your_api_key',
  api_secret: 'your_api_secret'
});

// Function to upload video with transformations
async function uploadVideoWithTransformations(videoPath) {
  try {
    const result = await cloudinary.uploader.upload(videoPath, {
      resource_type: "video",
      eager: [
        // Transformation 1: Adjust quality and bitrate, change format, apply codec
        { 
          quality: "auto:good", 
          bit_rate: "2m",
          format: "mp4",
          video_codec: "h264"
        },
        // Transformation 2: Generate thumbnails
        { 
          width: 320,
          height: 240,
          crop: "fill",
          format: "jpg",
          start_offset: "0",
          end_offset: "10",
          interval: 5000
        }
      ],
      eager_async: true,
      eager_notification_url: "<https://your-notification-url.com/cloudinary-notification>"
    });

    console.log("Upload successful. Details:", result);
    console.log("Transformed video URL:", result.eager[0].secure_url);
    console.log("Thumbnail URLs:", result.eager[1].secure_url);

    return result;
  } catch (error) {
    console.error("Upload failed:", error);
  }
}

// Usage
const videoPath = './path/to/your/video.mp4';
uploadVideoWithTransformations(videoPath);Code language: JavaScript (javascript)

Each step in the pipeline is represented by an item in the eager array. Keep in mind they’re applied in order. As we touched on in the beginning, there are use cases where the order of the transformations can be important.

Our pipeline consists of two steps:

1. Adjust quality and bitrate, change format, and apply codec.
2. Generate thumbnails.

Since the processing is happening asynchronously, we can provide a webhook URL to eager_notification_url, which will be called to notify us once our transformations have been completed.

For this example, we want to trim, resize, adjust quality, add an effect, and convert a video to a GIF.

This example takes a different direction by using a lazy transformation. We’ll use a video hosted on the Cloudinary demo account, but it could be in your account or anywhere else on the web. Lazy transformation means the transformations won’t be applied until the user has requested the asset. After the initial fetch and transformation, it will be cached in the Cloudinary CDN for future access.

Here are the URLs for the original and transformed videos:

• https://res.cloudinary.com/demo/video/upload/dog.mp4
• https://res.cloudinary.com/demo/video/upload/c_fill,h_360,w_640/du_5/q_auto:good/e_vignette:30/f_gif/dog.mp4

Let’s break down the transformation URL:

• c_fill,h_360,w_640/. Applies the resize transformation.
• du_5/. Trims the video to a duration of 5 seconds.
• q_auto:good/. Adjusts the quality.
• e_vignette:30/. Adds a vignette effect.
• f_gif/. Converts the video to GIF format.

Each separating / between transformations represents a different step in our pipeline. So, we start by resizing the video and end by converting it to a GIF image.

It was that easy to take a video and create a GIF image that we could easily share with anyone. All we had to do was add some transformations through URL params!

We’ve only scratched the surface of what you can accomplish with the Cloudinary Transformation API. Read through the reference to learn about all the different types of transformations available.

Our first example was a common transformation that adjusted the quality and applied a codec during upload. Our second example is especially unique and puts the power of Cloudinary on display. Being able to apply transformations lazily when an asset is requested and have it automatically cached for future access is a superpower.

Create an account for free and start experimenting today. If you have some ideas, just sign in and take a shot!