CODEWITHSUNDEEP
javascriptnode.jsffmpeg
Jeremy
Jeremy

Reputation: 119

Generate thumbnail VTT files with coordinates with nodejs

I am looking to generate thumbnail VTT files with coordinates with nodejs.

I used this to generate the thumbnails:

ffmpeg -i 1.mp4 -filter_complex "select='not(mod(n,190))',scale=160:90,tile=5x5" -vsync vfr -qscale:v 5 -an thumbs-%02d.jpg

this generate multiple 5x5 sprite, each single thumbnail is for 8 second. so I am looking for something like this:

WEBVTT 
00:00.000 --> 00:08.000
/assets/thumbnails-01.jpg#xywh=0,0,160,90

00:09.000 --> 00:16.000
/assets/thumbnails-01.jpg#xywh=160,0,320,90

...

thanks

Upvotes: 2

Views: 751

Answers (1)

binoy638
binoy638

Reputation: 141

I know this is late, but for others here's how you do it.

import fs from 'fs';
import moment from 'moment';

const thumbnailPrefix = 'thumbs';

const width = 160; // width of each thumbnail
const height = 90; // height of each thumbnail

const duration = 120; // Total duration of the video in seconds
const interval = 8; // Interval between thumbnails in seconds

const col = 5; // Number of thumbnails per row
const row = 5; // Number of thumbnails per column

let thumbOutput = 'WEBVTT\n\n';
const startTime = moment('00:00:00', 'HH:mm:ss.SSS');
const endTime = moment('00:00:00', 'HH:mm:ss.SSS').add(interval, 'seconds');

const totalImages = Math.floor(duration / interval); // Total no of thumbnails

const totalSpirits = Math.ceil(duration / interval / (row * col)); // Total no of spirits

// This loop is for generating multiple 5x5 sprite, you can remove this if you want all thumbnails in a single sprite
for (let k = 0; k < totalSpirits; k++) {
  for (let i = 0; i < row; i++) {
    for (let j = 0; j < col; j++) {
      const currentImageCount = k * row * col + i * col + j;
      if (currentImageCount > totalImages) {
        break;
      }
      thumbOutput += `${startTime.format('HH:mm:ss.SSS')} --> ${endTime.format('HH:mm:ss.SSS')}\n`;

      thumbOutput += `${thumbnailPrefix}-${k + 1 < 10 ? '0' : ''}${k + 1}.jpg#xywh=${j * width},${
        i * height
      },${width},${height}\n\n`;

      startTime.add(interval, 'seconds');
      endTime.add(interval, 'seconds');
    }
  }
}

fs.writeFileSync('./output.vtt', thumbOutput);

I also created this small npm package which let me easily create thumbnail sprites and it's vtt file.

Upvotes: 3

Related Questions