{"id":35111,"date":"2024-08-06T07:00:00","date_gmt":"2024-08-06T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=35111"},"modified":"2024-09-07T16:25:36","modified_gmt":"2024-09-07T23:25:36","slug":"creating-video-processing-pipelines","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/creating-video-processing-pipelines","title":{"rendered":"Creating Video Processing Pipelines With Cloudinary"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

A pipeline is a simple but powerful concept: it\u2019s 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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Media Processing Pipelines With Cloudinary<\/strong><\/h2>\n\n\n\n

Cloudinary provides an incredibly powerful API for applying transformations to digital media. We\u2019ll build example transformations using the Cloudinary API and cover many important concepts. Transformation URL API Reference<\/a> and Video Transformations<\/a> will be useful for planning our transformations.<\/p>\n\n\n\n

We\u2019ll implement two different transformation pipelines. Combined, we\u2019ll cover many useful concepts and common transformations. Here are the pipelines that we\u2019ll create: <\/p>\n\n\n\n

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

    One of the more interesting parts of the API is the ability to use different delivery types. You\u2019ll be blown away by how simple these complex operations are pieced together using the Cloudinary API.<\/p>\n\n\n\n

    Example 1: Uploading an Optimized Video<\/strong><\/h2>\n\n\n\n

    For this example, we want to adjust quality and bitrate, change format containers, apply a codec, and generate thumbnail images.<\/p>\n\n\n\n

    Delivery and Transformation Type<\/strong><\/h3>\n\n\n\n

    The first thing to highlight about this use case is the delivery type<\/a>. Since we\u2019re using the upload delivery type, we\u2019ll apply eager or incoming transformations<\/a> to our video. Eager transformations will be applied once our video has completed uploading, which means that we\u2019ll 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.<\/p>\n\n\n\n

    For this example, we\u2019ll use async eager transformations, which allow the transformations to be applied during upload and preserve our original file.<\/p>\n\n\n\n

    Here\u2019s the code using the Cloudinary NodeJS API:<\/p>\n\n\n

    const<\/span> cloudinary = require<\/span>('cloudinary'<\/span>).v2;\n\n\/\/ Configure Cloudinary<\/span>\n\/\/ Replace with your actual Cloudinary credentials<\/span>\ncloudinary.config({\n  cloud_name<\/span>: 'your_cloud_name'<\/span>,\n  api_key<\/span>: 'your_api_key'<\/span>,\n  api_secret<\/span>: 'your_api_secret'<\/span>\n});\n\n\/\/ Function to upload video with transformations<\/span>\nasync<\/span> function<\/span> uploadVideoWithTransformations<\/span>(videoPath<\/span>) <\/span>{\n  try<\/span> {\n    const<\/span> result = await<\/span> cloudinary.uploader.upload(videoPath, {\n      resource_type<\/span>: \"video\"<\/span>,\n      eager<\/span>: [\n        \/\/ Transformation 1: Adjust quality and bitrate, change format, apply codec<\/span>\n        { \n          quality<\/span>: \"auto:good\"<\/span>, \n          bit_rate<\/span>: \"2m\"<\/span>,\n          format<\/span>: \"mp4\"<\/span>,\n          video_codec<\/span>: \"h264\"<\/span>\n        },\n        \/\/ Transformation 2: Generate thumbnails<\/span>\n        { \n          width<\/span>: 320<\/span>,\n          height<\/span>: 240<\/span>,\n          crop<\/span>: \"fill\"<\/span>,\n          format<\/span>: \"jpg\"<\/span>,\n          start_offset<\/span>: \"0\"<\/span>,\n          end_offset<\/span>: \"10\"<\/span>,\n          interval<\/span>: 5000<\/span>\n        }\n      ],\n      eager_async<\/span>: true<\/span>,\n      eager_notification_url<\/span>: \"<https:\/\/your-notification-url.com\/cloudinary-notification>\"<\/span>\n    });\n\n    console<\/span>.log(\"Upload successful. Details:\"<\/span>, result);\n    console<\/span>.log(\"Transformed video URL:\"<\/span>, result.eager[0<\/span>].secure_url);\n    console<\/span>.log(\"Thumbnail URLs:\"<\/span>, result.eager[1<\/span>].secure_url);\n\n    return<\/span> result;\n  } catch<\/span> (error) {\n    console<\/span>.error(\"Upload failed:\"<\/span>, error);\n  }\n}\n\n\/\/ Usage<\/span>\nconst<\/span> videoPath = '.\/path\/to\/your\/video.mp4'<\/span>;\nuploadVideoWithTransformations(videoPath);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Each step in the pipeline is represented by an item in the eager array. Keep in mind they\u2019re applied in order. As we touched on in the beginning, there are use cases where the order of the transformations can be important.<\/p>\n\n\n\n
    Our pipeline consists of two steps:<\/p>\n\n\n\n
      \n
    1. Adjust quality and bitrate, change format, and apply codec.<\/li>\n\n\n\n
    2. Generate thumbnails.<\/li>\n<\/ol>\n\n\n\n
      Since the processing is happening asynchronously, we can provide a webhook URL to eager_notification_url<\/code>, which will be called to notify us once our transformations have been completed.<\/p>\n\n\n\n
      Example 2: Transforming Video to GIF<\/strong><\/h2>\n\n\n\n
      For this example, we want to trim, resize, adjust quality, add an effect, and convert a video to a GIF.<\/p>\n\n\n\n
      Delivery and Transformation Type<\/strong><\/h3>\n\n\n\n
      This example takes a different direction by using a lazy transformation. We\u2019ll 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\u2019t 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.<\/p>\n\n\n\n
      Here are the URLs for the original and transformed videos:<\/p>\n\n\n\n