Создание сторис для Instagram из PHP

В последнее время люди более охотно смотрят в социальных сетяx видео, нежели просматривают фотографии. Сторис в инстаграм набирает в 3-4 раза больше просмотров, чем просто выложенная фотография.

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

Так мне в голову пришла идея о создании библиотеки, которая позволяла бы создавать короткие видео-ролики из фотографий, текста и анимации этих объектов. Да, кто-то может сказать, что сервисы, которые позволяют это делать, уже есть и зачем придумывать велосипед? Во-первых — хочу, во-вторых — могу, в третьих — это будет бесплатно.

Эта статья о том, как работать с библиотекой, как создавать свои собственные сторис из PHP.

Ограничения

Сразу стоит сказать, что библиотека использует FFmpeg для генерации финального видео-файла. FFmpeg обязательно должен быть установлен на сервере. Возможно в будущем, будет вариант генерации сторис как gif-файл, но для себя я выбрал именно видео-файл, как результат работы.

Подготовка

Библиотека устанавливается через композер

Создание сторис

Настало время создать свою собственную сторис. Например, мы хотим видеть фоном фотографию котёнка, которая немного приближается на протяжении всего сторис и отобразить 2 текста на ней с анимацией появления. Легко!

Инициализация сторис

Как можете видеть, все параметры переданы как массив. На данный момент можно изменять:

• «width» — Ширина сторис в пикселях
• «height» — Высота в пикселях
• «duration» — Продолжительность в секундах
• «fps» — Количество кадров в секунду, по стандарту — 30

Объекты имеют как общие параметры:

• «top» — позиция объекта от верхнего края сторис
• «left» — позиция элемента от левого края сторис
• «opacity» — прозрачность, как в css [0… 1]
• «rotate» — угол поворота объекта [0… 359]
• «z-index» — слой, как z-index в css — чем больше, тем выше слоем на кадре будет располагаться элемент
• «start» — секунда, когда элемент должен быть добавлен на сторис
• «end» — секунда, когда элемент должен быть убран со сторис

• «path» — Путь до картинки, которую хотим добавить
• «scale» — Множитель размера изображения (приближение)

Добавление картинки на сторис

Готово! Если прямо сейчас сгенерировать сторис, то 5 секунд мы будем любоваться котиком. Но я обещал, что будет анимация, давайте добавим её.

Анимация для объекта добавляется с помощью отдельного метода, аргументом которого являются массив параметров, к которым должен прийти объект. Анимаций для одного объекта может быть сколько угодно. Стоит сказать, что синтаксис библиотеки подразумевает использование Fluent Interface.

Добавление картинки и анимации

Как вы могли заметить, для добавления анимации используется метод addAnimation. Обязательные параметры для анимации:

• «start» — Секунда, когда должна начаться анимация. Если не задана, анимация начнётся в момент добавления объекта
• «duration» — Продолжительность анимации в секундах

Добавление текста

Текст имеет свои уникальные параметры:

• «text» — текст, который вы хотите вывести — обязательно
• «path» — путь до шрифта (.ttf) — обязательно
• «size» — размер шрифта
• «color» — цвет, например «#ffffff»
• «width» — ширина блока текста, если задана, то текст автоматически будет разбит на строки
• «align» — выравнивание текста [left, center, right]
• «shadow» — тень

• «color» — цвет тени
• «top» — отступ сверху
• «left» — отступ слева

Генерация сторис

В результате мы получаем имя файла, который находится во временной папке, переданной как аргумент.

Результат работы

Стоит сказать, что скорость создания сторис не велика, на хорошем компьютере 5и секундный ролик генерируется порядка минуты, на простеньком сервере более 3х минут.