🏏 👩🏾‍🏫 🌀 Creando historias para Instagram desde PHP 🏟️ 🍕 🎅🏾

Entrada

Recientemente, la gente ha estado más dispuesta a mirar videos en las redes sociales que a buscar fotos. Storis en Instagram gana 3-4 veces más visitas que solo una foto presentada.

Y, por supuesto, no dejamos de olvidar que las redes sociales no son solo para mostrarse, para ver a los demás, sino también para promocionar sus bienes, servicios, etc. Hace mucho tiempo que aprendimos cómo publicar noticias recién publicadas del sitio en VKontakte. Pero, ¿y si vamos más allá? ¿Qué pasa si envía esta información como un video? ¿O subir historias de video interesantes en Instagram para atraer más atención de la audiencia?

Entonces se me ocurrió la idea de crear una biblioteca que me permitiera crear videos cortos a partir de fotografías, texto y animaciones de estos objetos. Sí, alguien puede decir que ya hay servicios que le permiten hacer esto, y ¿por qué inventar una bicicleta? En primer lugar, quiero, en segundo lugar, puedo, en tercer lugar, será gratis.

Este artículo trata sobre cómo trabajar con la biblioteca, cómo crear sus propias historias desde PHP.

Limitaciones

Debe decirse de inmediato que la biblioteca usa FFmpeg para generar el archivo de video final. FFmpeg debe estar instalado en el servidor. Quizás en el futuro, habrá una opción para generar historias como un archivo gif, pero para mí elegí el archivo de video como resultado del trabajo.

Preparación

La biblioteca se instala a través del compositor.

composer require borodin-vasiliy/php-stories

Creando historias

Es hora de crear tu propia historia. Por ejemplo, queremos ver la foto de fondo de un gatito, que está un poco más cerca a lo largo de la historia y mostrar 2 textos con una animación de la apariencia. Fácil!

Inicialización de Storis

 //    5    720x1280 $stories = new Stories([ "width" => 720, "height" => 1280, "duration" => 5 ]);

Como puede ver, todos los parámetros se pasan como una matriz. Por el momento, puedes cambiar:

"Ancho": ancho de Storis en píxeles
"Altura" - Altura en píxeles
"Duración" - Duración en segundos
"Fps" - El número de cuadros por segundo, de acuerdo con el estándar - 30

Luego, necesitamos agregar 3 objetos (una imagen y 2 textos) a nuestra historia futura. Por el momento, la biblioteca le permite agregar 4 tipos de objetos diferentes: imagen, texto, eleps, rectángulo. Cada objeto tiene su propio método, el argumento del método es una matriz de los parámetros del objeto agregado.

Los objetos tienen como parámetros comunes:

"Arriba": la posición del objeto desde el borde superior de la historia
"Izquierda": la posición del elemento desde el borde izquierdo de la historia
"Opacidad" - transparencia, como en css [0 ... 1]
"Rotar" - el ángulo de rotación del objeto [0 ... 359]
"Índice Z" - una capa, como un índice Z en CSS - cuanto más grande, más alta se ubicará la capa en el elemento del marco
"Inicio": el segundo momento en que el elemento debe agregarse a la historia
"Fin": el segundo momento en que el elemento debe eliminarse de la historia

Tan único para cada tipo de objeto, por ejemplo, para una imagen:

"Ruta": la ruta a la imagen que queremos agregar
"Escala": multiplicador de tamaño de imagen (aproximación)

Agregar una imagen a la historia

 //      $main_image = $dir."/images/1.jpg"; //   ) list($image_width, $image_height) = getimagesize($main_image); // ,      ,       $image_start_scale = round(1280 / $image_height, 1); //   $stories->addImage([ "path" => $main_image, "top" => round(-1 * ($image_height * $image_start_scale - $stories_height) / 2), //        "left" => round(-1 * ($image_width * $image_start_scale - $stories_width) / 2), //        "scale" => $image_start_scale ]);

Hecho Si ahora mismo genera una historia, durante 5 segundos admiraremos al gato. Pero prometí que habrá animación, añádala.

La animación para el objeto se agrega usando un método separado, cuyo argumento es una matriz de parámetros a los que debe llegar el objeto. Las animaciones para un objeto pueden ser cualquier número. Vale la pena decir que la sintaxis de la biblioteca implica el uso de la interfaz fluida.

Agregar imágenes y animaciones

 //      $main_image = $dir."/images/1.jpg"; //   ) list($image_width, $image_height) = getimagesize($main_image); // ,      ,       $image_start_scale = round(1280 / $image_height, 1); // $image_end_scale = $image_start_scale + 0.5; //     $stories->addImage([ "path" => $main_image, "top" => round(-1 * ($image_height * $image_start_scale - $stories_height) / 2), //        "left" => round(-1 * ($image_width * $image_start_scale - $stories_width) / 2), //        "scale" => $image_start_scale ])->addAnimation([ "top" => round(-1 * ($image_height * $image_end_scale - $stories_height) / 2), //         "left" => round(-1 * ($image_width * $image_end_scale - $stories_width) / 2),//         "scale" => $image_end_scale, ]);

Como habrás notado, el método addAnimation se usa para agregar animación. Parámetros necesarios para la animación:

"Inicio": el segundo momento en que debe comenzar la animación. Si no se establece, la animación comenzará cuando se agregue el objeto.
"Duración": la duración de la animación en segundos

Una serie de parámetros que la animación puede afectar:

"Arriba"
"Izquierda"
"Opacidad"
"Rotar"
"Escala"
"Ancho"
"Altura"

Agregar texto

 //   $stories->addText([ "text" => "Hello world!", "path" => $dir."/fonts/helvetica.ttf", "size" => 130, "color" => "#ffffff", "width" => 620, "top" => 200, "left" => 50, "opacity" => 0, "shadow" => [ "color" => "#000000", "top" => 4, "left" => 4 ] ])->addAnimation([ "duration" => 1, "opacity" => 1 ])->addAnimation([ "start" => 4.5, "duration" => 0.5, "opacity" => 0 ]); //   $stories->addText([ "text" => "This is a test of function adding text", "path" => $dir."/fonts/helvetica.ttf", "size" => 100, "color" => "#ffffff", "width" => 620, "top" => 750, "left" => 50, "start" => 0.5, "opacity" => 0, "shadow" => [ "color" => "#000000", "top" => 4, "left" => 4 ] ])->addAnimation([ "duration" => 1, "opacity" => 1 ])->addAnimation([ "start" => 4.5, "duration" => 0.5, "opacity" => 0 ]);

El texto tiene sus propios parámetros únicos:

"Texto" - el texto que desea mostrar - requerido
"Ruta" - ruta a la fuente (.ttf) - requerida
"Tamaño" - tamaño de fuente
"Color" - color, por ejemplo "#ffffff"
"Ancho": el ancho del bloque de texto, si está configurado, el texto se dividirá automáticamente en líneas
"Alinear" - alineación de texto [izquierda, centro, derecha]
"Sombra" es una sombra

Una sombra también es una matriz de parámetros:

"Color" - el color de la sombra
"Arriba" - sangría desde arriba
"Izquierda" - margen izquierdo

Generación de historias

 $file_hash = $stories->generate("/tmp");

Como resultado, obtenemos el nombre del archivo que está en la carpeta temporal pasado como argumento.

Resultado del trabajo

Vale la pena decir que la velocidad de creación de historias no es excelente, en una buena computadora se genera un clip de 5 segundos en el orden de un minuto, en un servidor simple de más de 3 minutos.

Planes de desarrollo

Agregar guiones de animación estándar para reducir el código
Animaciones de texto (apariencia línea por línea, etc.)
Antecedentes para el texto.

Espero que alguien encuentre útil esta biblioteca. Estaré encantado de escuchar críticas y deseos en lo funcional.

Repositorio Git