#firefox #html #video #audio #screenshot
#firefox #HTML #Видео #Аудио #скриншот
Вопрос:
Мы создаем анимации с использованием HTML5 Javascript. Теперь мы хотели бы преобразовать эти анимации в видеофайлы (MPEG4 или другие, не имеет значения), чтобы пользователи с ограниченными возможностями просмотра также могли видеть анимации. Анимации содержат звуковую дорожку.
Мы ищем решения, при которых HTML-страница отображалась бы и записывалась на стороне сервера. Я знаю, что уже существуют инструменты для рендеринга эскизов веб-страниц и т.д. статических изображений. Однако в нашем случае использования мы должны вывести видеофайл.
Какие есть варианты? Можно ли использовать headless X server Firefox? Желательно, чтобы мы запускали это в облаке (Amazon EC2).
Также, если есть что-то особенное, о чем нам нужно подумать при воспроизведении анимации на скоростях, отличных от скорости реального времени, я хотел бы услышать — например, синхронизацию звука HTML5 с анимацией.
Комментарии:
1. Здравствуйте, Микко, у меня есть веб-приложение, в котором пользователь может создавать анимации, я хотел бы отобразить эти анимации в видео на стороне сервера, можете ли вы предоставить свой репозиторий или любое решение моих проблем? Пока я борюсь, спасибо
Ответ №1:
Просто отметим, что мы решили эту проблему с помощью
-
Запуск Firefox на безголовом сервере. Сервер с приличной видеокартой.
-
Наличие скрипта управления Selenium Python для запуска / остановки рендеринга
-
Пользовательский цикл рендеринга, который будет использовать XPCom API Firefox для подачи
<canvas>необработанных пикселей непосредственно в конвейер кодирования -
Пользовательский цикл рендеринга Javascript, в котором clock не берется из реальных часов, но он передает кадры в средство визуализации со стабильной частотой кадров, которая не соответствует реальному времени
Довольно сложная система, поэтому не вписывается в одно окно ответа : (
Комментарии:
1. Мне любопытно, есть ли у вас какие-либо обновления для этого ответа, теперь, когда прошли годы и что все браузеры немного изменились. Все еще используете это решение?
2. Да, мне удалось решить эту проблему и удалось отобразить WebGL на стороне сервера. Просто запустите цикл анимации шаг за шагом, захватите пиксельное содержимое <canvas> и закодируйте его как необработанные кадры или видео.
Ответ №2:
Одна вещь, которая могла бы сработать, в зависимости от вашей анимации, заключалась бы в создании анимированного GIF-файла. Собрав достаточное количество неподвижных изображений вашей анимации, вы сможете превратить их в видео с помощью подходящего программного обеспечения. Это довольно грубое решение, но если вы сможете продвигаться по анимации «покадрово», это может сработать.
Ответ №3:
Звучит интересно. Я проделал аналогичную вещь с библиотекой QtWebKit, для запуска которой требуется безголовый X-сервер. То, что я делал, — это масштабное преобразование веб-страниц в PDF. Возможно, имеет смысл поискать некоторые инструменты webkit2pdf, чтобы увидеть пример, на основе которого вы можете создать.
Я бы взглянул на библиотеку и объединил ее с другим решением для записи.
Ответ №4:
С точки зрения инструментария у меня был довольно приличный опыт работы с этими инструментами Ruby:
- безголовый камень поддерживает захват видео с помощью ffmpeg
- capybara позволит вам управлять, например, firefox.
Я понятия не имею о том, как они справляются со звуком, хотя
Комментарии:
1. Вы можете микшировать аудио к видео с помощью GStreamer