OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Using byte range requests get image from video

  • Thread starter Thread starter medreres
  • Start date Start date
M

medreres

Guest
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

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");

<p>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 <code>ffmpeg</code> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests" rel="nofollow noreferrer">Byte Range Requests HTTP approach</a> 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 <a href="https://chatgpt.com/share/18a048ed-2728-426c-80c2-aaad472d65c8" rel="nofollow noreferrer">query</a>, 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</p>
<pre><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");
</code></pre>
 

Latest posts

Top