Как я могу записать видео Div в JS

Question

У меня есть анимация в элементе div. Я хочу записать элемент div с заданной частотой кадров и разрешением и экспортировать его в файл. Как можно это сделать в JS. Я уже немного искал, но все образцы видеозаписи JS, которые я нашел, касаются WebRTC. Но я не хочу записывать поток webrtc. Я просто хочу записать элемент div в 1280x720 размерах с 60fps.

Answer 1

AFAIK нет способов записи видео в реальном времени с обычных элементов div. Однако вы можете довольно легко записывать медиа элементы, такие как canvas, video и audio. Если вы хотите записать произвольную анимацию, вам лучше всего нарисовать анимацию в элементе canvas и записать ее оттуда.

Подход выглядит следующим образом:

• Создание элемента canvas (/ video / audio), рисование анимации в реальном времени на холсте

• Используйте метод HTMLCanvasElement.captureStream(framerate), чтобы инициировать захват потока и получить обработчик дляэкземпляр потока (см. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream)

• Используйте MediaStream Recording API, чтобы начать запись в экземпляре потока (см. https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)

• По окончании записи вы можете экспортироватьрезультат - ссылка на загрузку мультимедиа, загрузка данных на сервер и т. д.