How to parse video into frames using JavaScript/Canvas?

Question

JavaScript

Actually a subject.
It is necessary to break up (and process frame by frame) the video stream and not lose a single frame. Required in the browser. In different browsers.
I have no idea which way to dig, frames skip, requestAnimationFrame is not supported by all browsers.
Thanks in advance.

Answer 1

You can try to make a "high-frequency" timer using this gist.github.com/2802407 or even better, make a timer in the worker based on setInterval, which will send to the postMessage window without timer lags.
You can also try the play() pause() hack: play(), 20ms timeout and pause(), read a frame.
However, neither method is immune to long cycles over 1000/FPS. The most reliable way is to decode the video in the worker binary :(
The number of frames played can only be found at FF developer.mozilla.org/en-US/docs/DOM/HTMLVideoElement

Answer 2

Rendering video in canvas:
html5doctor.com/video-canvas-magic/
Next, on each frame, insert the image (toDataURL) into the DOM and send the form to the page that will save it locally (if you want to play with these pictures in VirtualDub, then pass which -then counter, image names must be name+1, otherwise they are not imported correctly):
maran-emil.de/nodes/how-to-convert-canvas-animation-in-hd-avi-video-file