How to Extract an Image from a Video using Node.js?

Sometimes it is useful to capture a single frame of a video, i.e., take a screenshot of a video at a certain point in time. An example would be when creating video thumbnails or still previews. Here's how to do it with Node.js using just a few lines of JavaScript:

Input Code

const Creatomate = require('creatomate');
const client = new Creatomate.Client('Your API Key');

client.render({
  source: new Creatomate.Source({
    outputFormat: 'jpg',
    snapshotTime: 1.94,
    elements: [
      new Creatomate.Video({
        source: 'https://cdn.creatomate.com/demo/bird.mp4',
      }),
    ],
  }),
}).then((renders) => {
  console.log(renders);
});

Copy to clipboard 📋

Output Image

How it works: As a first step, install the Creatomate package from NPM, which allows you to perform video operations directly from your Node.js code. You can then define a composition containing a single video element, and use the "source" property to point to a video URL. By default, the resulting image will have the same resolution as the video. However, if you prefer a different size for the image, you can use the "width" and "height" properties. For an example, see the related articles below.

To grab a JPEG image from the video, set the "output_format" property to "jpg". This will capture a frame at the time specified by "snapshot_time," which is set to 1.94 seconds from the beginning of the video. If you want to extract a frame as a PNG instead, you can use the "png" output format.

In addition, you might want to include an overlay text or logo in the output image. To accomplish this, you can refer to any of the examples below, or you can use the online video editor to create your own custom overlay.