Node.js Fluent FFMPEG Project to Generate Video Thumbnail as PNG Image at Certain Time in Express

Welcome folks today in this blog post we will be generating video thumbnail as png image using fluent-ffmpeg library at certain time in express.js. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new node.js project as shown below

npm init -y

npm i express

npm i fluent-ffmpeg

npm i multer

Directory Structure of the App

You can see the final directory structure of the app as shown below

As you can see in the above screenshot you need to create the uploads directory where we will be storing all the uploaded video files using the multer library. And now we need to make the index.js file which will be the starting point of the application as shown below

index.js

const ffmpeg = require('fluent-ffmpeg');
const multer = require('multer');
const express = require('express')

const app = express()

app.use(express.static('uploads'))

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads'); // Temporary storage location for uploaded files
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  }
});
const upload = multer({ storage });

app.get('/',(req,res) => {
    res.sendFile(__dirname + "/index.html")
})

app.listen(5000,() => {
    console.log("App is listening on port 5000")
})

const ffmpeg = require('fluent-ffmpeg');

const multer = require('multer');

const express = require('express')

const app = express()

app.use(express.static('uploads'))

const storage = multer.diskStorage({

destination: (req, file, cb) => {

cb(null, 'uploads'); // Temporary storage location for uploaded files

filename: (req, file, cb) => {

cb(null, file.originalname);

}

});

const upload = multer({ storage });

app.get('/',(req,res) => {

res.sendFile(__dirname + "/index.html")

})

app.listen(5000,() => {

console.log("App is listening on port 5000")

})

As you can see we have imported all the libraries at the very top and then we are setting the uploads directory as static using the static method in express. And then we will be configuring the multer storage engine using the diskStorage() method. And inside it we are providing the destination and filename property of the uploaded file. And then we are showing the index.html file when the user goes to the / route as shown above. Now we need to create the index.html file inside the root directory and copy paste the below code

index.html

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="video" />
    <label for="time">Time:</label>
    <input type="text" name="time" value="00:00:05" placeholder="hh:mm:ss" />
    <button type="submit">Generate thumbnail</button>
  </form>

<button type="submit">Generate thumbnail</button>

</form>

As you can see in the above html5 form we have the simple input field where we allow the user to upload the video and then we have the input field for getting time for the thumbnail. And then we have the simple button to submit the form. As you can see we are submitting the form to the /upload route and we are using the post request.

Now we need to define the /upload post request to allow the user to upload the video and then generate the thumbnail using the fluent-ffmpeg library as shown below

app.post('/upload', upload.single('video'), (req, res) => {
  const time = req.body.time; // Get the time from the form submission
  const filePath = req.file.path;
  const outputPath = Date.now() + "thumbnail.png";

  ffmpeg(filePath)
    .seekInput(time)
    .frames(1)
    .output(outputPath)
    .on('end', () => {
      // Send the thumbnail image as a download
      res.download(outputPath);
    })
    .run();
});

app.post('/upload', upload.single('video'), (req, res) => {

const time = req.body.time; // Get the time from the form submission

const filePath = req.file.path;

const outputPath = Date.now() + "thumbnail.png";

ffmpeg(filePath)

.seekInput(time)

.frames(1)

.output(outputPath)

.on('end', () => {

// Send the thumbnail image as a download

res.download(outputPath);

})

.run();

});

As you can see we are including the multer middleware to upload the video file first and then we use the fluent-ffmpeg constructor and then we are passing the uploaded path of the video file. And then we are using the frames method to take the screenshot and then we are downloading the screenshot as a png image file in the browser.

Now if we run the node.js app as shown below

node index.js