0

I'm trying to extract frames from a video, and it's working fine. But when i try to extract videos longer than 1 minutes i got

RangeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Out of memory at ImageData creation

i've extracted 1100 frames just fine, that's around 1 minute video with 24fps. Is there any limit when extracting frames from a video at once?

here's how i extracted those frames

this.video.getFrames(this.file, this.totalFrame, VideoToFramesMethod.totalFrames).then((frames) => {
  frames.forEach((frame, i) => {
    let img = document.createElement('img');
    var canvas = document.createElement('canvas');
    canvas.width = frame.width;
    canvas.height = frame.height;
    canvas.getContext('2d').putImageData(frame, 0, 0);
    img.src = canvas.toDataURL('image/jpeg');
    this.listOfImages.push({
      id: i,
      name: 'Frame ' + i,
      src: img.src
    });
  });
  this.addCheckboxes();
  this.loading = false;
  this.playVideo = true;
  this.poster = this.listOfImages[0];
});

EDIT

What i need from images that have been extracted is, later the user can draw a points on to the images to determine some object, i use fabricjs for this, but i don't manipulate the images just add new image (which is fabricjs canvas) on top of that image. you can try it here https://bory-cam.web.app

And after that, my algorithm can track the movement of the object inside the points. Also i need to able to show each frame. My first is works, but it's too expensive to memory. So i tried this solution but it really slow. I wanna try this solution using webcodecs but i can't make it work with angular

naoval luthfi
  • 703
  • 7
  • 20
  • Probably constrained by contiguous memory. Do you really need two arrays of images? With 1100+ frames each? – Ouroborus Nov 23 '21 at 13:26
  • wait, do u mean `listOfImages` and `img` ? now i thought i must be stupid xD – naoval luthfi Nov 23 '21 at 14:45
  • `frames` and `listOfImages`. But, yeah, you don't need `img` as you only use it to briefly store the data url. In general, with this code, the memory requirements will be somewhere around the video file size plus ~3.3 * (frame image file size) * (number of frames). – Ouroborus Nov 23 '21 at 20:00
  • What is `this.video.getFrames` that's where your error comes from, that's what you need to show to us. But from the error it's obvious it grabs ImageData from a canvas, and that's like the worst way to store a canvas image. You could try to store ImageBitmaps instead, though these may also blow your memory after some time. An other solution would be to generate Blobs which could be stored on the HDD (in Chrome), and you could even force that to happen by storing them in IndexedDB. – Kaiido Dec 01 '21 at 01:07
  • i use this code to extracting the frames, https://github.com/bertyhell/video-to-frames/blob/master/index.ts – naoval luthfi Dec 01 '21 at 01:15
  • https://stackoverflow.com/questions/32699721/javascript-extract-video-frames-reliably/32708998?noredirect=1#:~:text=The%20most%20promising%20and%20powerfull%20one%2C%20but%20still%20under%20development%2C%20with%20a%20lot%20of%20restrictions did this is the best solution for my case? i wanted to extract up to 3 minutes video – naoval luthfi Dec 01 '21 at 01:20
  • [edit] the question so that it contains all the necessary information. And yes, the solutions there are currently the "best" ones to **extract** video frames I know (I wouldn't hide a better solution in my own answer if I knew of one). However your issue is not really at the extracting point, your issue is at storing these still images. So you'd also need to explain to us exactly what you plan to do with these ~ 5K still images, the "best" way to store these will largely depend on that use. – Kaiido Dec 01 '21 at 05:38
  • yes, i think yours is the best. but i don't know it doesn't work on typescript, i've tried using vanilla and it is working – naoval luthfi Dec 01 '21 at 06:04

0 Answers0