Что нужно для конвертирования HTML5 анимации в mp4?

Question

[Ross Alex]

Здравствуйте, коллеги!

Интересуют решения, позволяющие конвертировать, например, html5 баннер, сделанный при помощи css3 анимации или GSAP/Anime.js или чего-то похожего, в mp4 видео. Кто встречался с подобной задачей или решением, поделитесь направлениями для раскопок. Спасибо!

p.s.: Как пример, похоже, что это делает такой онлайн сервис Panzoid Clipmaker

upd1: копая Google, нашел несколько близко-тематических решений. Возможно цепочка такова: iframe с анимацией, захват элемента при помощи javascript navigator.mediaDevices.getDisplayMedia(opts); затем полученный стрим обрабатываем. Обработку еще не продумывал.

Comments

[dmitry-toster]

Очень странная и крайне сомнительная затея кому на постоянной основе может потребоваться подобный конвертер.
Самый простой и адекватный способ - сделать запись экрана монитора и обрезать нужный фрагмент с анимацией.

[Ross Alex]

dmitry-toster, сколько времени вам нужно, чтобы сгенерировать записью экрана через прогу видео длинной в 2-3 минуты, а количество видео приблизительно 10000 шт?!

[dmitry-toster]

Yaroslav O., лично мне - ни сколько. Ибо за такую бредовую задачу я бы даже браться не стал. Без обоснованных аргументов зачем и кому это может понадобиться в таких количествах - это полный маразм и идиотизм, в который вникать нет никакого смысла (не в обиду)

[Ross Alex]

dmitry-toster, у меня аргументы есть, много.

Answer 1

[deepblack]

Возможно вам подойдёт следующее решение:

A library to capture canvas-based animations at a ...
Ещё вариант, скорее всего не подойдёт, но всё же вдруг пригодится.

Comments

[Ross Alex]

Очень даже может быть. Я нашел, как скриншотить DOM элемент и засунуть в canvas. Делая это с определенной частотой, можно получить видео. А эта библиотека позволит это записать... Попробую и отпишусь. Спасибо!

[Ross Alex]

Yaroslav O., пробовал скрины в selenium, максимальная скорость была 5fps. Пробовал PhantomJS, он не шарит в es6, поэтому мимо, так как ни GSAP, ни Anime.js, ни D3, ни Three.js не работают.

Принято решение анимировать Canvas, сохранять фреймы, а потом склеивать их ffmpeg в mp4 на сервере или прямо из Canvas Stream в Blob, и потом в WebM. Если станция будет справляться, то можно и CCapture применить, так как там лучше чтобы была и нормальный GPU, много памяти, и проц для рендера. Моя раб.станция 2xXeon E5-2678v3/128 DDR3 ECC/Sata3 SSD Raid 5 1Tb

Answer 2

[xmoonlight]

Любая прога захвата экрана.

Comments

[Антон Шаманов]

ладно дои..сь до тебя теперь, назови хоть одну на языках из тегов в вопросе

[Ross Alex]

Не то... Программа захвата не подходит. Нужно решение, которое превратит html5 анимационный блок, например, с галереей, перелистывающей фотки с эффектами layerSlider или SliderRevolution, которые написаны с применением GSAP или подобных библиотек, в видео формата MP4.

[xmoonlight]

Yaroslav O., чем не подходит?

[Ross Alex]

xmoonlight, нужно генерировать видео на потоке, десятками тысяч штук.

[xmoonlight]

Yaroslav O., ого, а это ещё зачем?!
Последовательно - можно сделать: один за другим?

[Ross Alex]

xmoonlight, не вариант!

[xmoonlight]

Yaroslav O., а зачем столько генерить видео-анимашек?
(варианты потока - есть, но нужно кодить свой софт)