html - Decoding video to individual frames in the browser in 2020

Question

I need a solution that allows me to take some compressed/encoded video (format and encoding can be anything that is playable in the browser), and turn them into individual frames, for rendering using a Canvas based API.

I want to do this as efficiently and fast as possible. What are my options?

So far I have seen:

• Webcodecs API (https://github.com/WICG/web-codecs/blob/master/explainer.md). This seems exactly what I want, however is not yet stable, and limited to Chrome in trial phase.
• BroadwayJS and other JS decoders (https://github.com/mbebenita/Broadway). I am confident this will work acceptably, but is it the best solution? It seems a waste to use userland/js based decoding, when the browsers ship with codecs.
• HTML5 Video API. Bind event handlers, play through the video seeking manually, and append frames to an array. This works, but is obviously very slow, as it's not going as fast as it can.
• ???? Is there another solution I have not seen? I don't know the Browser HTML API's that well, so perhaps theres something else available.

question from:https://stackoverflow.com/questions/66056451/decoding-video-to-individual-frames-in-the-browser-in-2020

Answer 1

Waitting for answers