How to get a frame from a video in js?

Question

JavaScript

Actually the question is a little more complicated. It is necessary to selectively decorate frames from the video. That is, reduce fps and display in canvas. For example, take from an mp4 file every 1 frame, decorate and display. I guess that can be solved with webgl?

Answer 1

https://github.com/mbebenita/Broadway
but the project is dead and doesn't use wasm , which could speed up decoding significantly.

Answer 2

let video = document.querySelector("video");
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
video.addEventListener('play', function() {
  ctx.drawImage(video, 0, 0, width, height);
  let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
});

https://developer.mozilla.org/en-US/docs/Web/API/C...

Answer 3

the whole question is - is it required to be done on the fly, and on which side? If on the server side, then there is no problem, use something like ffmpeg , avconv or whatever you have at hand. but if on the client side, then I don’t even know .....