Color grade your videos using FFmpeg and Editframe

Color grading is a post-production process that involves changing the color palette of a video to give the final product a specific aesthetic touch, or “look and feel.” Color grading can have a major impact on the overall impact of video content, and influence the way a viewer receives the video. Additionally, color grading can even fix problems that occurred when the video was captured, such as poor lighting conditions or overexposure.

This tutorial will explore two methods of programmatically color grading videos—FFmpeg, and Editframe. FFmpeg is a free and open-source collection of libraries and programs that developers use to handle various tasks around recording, editing, and streaming video. Color grading your videos is one application (among many) for this wonderful and powerful tool. In the steps below, we’ll walk through using FFmpeg to add brightness, saturation, and contrast to your videos.

Although it is highly versatille, FFmpeg might not always be the best solution for engineering teams looking to integrate these video editing tasks into their software development workflows. That’s why in addition to walking through the color grading process with FFmpeg, this tutorial will also explore an alternative method using Editframe’s simple APIs.

Whether you use FFmpeg or Editframe, this guide should help you quickly add a little more brightness, contrast, or saturation to your videos.

Let’s get started!

Part 1: Using FFmpeg

First, we’ll walk through the process of adjusting saturation, brightness, and contrast with FFmpeg.

Required Tools

Sample video files: provided by pexels.com
FFmpeg: (You’ll need to install FFmpeg and set up the appropriate environment variables before beginning this tutorial)

Adjust saturation with FFmpeg

Here is the full FFmpeg command to modify the saturation of a video:

ffmpeg -i  video.mp4 -vf eq=saturation=3.0  -c:a copy saturation.mp4

Let’s break this down and see what each part of the command is doing.

In this line, we import the video file (video.mp4):

ffmpeg -i  video.mp4

Here, we’ll add saturation as a video filter (-vf). The value must be a float in the range 0.0 to 3.0. The default value is "1":

vf eq=saturation=3.0

In the command below, we’re copying streams into the saturation.mp4 video file:

c:a copy saturation.mp4

Adjust brightness with FFmpeg

Here is the full FFmpeg command that modifies the brightness of the video:

ffmpeg -i  video.mp4 -vf eq=brightness=0.5   -c:a copy brightness.mp4

Let’s break the brightness command down:

In this line, we will import a video file (video.mp4).
ffmpeg -i video.mp4
Here, we will add brightness as a video filter (-vf). The value must be a float value in the range -1.0 to 1.0. The default value is "0".
vf eq=brightness=0.5
In this line, we will copy the video streams intro brightness.mp4 video file:
c:a copy brightness.mp4

Adjust contrast with FFmpeg

Here is the FFmpeg command that will modify the contrast of the video:

ffmpeg -i  video.mp4 -vf eq=contrast=1000.0  -c:a copy contrast.mp4

Once again, let’s dissect:

In this line, we will import a video file (video.mp4).
ffmpeg -i video.mp4
Here, we are adding contrast as a video filter (-vf). The value must be a float in the range -1000.0 to 1000.0. The default value is "1".
vf eq=contrast=1000.0
In this line, we will copy the streams into the contrast.mp4 video file.
c:a copy contrast.mp4

Here are the output videos from the FFmpeg command for contrast, saturation, and brightness:

contrast.mp4

saturation.mp4

brightness.mp4

Note: The commands above can be combined to add contrast, brightness, and saturation in a single command.

Part 2: Using Editframe

Now we’ll perform the same color grading operations again, only this time we will use Editframe instead of FFmpeg.

Required tools

Node.js installed on your machine
Editframe API Token (create an account from this link)

Set up a local environment

Create a local project folder:
mkdir editframe-color-grading
Initialize a Node.js project
yarn init -y
Install the Editframe Node.js SDK
yarn add @editframe/editframe-js
Create index.js file to apply video effects (saturation, brightness, and contrast)
touch index.js
Paste the following code in index.js:_

const { Editframe } = require("@editframe/editframe-js");
const path = require("path");
(async () => {
  const editframe = new Editframe({
    token: process.env.EDITFRAME_TOKEN,
  });
const composition = await editframe.videos.new({
    backgroundColor: "#000",
    dimensions: {
      height: 1080,
      width: 1920,
    },
  });

  const full = path.join(__dirname, "video.mp4");
  console.log(full);
  const videoLayer = await composition.addVideo(
    // file
    full,
    // config
    {
      position: {
        x: "center",
        y: "center",
      },
      size: {
        format: "fit",
      },
    }
  );
  // await composition.addFilter({ name: "contrast", options: { contrast: 1000 } });
  // await composition.addFilter({ name: "brightness", options: { brightness: 0.5 } });
  
  await composition.addFilter({
    name: "saturation",
    options: {
      saturation: 3.0,
    },
  });
  
  await composition.addSequence([videoLayer]);
  const video = await composition.encodeSync();
  console.log(video);
})();

Output your video files

Run the video script
node index

editframe-saturation.mp4

editframe-brightness.mp4

editframe-contrast.mp4

Conclusion

Here we saw how to adjust a video’s brightness, saturation, and contrast using two tools–FFmpeg, and Editframe. These processes are just a fraction of the video editing, composition, and delivery tasks you can accomplish with Editframe, however. Visit the Editframe API docs to learn how you can add transitions, filter, trim videos, and do much more.