Tutorial: How to create thumbnails

[pglowacky]

A frequently requested feature for VOD is thumbnail generation. Although we don't currently offer anything out of the box, projects like Lenstube have figured out how to build this feature.

Here's Sasi's code:
https://github.com/lenstube-xyz/lenstube/blob/9cc4645e8cb8ddd1b8280bdb4b04604a8cdbdf71/packages/utils/functions/generateVideoThumbnails.ts. Heads up: Sasi stores the video in memory so it's likely not to work with larger files.

Here's a Fiddle: https://jsfiddle.net/giu_do/e98tffu6/

We'd like a tutorial on building an application that uses thumbnails, using either the logic Sasi has used or some other open-sourced project. The tutorial should include a sample application that has the thumbnail functionality built in.

[LintonAchmad]

I'm also creating a video platform on lens protocol. This is my implementation of creating thumbnails -

`createThumbnail() {
let ctx = this.$refs.thumbnail.getContext("2d");
this.$refs.thumbnail.width = this.$refs.mediaVideo.videoWidth;
this.$refs.thumbnail.height = this.$refs.mediaVideo.videoHeight;

  ctx.drawImage(
    this.$refs.mediaVideo,
    0,
    0,
    this.$refs.mediaVideo.videoWidth,
    this.$refs.mediaVideo.videoHeight
  );

  this.$refs.thumbnail.toBlob(
    (blob) => {
      this.thumbnailImage = new File([blob], "thumbail.webp", {
        type: "image/webp",
        lastModified: new Date().getTime(),
      });
    },
    "image/webp",
    0.7
  );

}`

I prefer webp format for better compression etc.