I am trying to make a clone of Youtube and doing it from the tutorial, where the guy is manually creating thumbnail images by using ffmpeg tool to get pictures. That does not sound like an ideal approach to me as if it were a real project, the server would get overloaded real quick as we needed to retrieve it to the server first, generate images and pass it to a bucket then.
I was thinking that I could use Byte Range Requests HTTP approach where I could specify which range I require and then retrieve an image from that part of the video. It’s the way element works in HTML so I figured I could do something similar. I did some googling and didn’t find useful info so ChatGPT tried to assist me here.
Here is my query, but it didn’t succeed. I am 100% sure I am doing something wrong as we can’t just take blob from the response and magically make an image out of it, but I don’t know where to begin.
Here is the code

   const response = await fetch(`${process.env.PUBLIC_URL}/Video.mp4`, {
    method: "HEAD",
    headers: {
      Range: "bytes=0-60824663",
    },
  });

  console.log("response", response.headers.get("Content-Length"));

  const blob = await response.blob();

  const imageUrl = URL.createObjectURL(blob);

  const testImage = document.querySelector(".test-image") as HTMLImageElement;
  testImage.src = imageUrl;

  console.log("imageUrl", imageUrl + ".jpg");