Как записать анимацию HTML и сохранить ее как видео, автоматически в бэкэнде - PullRequest
Новая
       67

Как записать анимацию HTML и сохранить ее как видео, автоматически в бэкэнде

1 голос
/ 30 апреля 2020

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

Я создаю приложение NodeJS, которое генерирует видео MP4 по запросу пользователя. Пользователь предоставляет файл MP3, приложение генерирует анимированные сигналы для звукового файла поверх иллюстрации.

До сих пор я придумал систему, которая открывает сгенерированную веб-страницу в бэкэнде, воспроизводит аудиофайл и показывает аудио-визуализацию для аудиофайла на элементе HTML canvas. Поверх другого холста, в основном с stati c компонентами, например изображениями, которые не анимируются. Система записывает это, на выходе будет видео файл. Наконец, я объединю видеофайл со звуковым файлом, чтобы создать окончательный файл для пользователя.

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

Решение # 1

Используйте API-интерфейс безголового браузера, такой как Phantom js или Puppeteer, чтобы снимать снимок экрана x раз в секунду и передавать его в FFmpeg.

Проблема

Проблема в том, что процесс не в реальном времени. Это будет нормально работать, если это просто анимация, но моя зависит от аудио файла. Аудиофайл будет воспроизводиться во время рендеринга, что приводит к глючному видео в формате 1FPS.

Возможное решение?

Не воспроизводить аудиофайл в реальном времени, но преобразовать аудиофайл в необработанные данные. Анимируйте аудио-визуализацию на основе исходных данных. Не уверен, как это сделать, и если это вообще возможно.

Solution # 2

Воспроизведите, запишите и сохраните анимацию, все в интерфейсе. Может использовать ccapture. js для записи и сохранения холста. Используйте безголовый браузер, чтобы открыть страницу и сохранить ее на диск после завершения воспроизведения. Не похоже, что это лучшее решение.

Проблема (и)

У меня более 1 холста. Это занимает некоторое время, особенно если аудиофайл длиннее 10 минут. Заставить пользователей долго ждать может быть нарушителем договоренности.

Возможное решение?

Объединить холсты в один.

Не знаю, как ускорить время рендеринга, и я сомневаюсь, что это возможно таким образом.

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

1 Ответ

0 голосов
/ 30 апреля 2020

Обычный конвейер для создания воспроизводимых видеофайлов MPEG4 имеет несколько шагов:

  1. Производство: используйте OBS или другое программное обеспечение для захвата в реальном времени, чтобы получить необработанное видео с экрана, или площадь экрана, обязательная. Геймеры любят OBS, потому что он позволяет им создавать высокоточные потоки с высокой частотой кадров и т. Д.

  2. Постпродакшн: для конечного продукта хорошего качества он может работать медленнее - даже многие раз медленнее, чем в реальном времени. Индикатор выполнения движется медленно. Он включает в себя получение необработанного захваченного аудио и видео и рендеринг его в файл mp4. Если вы готовы потратить компьютерные циклы на это, вы можете использовать высокопроизводительные методы сжатия, такие как компенсация движения и размытие движения. Вам нужно подождать, но аудио и видео потоки остаются синхронизированными.

  3. Публикация: Вы можете отправить файл MP4 пользователю или опубликовать его на каком-либо сайте публикации видео, например на YouTube или Vimeo.

Если невозможно выполнить ваш производственный этап в реальном времени, это усложнит вам жизнь.

Вы МОЖЕТЕ быть в состоянии заставить YouTube сделать вашу постобработку за вас. Вы знаете, как он говорит «все еще обрабатываете, возвращайтесь позже», когда вы пытаетесь воспроизвести видео, которое вы только что загрузили? Это видео еще обрабатывается.

На вашем месте я бы попробовал OBS. https://obsproject.com/ Я успешно выполнил некоторые учебные материалы (я разговаривал и щелкал мышью). У него есть API, так что вы должны иметь возможность запускать и останавливать его с помощью своей программы, но я этого не сделал. Не делай этого.

Похоже, тебе нужен бизнес для быстрого оборота. Вы можете уменьшить задержку для постобработки, захватив с более низкой частотой кадров (например, 24 вместо 60 кадров в секунду) или с более низким разрешением (например, высота 720, а не 1080). Вы также можете выбрать варианты для менее сложного сжатия видео. Или вы можете отправить своему клиенту первые пару минут в качестве образца. «Вот как будет выглядеть ваше видео. Теперь мы оптимизируем качество воспроизведения». Возможно, это будет радовать их, пока вы закончите sh постобработку всего этого.

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

...