< see other video frame extraction and scrubbing experiments
Video Frame Extract Tool (experimental)
from ghosh.dev
Upload a video to extract frames from it. Extracted frames are downloaded automatically as a ZIP file with each frame stored as a JPEG image (85% quality).
This does not upload the video to any server. All processing is done locally on your browser.
The process is simple: an uploaded video is taken and passed on to a hidden HTML video element that can play it. Based on number of frames to be extracted, the video is paused at each suitable interval and then its pixels are rendered on a hidden HTML canvas element to extract out the image bitmap data for the paused frame. This means the so called frames are an outcome of interpolation and video playback and not truly "frame accurate" from a purist's perspective. However, this still works out fairly well for the human eye. Each such extracted frame is then converted into a blob and all of that is eventually zipped together and downloaded for you.
For seeing a similar mechanism in action which first extracts out some frames from a video using the same mechanism and then uses scroll input to scrub and animate through them, check out the video-seek-unpack-frames-canvas demo.
Most of this code is written for modern browsers and so far only tested on newer versions of Chrome (v78+). I haven't (yet) got the time to test it across all browsers and provide the suitable polyfills where required; my apologies if it breaks on an older or different browser :( Goes without saying that this is also not optimised for handling extraction of a very large number of frames from a lengthy video as it handles everything in memory at one go for now. A couple of thousands of frames for a HD video should be fine.
Additional credits go to JSZip and FileSaver.js for helping enable in-browser zip file generation and downloads so easily.