Trying to extract frames from a video using Angular has been quite challenging for me. While browsing through Stack Overflow, I came across this helpful post here. I attempted to implement the first solution suggested in the post, but unfortunately, I was unable to successfully extract any frame and I'm still unsure why. Continuing my research on the topic, I stumbled upon the resource videotoframes, which already has a working version available. After some troubleshooting, I finally managed to extract frames from the video and display them on a canvas.
https://i.sstatic.net/8tXTh.jpg
The challenge now lies in specifying how many frames I would like to extract from the video. Here's what I attempted:
loadImages() {
this.loading = true;
this.video.getFrames('/assets/ForBiggerBlazes.mp4', 375, VideoToFramesMethod.totalFrames).then((frames) => {
console.log(frames);
frames.forEach((frame) => {
var canvas = document.createElement('canvas');
canvas.width = frame.width;
canvas.height = frame.height;
canvas.getContext('2d').putImageData(frame, 0, 0);
document.getElementsByTagName('div')[0].appendChild(canvas);
});
});
}
The number 375 that I used is just an estimation of the total frames in my video. Is there a way to accurately determine the exact number of frames a video contains upon upload?