Building Whinst Part 20: Adding video thumbnail creation functionality

In the last article, I talked about how I set up functionality that allows videos to be uploaded and displayed in the Whinst web app. In this article, I'll walk you through how I added functionality that allows users to select a video thumbnail from the frames of the video they uploaded.

Creating video thumbnails🖼

The two most common ways of adding/creating video thumbnails are uploading a thumbnail image from your library or selecting an image from the frames of the video you uploaded. In the Whinst web app, I decided to go with selecting image frames from an uploaded video for now then later I might add uploading thumbnail images from a file library.

To add video thumbnail creation functionality I first had to figure out how to capture video frames from an uploaded video. I searched for some packages that did this but didn't have much luck🥲. I then learned a little about how I could create my own using the canvas html element which is used to draw graphics. This paired with some open source code I found in the depths of the internet that I modified a little😂, I was able to come up with something that captured video frames from an uploaded video. The code below shows how to capture the frames from an uploaded video via the use of the function that takes as parameters the uploaded video URL, the total number of frames and the type of method of extracting these frames.

  const frames = await VideoToFrames.getFrames(
                fileUrl,
                30,
                VideoToFramesMethod.totalFrames
              );

The next step after these frames are captured and displayed is adding functionality that allows a user to select a frame of their choice and add it to the database to make it the thumbnail of the video they uploaded. I did this by simply using the useState function which stores the selected image in state and allows it to be sent to the backend with other information like the video file itself. After these frames are captured and one is selected they are still in Base64 format, before sending them to the backend they get a file name and have the Base64 part cut out as shown in the code below.

const now = new Date().toDateString();
const convertfromBase64=(props:string){
  const file_name = `${now}-${someNewFileName}.png`
  const coverted_file = props.split(';base64,').pop()
}

In the backend, the frame image is stored in the media folder and the filename is stored in the database along with the actual video filename. This thumbnail is then displayed on the front end via an API get link that has the media folder path and name of the image. With this major piece of functionality added I've moved a big step closer to completing the Whinst web app. Thanks for reading🙏.