how to generate video thumbnail in node.js?

Question

I am building an app with node.js, I successfully uploaded the video, but I need to generate a video thumbnail for it. Currently I use node exec to execute a system command of ffmpeg to make the thumbnail.

   exec("C:/ffmpeg/bin/ffmpeg -i Video/" + Name  + " -ss 00:01:00.00 -r 1 -an -vframes 1 -f mjpeg Video/" + Name  + ".jpg")

This code is coming from a tutorial from http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-resumable-video-uploade-in-node-js/

the code above did generate a jpg file but it's not a thumbnail but a video screen shot, I wonder is there any other method to generate video thumbnail, or how to exec the ffmpeg command to make a real thumbnail (resized), and I prefer png file.

Eutectoid

Answer 1

Resize by adding a -s widthxheight option to your command.

Curtis

well it works, but is this the only way to do this,i mean do i really have to use exec, is there a node module to handle this problem – Eutectoid

Answer 2

Reference to GitHub fluent-ffmpeg project.

Repeating example from original StackOverflow answer:

var proc = new ffmpeg('/path/to/your_movie.avi')
  .takeScreenshots({
      count: 1,
      timemarks: [ '600' ] // number of seconds
    }, '/path/to/thumbnail/folder', function(err) {
    console.log('screenshots were saved')
  });

Tomtit

what is count:1 here ?? – Nickinickie

quoting the documentation: "count: specifies how many thumbnails to generate. When using this option, thumbnails are generated at regular intervals in the video (for example, when requesting 3 thumbnails, at 25%, 50% and 75% of the video length). count is ignored when timemarks or timestamps is specified." – Tomtit

can that /path/to/your_movie.avi be a URL? – Confirmand

Answer 3

There is a node module for this: video-thumb

It basically just wraps a call to exec ffmpeg

Trefler

Answer 4

I recommend using https://www.npmjs.com/package/fluent-ffmpeg to call ffmpeg from Node.js

Comedietta

Answer 5

Instead I would recommend using thumbsupply. In addition to provide you with thumbnails, it caches them to improve performance significantly.

npm install --save thumbsupply

After installing the module, you can use it in a following way.

const thumbsupply = require('thumbsupply')("com.example.application");

thumbsupply.generateThumbnail('some-video.mp4')
.then(thumb => {
    // serve thumbnail
})

Muriel

keep an eye on the install command since thumbsupply has 3 'p' – Plexor

Answer 6

Using media-thumbnail, you can easily generate thumbnails from your videos. The module basically wraps the ffmpeg thumbnail functionality.

const mt = require('media-thumbnail')

mt.forVideo(
  './path/to/video.mp4',
  './path/to/thumbnail.png', {
    width: 200
  })
  .then(() => console.log('Success'), err => console.error(err)) 

You can also create thumbnails from your images using this package.

Tubate

Answer 7

import * as thumbsupply from 'thumbsupply'; 
     const thumbNail = await thumbsupply.default.generateThumbnail("video(720p).mp4", {
        size: thumbsupply.default.ThumbSize.LARGE,
        timestamp: '10%',
        forceCreate: true,
        mimetype: 'video/mp4',
      });

Airdrome

Answer 8

2024 update:

function getVideoPreviewImage(file) {
return new Promise((resolve, reject) => {
    let fileNames = [];

    ffmpeg(file.path)
        .on('filenames', function (filenames) {
            logger.info('screenshots are ' + filenames.join(', '));

            fileNames = filenames;
        })
        .on('end', function () {
            resolve(`${os.tmpdir()}/${fileNames[0]}`);
        })
        .on('error', function (err) {
            reject(err);
        })
        .takeScreenshots({ count: 1, timemarks: ['00:00:02.000'], size: '1280x720' }, os.tmpdir());
});

}

Sutherland

Answer 9

app.post('/convert', upload.any(), (req, res) => {
    console.log("calling", req.files)
    let thumbNailName = req.files[0].filename.split('.')
    var gm = require('gm');

    gm('./src/Upload/'+req.files[0].filename)// get pdf file from storage folder
    .thumb(
        50, // Width
        50, // Height
        './src/thumbnail/'+thumbNailName[0]+'.png', // Output file name
        80, // Quality from 0 to 100
        function (error, stdout, stderr, command) {
            if (!error) {
                console.log("processing");
            } else {
                console.log("error")
            }
        }
    );
})

Ingress