Какие есть способы по кадрам рисовать видео в canvas?

Question

[Alex]

Есть проекты видеороликов в After Effects (размеры от 600х600px до 1920), кто знает какие способы существуют для прорисовки по кадрам их в canvas?
Единственный вариант рабочий получился это экспорт из After Effects в PNG Sequence и потом подгружая все кадры в массив js, прорисовывать через setTimeout перебирая массив.
Может кто знает есть ли еще варианты как сильно не нагружая память JS подгрузить ролики и иметь возможность по кадрам рисовать в canvas?

p.s. пробовал еще с webm но там перемотка работает не стабильно и ролики с альфа каналом глючат

Comments

[RAX7]

а что ты пытаешься сделать? зачем тебе и отрисовка по кадрам и видео с прозрачностью

[Alex]

RAX7, чтоб можно было синхронно несколько видео отрисовывать в canvas по кадрам и записывать в память получившийся кадр.

[RAX7]

alexjet73, можно попробовать собрать спрайт из png`шек, что бы по отдельности их не грузить и через requestAnimationFrame все это дело уже расшевелить. Сомневаюсь что с видео такое получится.

[Alex]

RAX7, видео это я имею ввиду в афтере проект заготовленный, а вопрос как раз как экспортировать и использовать это уже в JS :)
Тоже думал спрайты попробовать, но везде программы для спрайтов делают спрайтшит в 4-5к максимум, а тут каждый кадр от 600 до 1920 пикселей. Свою программу мудрить не хочется, да и долго изучать придется много материала библиотек для работы с графикой чтоб на десктоп сделать склеиватель кадров в спрайтшит

[RAX7]

alexjet73, ну значит несколько спрайтов на видео делать, например 1сек видео 1 спрайт.
Можешь попробовать еще Bodymovin для афтера, он вроде умет покадрово проигрывать

[Alex]

RAX7, это типа плагин что ли из After Effects в Canvas умеет делать? О_О

[RAX7]

alexjet73, он самый=)

[Alex]

RAX7, это шикарно если так! чувствую ночь сегодня будет интересной) буду пробовать этот плагин

[Alex]

RAX7, спасибо огромное за такой инструмент!)

[RAX7]

alexjet73, да не за что=)

Answer 1

[Сергей Соколов]

А вот пример работы с видео в canvas – там налету меняют фон.

Т.е. из AfterEffects выводите как обычное mp4 / h264 видео.

Comments

[Alex]

у кеинга есть минус с полупрозрачными элементами на видео. Тоже была идея сделать так, но результат плохой.

[Сергей Соколов]

alexjet73, зелёный простынинг — вне темы вопроса.

А по теме там просто пример как брать кадры из видео и копировать их в canvas:

this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
// ...
this.ctx2.putImageData(frame, 0, 0);

[Alex]

Сергей Соколов, подобный трюк с видео я уже пытался делать, но в p/s/ написал в вопросе, что в итоге не получилось https://jsfiddle.net/9x4ogcrs/ работает всё только без альфа канала, с альфа видео просто глючит и при установке current Time кадр не прорисовывается, либо иногда часть прорисовывается, а потом резко картинка встаёт. Вообщем с видео не удалось провернуть такой трюк, хотя было бы шикарно учитывая легкость изготовления и загрузки в canvas.

[Сергей Соколов]

alexjet73, в фиддле вы как-то жестко пытаетесь контролировать видео, прям на каждый кадр устанавливать ему currentFrame – это и не работает.

Опишите подробнее затею.

Видео может воспроизводиться, вставать на паузу и вручную перематываьтся разок на новую позицию.
Пока оно воспроизводится, вы можете, не вмешиваясь, выдирать из него очередной кадр и что-то с ним делать : вставлять в canvas, дорисовывать что-то.

[Alex]

Сергей Соколов, да идея простая два видео накладываются друг на друга и программно контролируются каждый кадр через setTimeout чтоб шли синхронно.

[Сергей Соколов]

Вероятно, надо по-другому взглянуть на архитектуру.
Есть видео. По кнопке запускается его нормальное воспроизведение.
JS как может часто, или с частотой кадров вызывает некую функцию.
Там берется текущий кадр из видео и копируется в элемент canvas.
Если хочется что-то дорисовать, можно взять из video свойство currentTime и исходя из него, взять, например, нужный файл-картинку для наложения. Или просто нарисовать поверх номер кадра, скажем.

В любом случае, элемент-плеер video тут – «мастер». Им, в нормальном режиме, мышкой, рулит пользователь (play/pause/seek). Из него читается видимый кадр и временнАя позиция.

[Сергей Соколов]

подробнее про синхронизацию расскажите, пожалуйста.
Зачем тут вообще JS понадобился? Имеете в виду, одновременно останавливать оба, перематывать оба на одну позицию?
Частота кадров у обоих видео одинаковая?

[Alex]

Сергей Соколов, Ну видео же в канвас надо засунуть, для этого в цикле setTimeout рисуется в канвас и передвигается таймлайн тем самым каждый кадр рисуется и можно результат из кадров уже делать ролик. Да синхронность чтобы была возможность работать с таймлайном например сдвигать начало одного видео. Да частота одинаковая будет.