Generate video thumbnails using javascript

Question

I am trying to create thumbnail of a video using javascript. I need to create thumbnails from video on video load and show it in a canvas. the sample code is given below. Any help would be appreciated.

https://codepen.io/jeffin417/pen/vJxagb?editors=1010

var videoId = "video";
var scaleFactor = 0.25;
var snapshots = [];

document.getElementById(videoId).addEventListener(
  "loadeddata",
  function() {
    for (var jk = 0; jk < 60; jk++) {
      document.getElementById(videoId).currentTime = jk;
      var canvas = capture(document.getElementById(videoId), scaleFactor);
      canvas.onclick = function() {
        window.open(this.toDataURL());
      };
      snapshots.unshift(canvas);
      output.innerHTML = "";
    }
    output.appendChild(snapshots[0]);
  },
  false
);

function capture(video, scaleFactor) {
  if (scaleFactor === null) {
    scaleFactor = 1;
  }
  var w = video.videoWidth * scaleFactor;
  var h = video.videoHeight * scaleFactor;
  var canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(video, 0, 0, w, h);
  return canvas;
}

function shoot() {
  var video = document.getElementById(videoId);
  var output = document.getElementById("output");
  var canvas = capture(video, scaleFactor);
  canvas.onclick = function() {
    window.open(this.toDataURL());
  };
  snapshots.unshift(canvas);
  output.innerHTML = "";
  for (var i = 0; i < 4; i++) {
    output.appendChild(snapshots[i]);
  }
}

Take a look [here](https://stackoverflow.com/questions/19175174/capture-frames-from-video-with-html5-and-javascript) and this [fiddle](https://jsfiddle.net/gdp00x2s/293/). Is this what are you looking for? — Stanislav Kvitash, Aug 08 '17 at 13:36
You basically have everything you need. What is the problem? — pawel, Aug 08 '17 at 13:38
Hey thanks buddy , That was exactly what i was looking for , may be i should have searched for mroe keywords , please make yours as an answer I will accept it , — Jeffin, Aug 08 '17 at 13:38
@pawel I was trying to set current time and capture the video , but asynchronous doesnt wwork , now I have an answer — Jeffin, Aug 08 '17 at 13:39
Yes exactly . I Thing I should have listened for "seeked" someone make it as an asnwer — Jeffin, Aug 08 '17 at 14:12

score 0 · Answer 1 · answered Aug 08 '17 at 13:24

0

for generating thumbs you can give a try to an open source library ffmpeg

which is smooth and easiest way of generating thumbs.

sample command

ffmpeg -i demo_dir/input.flv -ss 00:00:14.435 -vframes 1 demo_dir/out.png

also you can follow this link for better understanding

https://trac.ffmpeg.org/wiki/Create%20a%20thumbnail%20image%20every%20X%20seconds%20of%20the%20video

answered Aug 08 '17 at 13:24

Awais fiaz

351
1
5
20

Hi , I will be using random generating . so I dont think i should be using ffmpeg , I have already tried this and it slows down the process – Jeffin Aug 08 '17 at 13:24

score 0 · Answer 2 · answered Mar 18 '20 at 07:07

You can get the code from this: https://github.com/wangweiwei/video-metadata-thumbnails or use it like this:

import { getMetadata, getThumbnails } from 'video-metadata-thumbnails';

const thumbnails = await getThumbnails(blob, {
  quality: 0.6
});
console.log('Thumbnails: ', thumbnails);

Here the Example

Generate video thumbnails using javascript

2 Answers2