1

I am building a React application where I have to call some external API to get images that represent frames of a video, so, I get one image per request and a video has up to 1000 frames, therefore my current approach is that I request an image, store it in "Frame" component's state, and render it, get the next image, update the state and so on. I use react-konva to render the image because I also need to draw some objects on top of it. (e.g. I get images of faces and I draw boxes around the eyes using some data I got from another API)

This approach does not seem the right way to go as some images do not get the time to be rendered, also the application keeps requesting the images from the API and only very few images are cached.

  • Is there a better approach to do this? Knowing that I do not have control over the mentioned API.
  • Is there any NPM packages that could help with that?
Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
M.Alsioufi
  • 565
  • 2
  • 7
  • 16

1 Answers1

0

Such an approach is VERY inefficient and may consume a lot of network and memory.

The only valid solution I see is to preload all images before showing the "video" or do a chunk download part by part. Like download 100 images -> show video -> pause -> download next 100 images -> etc.

lavrton
  • 18,973
  • 4
  • 30
  • 63