Как получить кадр из видео на js?

Question

[t0_ot]

На самом деле вопрос чуть сложней. Необходимо выборочно декорировать кадры из видео. То есть снизить fps и отобразить в canvas. Например из mp4 файла брать через 1 кадр, декорировать и отображать. Предполагаю что можно решить с webgl?

Answer 1

[Александр Таратин]

https://github.com/mbebenita/Broadway
но проект мертв и не использует wasm, что могло бы существенно ускорить декодирование.

Answer 2

[profesor08]

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...

Comments

[t0_ot]

Проблема в том, что вы предлогаете отрендерить большой обьем видео, вытащить несколько кадров и снова нарисовать чтобы снизить нагрузку, уменьшив фремрейт. К сожалению мне необходимо иное, но спасибо за ответ.

[profesor08]

Что за фантазии, где я это предложил? Код помещает в переменную frame один кадр и все. Этим кодом можно дергать кадры так часто, как нужно, две строки кода останутся неизменными. Прежде чем делать свои фэнтезийные выводы, стоит сначала разобраться как это работает на базовом уровне. Потому что получив imageData, можешь передать эти данные в шейдер на webgl и сделать что-то крутое и высокопроизводительное.

Answer 3

[Алексей Копендаков]

весь вопрос в том, - это требуется делать на лету, и на чьей стороне? Если на стороне сервера, то проблем нет, используете что-нить в виде ffmpeg , avconv или что у Вас есть под рукой. а вот если на стороне клиента, то даже и не знаю.....

Comments

[t0_ot]

На лету и на стороне клиента.

[Алексей Копендаков]

а сам видеофайл откуда берется? Вы делаете что-то вроде "видеоредактора"? Открыл страницу, выбрал файл, и получил кадры? Просто если рассуждать логически, то как минимум, для проигрывания видео, у человека уже должны быть установлены кодеки. Соответственно, уже "проще". В сети есть библиотеки для декодирования H.264 на js. Использовать их, и должно получиться.... Просто не понимая полностью задачи, сложно советовать решение.

[t0_ot]

Алексей Копендаков, я разоабатываю алгоритм дорисовки кадров из видео на нейросетях, способной сократить ресурсы на декодирование 4к и 8к видео. По сути необходимо декодировать 6 кадров в секунду а остальные додумать