Generate Thumbnails from Videos in Node.js Using fluent-ffmpeg

Creating a thumbnail from a video is a great way to showcase content previews. In this guide, I’ll walk you through how to generate thumbnails from a video file using Node.js and fluent-ffmpeg.

Prerequisites

Before you begin, ensure you have Node.js installed on your system. You also need to have FFmpeg installed. You can download FFmpeg from FFmpeg.org and follow the installation instructions for your OS.

Step 1: Setup Your Project

First, create a new directory for your project and initialize it with npm:

mkdir video-thumbnail-generator
cd video-thumbnail-generator
npm init -y

Step 2: Install Required Dependencies

Install the required Node.js packages:

npm install fluent-ffmpeg uuid

• fluent-ffmpeg: A library for manipulating videos using FFmpeg.
• uuid: A library for generating unique IDs, which we will use for naming the thumbnail files.

Step 3: Create the Thumbnail Generator Script

Create a file called index.js and add the following code:

const ffmpeg = require('fluent-ffmpeg');
const fs = require('fs');
const { v4: uuidv4 } = require('uuid');

// Define the input video path (can be a local file or a URL)
const inputPath = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4';

// Define the output folder path for the thumbnails
const outputPath = `${__dirname}/thumbnail`;

// Create the output folder if it doesn't exist
if (!fs.existsSync(outputPath)) {
  fs.mkdirSync(outputPath);
}

// Generate the thumbnail
ffmpeg(inputPath)
  .screenshots({
    timestamps: [1], // Capture a thumbnail at 1 second into the video
    filename: `thumbnail-${uuidv4()}.jpg`, // Generate a unique filename
    folder: outputPath,
  })
  .on('end', () => {
    console.log('Thumbnail generated successfully.');
  })
  .on('error', (err) => {
    console.error('Error generating thumbnail:', err);
  });

Explanation of the Code

1. Input Video: The inputPath can be a local video file or a URL pointing to a video file.
2. Output Path: Thumbnails will be saved in the thumbnail folder. If the folder doesn't exist, it's created automatically.
3. Thumbnail Generation:

• timestamps: [1]: A thumbnail is captured 1 second into the video. You can adjust the value to capture at a different time.
• filename: : Uses uuidv4() to generate a unique name for each thumbnail.

4. Error Handling: The .on('error') method handles any errors during the thumbnail generation process.

Step 4: Run the Script

Run the script with Node.js:

node index.js

If everything is set up correctly, you should see a message confirming that the thumbnail was generated successfully. The generated thumbnail will be saved in the specified output folder.

Conclusion

Generating video thumbnails in Node.js using fluent-ffmpeg is simple and efficient. This method allows you to automate thumbnail creation, making it ideal for video processing applications.

Feel free to tweak the code for different timestamps, multiple thumbnails, or other video file formats. Happy coding!