Créer des histoires pour Instagram à partir de PHP

Entrée

Récemment, les gens ont été plus enclins à regarder des vidéos sur les réseaux sociaux qu'à parcourir des photos. Storis sur Instagram gagne 3-4 fois plus de vues qu'une simple photo présentée.

Et bien sûr, nous ne cessons d'oublier que les réseaux sociaux ne sont pas seulement pour se montrer, voir les autres, mais aussi pour promouvoir leurs biens, leurs services, etc. Nous avons depuis longtemps appris à publier des nouvelles fraîchement publiées sur le site de VKontakte. Et si on allait plus loin? Et si vous soumettez ces informations sous forme de vidéo? Ou télécharger des histoires vidéo intéressantes sur Instagram pour attirer davantage l'attention du public?

J'ai donc eu l'idée de créer une bibliothèque qui me permettrait de créer de courtes vidéos à partir de photographies, de textes et d'animations de ces objets. Oui, quelqu'un peut dire qu'il existe déjà des services qui vous permettent de le faire, et pourquoi proposer un vélo? Premièrement - je veux, deuxièmement - je peux, troisièmement - ce sera gratuit.

Cet article explique comment travailler avec la bibliothèque, comment créer vos propres histoires à partir de PHP.

Limitations

Il faut dire tout de suite que la bibliothèque utilise FFmpeg pour générer le fichier vidéo final. FFmpeg doit être installé sur le serveur. Peut-être qu'à l'avenir, il y aura une option pour générer des histoires sous forme de fichier gif, mais pour moi, j'ai choisi le fichier vidéo à la suite du travail.

La préparation

La bibliothèque est installée via le compositeur

composer require borodin-vasiliy/php-stories 

Créer des histoires

Il est temps de créer votre propre histoire. Par exemple, nous voulons voir la photo d'arrière-plan d'un chaton, qui est un peu plus proche tout au long de l'histoire et afficher 2 textes dessus avec une animation de l'apparence. C'est facile!


Comme vous pouvez le voir, tous les paramètres sont passés sous forme de tableau. Pour le moment, vous pouvez changer:

• "Largeur" ​​- Largeur de Storis en pixels
• "Hauteur" - Hauteur en pixels
• "Durée" - Durée en secondes
• "Fps" - Le nombre d'images par seconde, selon la norme - 30

Ensuite, nous devons ajouter 3 objets (une image et 2 textes) à notre future histoire. Pour le moment, la bibliothèque vous permet d'ajouter 4 types d'objets différents - image, texte, eleps, rectangle. Chaque objet a sa propre méthode, l'argument de la méthode est un tableau des paramètres de l'objet ajouté.

Les objets ont comme paramètres communs:

• "Top" - la position de l'objet à partir du bord supérieur de l'histoire
• "Gauche" - la position de l'élément par rapport au bord gauche de l'histoire
• "Opacity" - transparence, comme dans css [0 ... 1]
• "Rotation" - l'angle de rotation de l'objet [0 ... 359]
• "Z-index" - un calque, comme un z-index en css - plus il est grand, plus le calque sera situé sur l'élément frame
• "Démarrer" - le deuxième moment où l'élément doit être ajouté à l'histoire
• "Fin" - le deuxième moment où l'élément doit être supprimé de l'histoire

Si unique pour chaque type d'objet, par exemple pour une image:

• "Chemin" - Le chemin vers l'image que nous voulons ajouter
• «Échelle» - Multiplicateur de taille d'image (approximation)

C'est fait! Si en ce moment générez une histoire, alors pendant 5 secondes nous admirerons le chat. Mais j'ai promis qu'il y aurait de l'animation, ajoutons-le.

L'animation de l'objet est ajoutée à l'aide d'une méthode distincte, dont l'argument est un tableau de paramètres auquel l'objet doit arriver. Les animations pour un objet peuvent être n'importe quel nombre. Il vaut la peine de dire que la syntaxe de la bibliothèque implique l'utilisation de l'interface Fluent.


Comme vous l'avez peut-être remarqué, la méthode addAnimation est utilisée pour ajouter une animation. Paramètres requis pour l'animation:

• "Démarrer" - Le second moment où l'animation doit commencer. S'il n'est pas défini, l'animation démarre lorsque l'objet est ajouté.
• "Durée" - La durée de l'animation en secondes

Un tableau de paramètres que l'animation peut affecter:

• "Top"
• "Gauche"
• "Opacité"
• "Rotation"
• "Échelle"
• "Largeur"
• "Hauteur"

Le texte a ses propres paramètres uniques:

• "Texte" - le texte que vous souhaitez afficher - obligatoire
• "Path" - chemin d'accès à la police (.ttf) - obligatoire
• "Taille" - taille de police
• "Couleur" - couleur, par exemple "#ffffff"
• "Largeur" ​​- la largeur du bloc de texte, si elle est définie, le texte sera automatiquement divisé en lignes
• «Aligner» - alignement du texte [gauche, centre, droite]
• "Shadow" est une ombre

Une ombre est également un tableau de paramètres:

• "Couleur" - la couleur de l'ombre
• "Haut" - indentation par le haut
• «Gauche» - marge gauche

Par conséquent, nous obtenons le nom du fichier qui se trouve dans le dossier temporaire passé en argument.

Résultat du travail

Il vaut la peine de dire que la vitesse de création des histoires n'est pas grande, sur un bon ordinateur un clip de 5 secondes est généré de l'ordre d'une minute, sur un simple serveur de plus de 3 minutes.

Plans de développement

• Ajout de scripts d'animation standard pour réduire le code
• Animations de texte (apparence ligne par ligne, etc.)
• Contexte pour le texte.

J'espère que quelqu'un trouvera cette bibliothèque utile. Je serai heureux d'entendre des critiques et des souhaits dans le fonctionnel.

Dépôt Git