Как записать анимацию DOM как видео без потерь 60 кадров в секунду с использованием только кода - PullRequest
Новая
       8

Как записать анимацию DOM как видео без потерь 60 кадров в секунду с использованием только кода

0 голосов
/ 02 июля 2018

Это сложная проблема из проведенного мною исследования, поэтому заранее благодарю за то, что уделили время на его изучение, потому что я полностью застрял!

Мне нужен способ захвата DOM-анимации в видео без потерь с частотой 60 кадров в секунду и способ, который можно автоматизировать и интегрировать в приложение, чтобы я мог захватывать сотни вариантов одной анимации в виде видео.

Как это может работать:

capture-video https://codepen.io/RobinTreur/full/pyWLeB/ --length 10s --size 800x600

Скрипт будет посещать этот URL-адрес (содержит пример текстовой анимации), а затем выводит видео, которое показывает захваченную анимацию в виде видео со скоростью 60 кадров в секунду без задержки.

Требования:

  • Должен быть подход, основанный на коде или дружественный к автоматизации.
  • Необходимо записывать высококачественное видео со скоростью 60 кадров в секунду для анимации DOM без задержки.
  • Должен записывать базовую анимацию элемента DOM, а не на основе canvas или WebGL.

Большое спасибо за вашу помощь! Это было очень трудно решить. Я бы хотел как-то вернуть тому, кто решит эту проблему.

Если у вас есть какие-либо вопросы, просто прокомментируйте, и я отвечу в тот же день. Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 01 сентября 2018

Может быть, посмотрите на Кукловода или Селен.
Я знаю, что они могут делать скриншоты, поэтому, возможно, они также смогут записать достаточное количество видео.

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

0 голосов
/ 28 августа 2018

Вы не можете получить полный скрипт здесь, в StackOverflow. Но я могу дать вам шаги, чтобы написать свой собственный сценарий.

Обратите внимание, что следующий шаг работает только в Linux.

Предпосылки:

  1. Xvfb
  2. ffmpeg
  3. google chrome

Шаги:

  1. Запуск google chrome в Xvfb

    xvfb-run --server-args='-screen 0, 1024x768x16' google-chrome -start-maximized http://www.example.com > /dev/null &

    В приведенной выше команде -screen - это номер дисплея, который нужно менять при каждом запуске. Xvfb запустит виртуальный экран и присвоит ему этот номер. После запуска экрана в нем откроется Google Chrome.

  2. Запустите ffmpeg и присвойте ему номер дисплея, укажите значение aboven вместе с любым смещением для выравнивания окна захвата. 

    ffmpeg -video_size 1024x768 -framerate 60 -f x11grab -i :0.0+100,200 output.mp4

    В приведенной выше команде :0 - это номер дисплея, который необходимо настроить в соответствии с экземпляром. Обратите внимание, что если вы хотите захватить до 10s, то его можно настроить, передав флаг -t в ffmpeg.

Примечание. По завершении не забудьте утилизировать экран Xvfb и любой другой процесс зависания.

...