Criando histórias para Instagram a partir do PHP

Entrada

Recentemente, as pessoas estão mais dispostas a assistir a vídeos nas redes sociais do que a procurar fotos. O Storis no Instagram obtém 3-4 vezes mais visualizações do que apenas uma foto.

E, é claro, não paramos de esquecer que as redes sociais não são apenas para se mostrar, ver os outros, mas também para promover seus bens, serviços etc. Há muito tempo aprendemos a postar notícias publicadas recentemente no site no VKontakte. Mas e se formos mais longe? E se você enviar essas informações como um vídeo? Ou envie histórias de vídeo interessantes no Instagram para atrair mais atenção do público?

Então, tive a idéia de criar uma biblioteca que me permitisse criar vídeos curtos a partir de fotografias, textos e animações desses objetos. Sim, alguém pode dizer que já existem serviços que permitem que você faça isso, e por que usar uma bicicleta? Em primeiro lugar - eu quero, em segundo lugar - eu posso, em terceiro lugar - será gratuito.

Este artigo é sobre como trabalhar com a biblioteca, como criar suas próprias histórias a partir do PHP.

Limitações

Deve-se dizer imediatamente que a biblioteca usa o FFmpeg para gerar o arquivo de vídeo final. O FFmpeg deve estar instalado no servidor. Talvez no futuro haja uma opção para gerar histórias como um arquivo gif, mas por mim mesmo escolhi o arquivo de vídeo como resultado do trabalho.

Preparação

A biblioteca é instalada através do compositor

composer require borodin-vasiliy/php-stories 

Criando histórias

É hora de criar sua própria história. Por exemplo, queremos ver a foto de fundo de um gatinho, que está um pouco mais próxima ao longo da história e exibir 2 textos com uma animação da aparência. Fácil!


Como você pode ver, todos os parâmetros são passados ​​como uma matriz. No momento, você pode alterar:

• "Width" - largura do Storis em pixels
• "Altura" - altura em pixels
• "Duração" - Duração em segundos
• "Fps" - O número de quadros por segundo, de acordo com o padrão - 30

Em seguida, precisamos adicionar 3 objetos (uma imagem e 2 textos) à nossa história futura. No momento, a biblioteca permite adicionar 4 tipos de objetos diferentes - imagem, texto, eleps, retângulo. Cada objeto tem seu próprio método, o argumento do método é uma matriz dos parâmetros do objeto adicionado.

Os objetos têm como parâmetros comuns:

• "Top" - a posição do objeto a partir da borda superior da história
• "Esquerda" - a posição do elemento a partir da borda esquerda da história
• "Opacidade" - transparência, como em css [0 ... 1]
• "Rodar" - o ângulo de rotação do objeto [0 ... 359]
• "Z-index" - uma camada, como um z-index em css - quanto maior, mais alta será a camada no elemento de quadro
• "Iniciar" - o segundo quando o item deve ser adicionado à história
• "Fim" - o segundo quando o item deve ser removido da história

Tão exclusivo para cada tipo de objeto, por exemplo, para uma imagem:

• "Caminho" - o caminho para a imagem que queremos adicionar
• "Escala" - multiplicador de tamanho da imagem (aproximação)

Feito! Se agora gerar uma história, por 5 segundos admiraremos o gato. Mas prometi que haverá animação, vamos adicioná-lo.

A animação do objeto é adicionada usando um método separado, cujo argumento é uma matriz de parâmetros para os quais o objeto deve chegar. As animações para um objeto podem ser qualquer número. Vale dizer que a sintaxe da biblioteca implica o uso da Interface Fluente.


Como você deve ter notado, o método addAnimation é usado para adicionar animação. Parâmetros necessários para animação:

• "Iniciar" - O segundo quando a animação deve começar. Se não estiver definido, a animação começará quando o objeto for adicionado.
• "Duração" - a duração da animação em segundos

Uma matriz de parâmetros que a animação pode afetar:

• "Top"
• "Esquerda"
• "Opacidade"
• "Rodar"
• "Escala"
• "Largura"
• "Altura"

O texto possui seus próprios parâmetros exclusivos:

• "Texto" - o texto que você deseja exibir - obrigatório
• "Caminho" - caminho para a fonte (.ttf) - obrigatório
• "Tamanho" - tamanho da fonte
• "Cor" - cor, por exemplo "#ffffff"
• "Largura" - a largura do bloco de texto, se definido, o texto será automaticamente dividido em linhas
• "Alinhar" - alinhamento do texto [esquerda, centro, direita]
• "Sombra" é uma sombra

Uma sombra também é uma matriz de parâmetros:

• "Cor" - a cor da sombra
• "Top" - recuo de cima
• "Esquerda" - margem esquerda

Como resultado, obtemos o nome do arquivo que está na pasta temporária passado como argumento.

Resultado do trabalho

Vale dizer que a velocidade de criação de histórias não é grande, em um bom computador é gerado um clipe de 5 segundos na ordem de um minuto, em um servidor simples por mais de 3 minutos.

Planos de desenvolvimento

• Adicionando scripts de animação padrão para reduzir o código
• Animações de texto (aparência linha por linha, etc.)
• Plano de fundo para o texto.

Espero que alguém ache esta biblioteca útil. Ficarei feliz em ouvir críticas e desejos no funcional.

Repositório Git