Карусель Instagram из макетов Фигмы и видео с iPhone. Кадрирует под 4:5 так, что видно, что именно обрежется, режет по времени, кладёт макет сверху и отдаёт готовые файлы 1080 × 1350 с теми же именами, что у макетов.
Работает целиком на вашей машине: видео никуда не загружается и не покидает компьютер.
Обычный путь такой. Макеты карусели верстаются в Фигме и экспортируются пачкой
(1.png, 2.png, 3.png): сверху прозрачно, снизу градиент и белый текст. Дальше их
надо положить поверх видео с телефона, и начинается возня.
Видео другого разрешения и другого соотношения сторон. Резать вслепую нельзя: легко срезать голову. Каждый ролик надо ещё подрезать по времени, совместить с нужным макетом, а потом переименовать файлы, чтобы карусель собралась в правильном порядке.
«Кадр» закрывает ровно этот шаг между Фигмой и публикацией.
1. Бросаете всё разом. Видео и макеты, сколько угодно, в любом порядке и в любое место окна. Внизу появляется лента слайдов: видео узнаётся по первому кадру, макет по шахматке под прозрачной частью.
Если в именах есть номера, макеты и видео связываются сами. Если сервис угадал неверно, это исправляется одним движением.
2. Пересобираете связки, как удобно. У готового слайда внизу карточки широкая полоса макет. Нажали на неё, нажали на другой слайд, макет переехал. Или потянули её мышью, если привычнее тащить. Мелких мишеней в интерфейсе нет намеренно.
3. Выбираете кадр глазами. Светлая рамка это то, что останется, всё за ней затемнено и будет обрезано. Макет виден прямо в предпросмотре, поэтому сразу понятно, не наедет ли текст на лицо. Рядом честная оценка: сколько точек оригинала попадёт в кадр и не превратится ли картинка в мыло при сильном приближении.
Настроили рамку на одном слайде, на следующем она уже там. Есть кнопка «кадр всем слайдам».
4. Режете по времени по ленте кадров, мышью или с клавиатуры.
5. Собираете карусель одной кнопкой. Все слайды с видео идут подряд, по два
одновременно, чтобы машина оставалась живой. Имя готового файла берётся от макета:
3 польза.png даёт 3 польза.mp4, поэтому названия из Фигмы переносятся как есть.
Когда всё готово, папка с результатом открывается сама.
- Правильно работает с видео iPhone: HEVC, 10 бит, HDR, поворот в метаданных, 4K, 60 кадров.
- Не теряет работу при перезагрузке страницы: лента, связки, кадр и обрезка возвращаются.
- Открывается с телефона по локальной сети, тогда видео заливается прямо с iPhone, без переброса на компьютер.
- Отличает готовые слайды от наложений по фактической прозрачности пикселей: макет с глухим верхом это готовая картинка, видео под неё не подложить.
- Предупреждает, если макеты в карусели разного формата.
- Пишет результат атомарно: в папке никогда не лежит недописанное видео.
Нужны Node.js 18 или новее и ffmpeg. Больше ничего: зависимостей у инструмента нет вовсе.
brew install node ffmpeg
git clone https://github.com/Techno911/kadr.gitНа macOS: двойной клик по файлу ▶ ЗАПУСТИТЬ Кадр.command, откроется браузер.
Из терминала на любой системе:
npm startВ консоли появится адрес с ключом доступа, например http://localhost:7788/?k=….
Ключ нужен потому, что сервис слушает локальную сеть (чтобы можно было залить видео
с телефона), и случайный человек в том же Wi-Fi не должен получить доступ.
Подробная инструкция по работе: КАК ПОЛЬЗОВАТЬСЯ.md
iPhone снимает в HDR. Если просто перекодировать такое видео, картинка выйдет вымытой: серое небо вместо синего. Приведение к обычному цвету делается тем, что умеет ваша сборка ffmpeg:
scale_vt, аппаратно средствами Apple: лучший вариант, он же используется системой при показе HDR на обычном экране;zscaleплюсtonemap: программный путь для сборок без Apple;- если нет ни того, ни другого, сервис скажет об этом при старте, и HDR-видео выйдет тусклым.
Проверить, что есть у вас: ffmpeg -filters | grep -E "scale_vt|zscale".
Аппаратный путь проверен замером на настоящем файле, программный собран по общей
практике и подробно не тестировался.
npm test # сервис и файлы
npm run test:ui # интерфейс настоящей мышью в настоящем Chrome
npm run test:allnpm test поднимает свой экземпляр сервиса и проходит полный путь на пяти типах видео
(вертикальное HDR с поворотом, обычное SDR, горизонтальное, повёрнутое в другую сторону,
без звука), плюс карусель целиком и разбор ошибок.
npm run test:ui открывает страницу в настоящем Chrome и работает настоящей мышью:
нажимает на карточки, тащит макеты через десятки промежуточных точек, проверяет размер
мишеней, собирает карусель, перезагружает страницу и смотрит узкий экран. Именно так
ловятся дефекты, которых не видно ни в коде, ни в состоянии: доставка событий и попадание
курсора. Нужен puppeteer-core (ищется в соседних проектах) и Chrome; без них прогон
честно пропускается. KADR_UI_HEADED=1 покажет окно браузера.
Проверка, для которой не сложились условия, печатается как пропуск и роняет прогон: зелёный итог должен означать «всё проверено», а не «проверок не было».
server/server.js HTTP-сервер: приём файлов, очередь сборки, раздача, ключ доступа
server/media.js всё про ffmpeg: разбор, предпросмотр, лента кадров, сборка
server/selftest.js сквозной прогон сервиса
server/uitest.mjs прогон интерфейса настоящей мышью
web/ интерфейс: один html, один js, один css
docs/make-media.mjs съёмка снимков для этого описания
Файл принимается потоком в теле PUT-запроса, поэтому не нужен ни разбор multipart, ни пакеты. Инструмент, который не сломается от обновления чужой библиотеки.
Рабочие файлы и готовые карусели лежат в ~/Library/Application Support/Kadr
(на других системах в домашней папке), всё старше двух суток стирается само.
- Работа живёт, пока запущен сервис: после его остановки файлы придётся перетащить заново.
- Лучше всего работает на Apple: там есть аппаратные декодирование, тонмаппинг и кодирование. На других системах всё работает, но медленнее.
- Инструмент делался под конкретную задачу и вкус автора. Если он полезен вам как есть, берите; правки под свой процесс проще внести самому, файлов немного.
MIT