Как преобразуется html (svg и div) в видео формат в сервисах типа SUPA?

Question

[Alex]

Есть сервисы типа SUPA, где конструктор весь основан на html элементах и их управлением через Javascript. Однако как при создании видео, передаются данные на сервер о всех объектах и раскадровки так, что на стороне сервера PHP может визуализировать все эти элементы?
Есть ли какие то догадки или предположения, а может кто занимался подобным и знает каким образом устроен механизм визуализации html элементов и создание видео на стороне сервера?!

Comments

[Виталий Артемьев]

Есть пример видео?

[Alex]

Виталий Артемьев, какого видео? Речь о конструкторе типа как в сервисе SUPA, где сам конструктор видео на фронте сделан в виде простой анимации html элементов, которые потом каким то образом отправляются на бэк и превращаются в видео. Вопрос как раз, как это происходит?! Т.е. каким путём можно реализовать подобную конвертацию анимации html элементов и отправлять их потом в бэк где они визуализируются как то и создаётся видео.

Answer 1

[strelok011]

Не уверен на счет php, но вот статья о реализации подобного на nodejs. На английском правда.
https://medium.com/@brianshaler/on-the-fly-video-r...

Суть в том, что сценарий видео передается с фронта на бэк, в дальнейшем на бэке используется canvas (такой же, как и на фронте в браузере), результат обсчета изображения одного кадра скармливается универсальному обработчику видео ffmpeg, в дальнейшем создается видеофайл.
Очень грубо, но общий смысл передает. Я не видел реализацию канвы для php, не стояло цели искать, но похожий функционал на ноде точно действует. Можно запускать серверную версию хромиума, к примеру, в нем рендерить собственно хоть html страницу хоть канву.

Comments

[Alex]

спасибо за вариант с canvas! но в сервисе что интересно вообще работают с html элементами и css-js анимацией. Интересно вот как они её превращают потом в беке на php или nodejs в анимацию по кадрам.
Это с одной стороны намного больше даёт возможностей, чем canvas, но как всё это передать в бэк и там визуализировать и скормить так же ffmpeg вот это загадка для меня))

[strelok011]

headless браузеры умеют делать скрины отрендренных страниц, думаю, что и анимацию переснять, написав скрипт, не должно быть проблемой.
Хром, PhantomJS, даже у мозиллы есть плагин для консольного рендера страницы.
Если на бэке запустить такой браузер, получить из него пакет изображений, то совсем уж мелкая задача натравить ffmpeg на секвенцию изображений для рендера видео.

Вариантов получения изображения из html много, вот еще несколько ресурсов:
https://stackoverflow.com/questions/10721884/rende...
https://github.com/bpsagar/css2video
https://stackoverflow.com/questions/4618048/best-w...