Vibe Capture

Хочу поделиться штуковиной, чтобы записывать видео с сайтов без заиканий. Так как я её навайбкодил, назвал Vibe Capture.

Зачем?

Вы когда-нибудь пытались записать Figma-прототип или лендинг с кучей анимации? QuickTime пишет то, что видит - с дропнутыми кадрами, рывками и артефактами. Loom, Screenflick, встроенный macOS screencast - всё то же самое: они пишут физический экран со всеми ограничениями реального рендера, с непостоянным фреймрейтом и тормозами. OBS хорош, но не спасёт, если у вас на сайте, например, есть анимация в Mapbox, которая стопроцентно затормозит. Для подготовки промо-видео такие футажи не очень годятся: их неудобно монтировать.

Vibe Capture устроен иначе. Он открывает страницу в браузере, берёт управление временем в свои руки и снимает кадры один за другим. Почти как рендер в Blender. Финальное видео всегда 60 fps (или любой другой fps), всегда плавное и всегда frame-perfect.

Кому пригодится?

  • Дизайнерам, которые хотят записать Figma-прототип и показать анимацию такой, какой она должна выглядеть. В целом можно даже не открывать After Effects, потому что плавную анимацию можно получить и в Figma.
  • Разработчикам, которым нужно задокументировать CSS/JS-анимацию или сделать превью лендинга.
  • Всем, кто делает скролл-записи сайтов — например, для презентаций или портфолио.
  • Тем, кому нужен исходник для монтажа: ProRes 422 HQ прямо из браузера.

Что умеет?

  • Любой FPS — 24, 30, 60, 120.
  • Ни одного дропнутого кадра даже на сложных анимациях.
  • Figma-прототипы - понимает слайды, умеет кликать для перехода, синхронизирует встроенное видео.
  • Автоскролл - плавный скролл страницы с ease-in/out, настраиваемой скоростью и задержками.
  • Мобильная эмуляция - записывает в 390×844 с мобильным user agent.
  • Retina - 2× output, если нужно.
  • ProRes 422 HQ или H.264 с контролем качества, пресетов, профиля и pixel format.
  • Курсо р- рисует собственный кастомный курсор поверх записи.
  • Работает с любым сайтом по URL — не нужно ничего устанавливать в браузер.

Где не поможет?

Если нужно показать весь путь пользователя с переходами между страницами. Пока плохо работает с WebGL и сплатами — анимация будет сильно ускоренной.

Баги тоже имеются. Если кому-то пригодится в работе - буду рад обратной связи.

Установка

Нужен Node.js и ffmpeg. git clone https://github.com/derivanov/vibe-capture.git cd vibe-capture bash setup.sh

Потом: npm start

Откроется панель управления в Chrome. Вставляете URL, нажимаете Open, Record. Готовое видео появляется в папке recordings/. Помимо видео, будут и все кадры, если что-то пошло не так.

GitHub: https://github.com/derivanov/vibe-capture