DEV Community

Lakshyaraj Dash
Lakshyaraj Dash

Posted on

How to generate thumbnails from video ?

In this tutorial, you will learn how to generate thumbnails from a video file.

Warning!!! Please use small video files only, if your machine is low-end.

We will primarily use the fluent-ffmpeg library to perform the action.

For this, download the ffmpeg library from the official site of ffmpeg https://ffmpeg.org/.

Extract the zip and add the bin folder to your environment variables path.


Steps:

  1. Create a folder for the conversion, name it as video-thumbnail-generator .
  1. Initialize it as a nodejs package.
$ npm init -y
Enter fullscreen mode Exit fullscreen mode
  1. Install the fluent ffmpeg library
$ npm install fluent-ffmpeg
Enter fullscreen mode Exit fullscreen mode
  1. Import the library
const ffmpeg = require('fluent-ffmpeg')
Enter fullscreen mode Exit fullscreen mode
  1. The first argument of the ffmpeg will be the path to the video file
ffmpeg('path_to_videofile')
Enter fullscreen mode Exit fullscreen mode
  1. Take screenshot and save to the folder (Note: Multiple screenshots can be taken at a time, but we will take only 1)
ffmpeg('path_to_videofile')
  .screenshots({
     count: 1,
     filename: 'thumbnail-%s.png',
     folder: 'output_path/'
  })
Enter fullscreen mode Exit fullscreen mode

Entire code

const ffmpeg = require('fluent-ffmpeg')
ffmpeg('path_to_videofile')
  .on('filenames', (filenames) => {
     console.log(filenames.join(', ') // Display the filenames to be generated
  })
  .on('end', () => {
     console.log('Screenshots taken!');
  })
  .screenshots({
     count: 1,
     filename: 'thumbnail-%s.png',
     folder: 'output_path/'
  })
Enter fullscreen mode Exit fullscreen mode

Top comments (0)