Usamos vídeo para enriquecer nossas experiências na web de várias maneiras, mas e se eu dissesse que agora você pode usar a web para criar vídeos? Este artigo apresenta o Remotion , um conjunto de bibliotecas que constrói uma base para a criação de vídeos programaticamente usando React.

O Remotion permite que você crie efeitos visuais com canvas, CSS, SVG e WebGL e os componha em vídeo. Você pode até fazer isso programaticamente usando conceitos familiares como variáveis, funções, matemática e assim por diante. Com o Remotion, você também pode usar o código JavaScript para gerar vídeo e, eventualmente, processá-lo em um arquivo MP4, se desejar.

O Remotion tem duas dependências principais que precisamos instalar antes de começarmos: FFmpeg e Node.js. Abaixo estão links para informações e guias de instalação para ambas as plataformas:

• Instalando o FFmpeg
• Instalando o Node

Para entender melhor como o Remotion funciona, veremos o vídeo de demonstração criado quando você inicializa o Remotion.

Inicializando Remoção

Assim que tiver o FFmpeg e o Node, você estará pronto para começar a usar o Remotion. Você pode inicializar um aplicativo React e um vídeo de demonstração usando algum padrão, executando:

 yarn criar vídeo

ou

vídeo init

 npm

Os usuários do Linux precisarão instalar alguns pacotes adicionais para fazer o Chrome/Puppeteer funcionar:

 apt install-y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc ++ 6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 liberação-wxtst6 utils libgets libgets certificados lbg-liberation-libb

Esses comandos irão gerar um aplicativo JavaScript em execução em um servidor expresso que contém o seguinte:

• Um arquivo server.tsx que contém a lógica usada para renderizar seu vídeo
• Um arquivo remotion.config.ts onde você pode configurar várias configurações de Remotion . Você pode ler mais sobre as configurações que pode configurar aqui
• Um Dockerfile opcional que você pode usar se quiser encaixar o servidor para SSR (renderização do lado do servidor)
• Um diretório src contendo os componentes React usados ​​para criar seu vídeo
• Arquivos de configuração para fluxos de trabalho Prettier, ESlint, GitHub e seu editor de código (se você usar VSCode)

O script também instala quaisquer dependências npm de que você precisa para começar. Feito isso, você pode executar o vídeo com yarn start ou npm run start . O player de vídeo do Remotion executará localhost: 3000 com os componentes colocados em uma linha do tempo, semelhante ao que você veria em editores de vídeo como o Adobe Premiere Pro.

Como o Remotion cria vídeo usando React

A ideia básica por trás do Remotion é obter um número de quadro e uma tela em branco para renderizar o que quiser usando várias tecnologias da web, como SVG e WebGL.

Dentro do diretório src , você encontrará uma pasta HelloWorld contendo componentes usados ​​para gerar nosso clipe final e arquivos que os compilam no vídeo final. Nesta seção, veremos como todas essas peças se juntam para fazer um vídeo gerado na web.

Dentro da pasta HelloWorld estão os arquivos que o código de exemplo usa para gerar nosso vídeo: um logotipo React giratório (o átomo) e algum texto animado. Antes de nos aprofundarmos nesses arquivos, vamos dar uma olhada em alguns ganchos e funções do Remotion que usaremos.

useVideoConfig permite que o componente recupere informações sobre o contexto do vídeo. Ele retorna um objeto que contém as propriedades do vídeo, permitindo que sejam reutilizadas entre os componentes. Existem quatro propriedades:

• largura : a largura em pixels
• altura : a altura em pixels
• fps : a taxa de quadros em quadros por segundos
• durationInFrames o número total de frames a serem gerados

useCurrentFrame retorna um inteiro identificando o quadro atual que está sendo visualizado. Você pode usar esse quadro para animar várias propriedades na página, de estados a estilos.

spring permite ao desenvolvedor aproveitar primitivos de animação de primavera que colocam as coisas em movimento natural na web. Eles funcionam de forma semelhante ao React Spring .

interpolar é uma função auxiliar que permite mapear um valor para outro usando uma sintaxe concisa, tornando as animações mais legíveis. Leva quatro argumentos:

• O valor de entrada
• Os valores do intervalo, que a entrada pode assumir
• O intervalo de valores para o qual você deseja mapear a entrada
• Um objeto de opções com configurações adicionais (você pode encontrar mais informações nesta seção da documentação )

Sequência é um componente de ordem superior que permite deslocar no tempo partes da animação e torná-las mais reutilizáveis, seguindo os seguintes adereços:

• from : Um inteiro obrigatório que indica de qual quadro a sequência começa. Quando a sequência está em frame , seus filhos estão em 0`
• durationInFrames : O comprimento da sequência em quadros. Quaisquer componentes que ultrapassem este valor não serão exibidos. Se você deseja que a sequência seja executada por um período ilimitado, você pode passar Infinity porque esta prop é necessária
• nome : Um rótulo opcional usado exclusivamente para identificação
• layout : Um prop opcional que pode ser "preenchimento absoluto" (padrão) ou "nenhum". Quando definido como "preenchimento absoluto", os componentes atuam como camadas e são colocados uns sobre os outros. Você pode passar "none" se desejar personalizar este comportamento

Composição é um componente que registra um vídeo para torná-lo renderizável e o faz aparecer na barra lateral do player do Remotion. Os adereços que ele leva são os mesmos contidos no objeto retornado por useVideoConfig junto com dois adicionais:

• id : ID da composição que é mostrada na barra lateral e também um identificador único da composição. Você deve especificar isso e incluir apenas letras, números e - se quiser renderizá-lo
• componente ou lazyComponent : Este é o componente React com a animação ou uma função que retorna uma importação dinâmica. Você só pode passar um desses dois, pois não passar por nenhum ou ambos os adereços é um erro

Por último, temos a função registerRoot . Este é o componente raiz do projeto Remotion que deve retornar uma ou mais composições envolvidas em um fragmento React.

Esses são os blocos de construção fundamentais de que você precisa para criar um vídeo. Agora vamos vê-los em ação.

Adicionando os componentes React

Dentro da pasta src , temos Arc.tsx , Atom.tsx e Logo.tsx que são usados ​​para gerar o logotipo React. Também temos config.ts , que contém constantes de cores, e Title.tsx e Subtitle.tsx , que criam texto animado para vídeo.

Vejamos Arc.tsx , que usa SVG para criar os arcos no logotipo React. Este arquivo possui o seguinte código:

 importar {useVideoConfig} de'remotion';
importe {COLOR_1, COLOR_2} de'./config';
export Arc const: React.FC <{ progresso: número; rotação: número; rotateProgress: número;
}>=({progresso, rotação, rotateProgress})=> { const config=useVideoConfig (); const cx=config.width/2; const cy=config.height/2; const rx=config.height/8; const ry=rx * 2,2; const arcLength=Math.PI * 2 * Math.sqrt ((rx * rx + ry * ry)/2); const strokeWidth=arcLength/60; Retorna (  );
};

No componente Arc , alimentamos três números que giram o arco com CSS e buscam o objeto config de useVideoConfig . Em seguida, usamos o objeto config para obter o comprimento e a largura que usaremos para gerar as dimensões do arco com SVG e algumas fórmulas matemáticas.

O componente Atom.tsx pega um número de escala e cria o círculo no centro do logotipo, usando-o como a escala da transformação.

 importar {useVideoConfig} de'remotion';
importe {COLOR_1, COLOR_2} de'./config';
export const Atom: React.FC <{ escala: número;
}>=({escala})=> { const config=useVideoConfig (); Retorna (  );
};

Logo.tsx une esses dois componentes para criar o logotipo giratório final. É necessário um valor numérico transactionStart que é usado com frame , interpolar e spring para animar os arcos e com o átomo para criar a animação. Logo contém o seguinte código:

 import {interpolar, spring, useCurrentFrame, useVideoConfig} de'remotion';
import {Arc} de'./Arc';
importar {Atom} de'./Atom';
export logo const: React.FC <{ transiçãoStart: número;
}>=({transactionStart})=> { const videoConfig=useVideoConfig (); const frame=useCurrentFrame (); desenvolvimento const=spring ({ config: { amortecimento: 100, massa: 0,5, }, fps: videoConfig.fps, quadro, Armação, }); const rotaçãoDevelopment=spring ({ config: { amortecimento: 100, massa: 0,5, }, fps: videoConfig.fps, quadro, Armação, }); const scaleIn=spring ({ quadro, Armação, config: { massa: 0,5, }, fps: videoConfig.fps, }); tradução const=interpolar ( Primavera({ frame: frame-transactionStart, fps: videoConfig.fps, config: { amortecimento: 100, massa: 0,5, }, }), [0, 1], [0,-150] ); escala const=quadro <50? scaleIn: 1; const logoRotation=interpolate ( quadro, Armação, [0, videoConfig.durationInFrames], [0, 360] ); Retorna ( 
     
 );
};

O componente Logo possui várias funções spring que são utilizadas para criar a animação final: development , rotationDevelopment , scaleIn e translation . Estes utilizam os parâmetros de primavera definidos aqui junto com o auxiliar de interpolação em alguns casos, como tradução e logoRotation para descrever as propriedades da animação.

Para definir a transformação do logotipo, a propriedade scale utiliza o frame do vídeo que é obtido do gancho useCurrent e o Propriedades translation e logoRotation que são definidas com spring .

Temos três componentes Arc no componente Logo que são girados a 60 graus um do outro para criar a aparência final de simulação de elétrons circulando no centro do átomo.

Title.tsx contém o texto do título, “Bem-vindo ao Remotion”, que aparece após o logotipo. Ele pega o titleText e então o divide e renderiza nas palavras uma por uma:

 import {spring, useCurrentFrame, useVideoConfig} de'remotion';
export const Title: React.FC <{ titleText: string; titleColor: string;
}>=({titleText, titleColor})=> { const videoConfig=useVideoConfig (); const frame=useCurrentFrame (); const text=titleText.split ('').map ((t)=> `$ {t}`); Retorna ( 
 {text.map ((t, i)=> { Retorna (  {t}  ); })} 
 );
};

O componente Title possui duas propriedades: titleText e textColor . A função text mapeia as palavras em titleText em uma matriz. Em seguida, usamos essa matriz para renderizar as palavras na seguinte ordem em uma animação de primavera aplicada ao objeto de estilo da extensão com a função text.map .

Semelhante ao Title , o componente Subtitle também anima algum texto, mas, neste caso, é uma única unidade de texto menor animado junto com o interpolar função .

 import {interpolar, useCurrentFrame} de'remotion';
importe {COLOR_1} de'./config';
exportar const Subtítulo: React.FC=()=> { const frame=useCurrentFrame (); opacidade const=interpolar (quadro, [0, 30], [0, 1]); Retorna ( 
 Editar {''}  src/Video.tsx  {''} e salve para recarregar. 
 );
}; 

Trabalho com sequências e composições

Agora que temos nossos componentes básicos configurados, precisamos fazer uso deles em sequências e composições para criar nosso vídeo final. As sequências, conforme mencionado acima, nos permitem alterar os componentes no tempo e colocá-los em uma espécie de linha do tempo para criar um vídeo final. Você pode ver isso em ação dentro de HelloWorld.tsx , onde os três componentes acima são colocados em uma sequência para criar um clipe final com todos os três animados em momentos diferentes.

 import {interpolar, Sequence, useCurrentFrame, useVideoConfig} de'remotion';
import {Logo} de'./HelloWorld/Logo';
importar {Subtitle} de'./HelloWorld/Subtitle';
importar {Title} de'./HelloWorld/Title';
export const HelloWorld: React.FC <{ titleText: string; titleColor: string;
}>=({titleText, titleColor})=> { const frame=useCurrentFrame (); const videoConfig=useVideoConfig (); opacidade const=interpolar ( quadro, Armação, [videoConfig.durationInFrames-25, videoConfig.durationInFrames-15], [1, 0], { extrapolarLeft:'clamp', extrapolarRight:'clamp', } ); const transiçãoStart=25; Retorna ( 
 
          
 
 );
};

Você pode ver que cada Sequence envolve um componente, e cada uma das sequências tem um valor de diferente. Isso representa o deslocamento na linha do tempo do clipe combinado, que será composto por todos os três componentes animados. Portanto, embora seja possível criar vídeos individualmente de cada um dos componentes, HelloWorld usa sequências para reuni-los em um único clipe.

A próxima etapa é usar a Composição para disponibilizar nossos clipes para o Remotion visualizar no player e renderizar em arquivos .mp4 . Isso é feito no arquivo Video.tsx da seguinte maneira:

• Importe os componentes a serem registrados
• Alimente cada componente para um componente Composição no componente prop
• Especifique o restante das propriedades do vídeo de cada composição e inclua quaisquer adereços adicionais
• Envolva todas as composições em um único fragmento React e exporte-o para ser registrado no componente raiz

 importar {Composição} de'remotion';
importar {HelloWorld} de'./HelloWorld';
import {Logo} de'./HelloWorld/Logo';
importar {Subtitle} de'./HelloWorld/Subtitle';
export const RemotionVideo: React.FC=()=> { Retorna ( <>     );
};

Registrando o componente raiz

Com todas as composições e sequências prontas, agora temos que registrá-las no componente raiz para finalizar nossa configuração. Esta etapa é abordada dentro do arquivo index.tsx em apenas três linhas:

 importar {registerRoot} de'remotion';
importar {RemotionVideo} de'./Video'; registerRoot (RemotionVideo);

Simplesmente importamos o componente de fragmento que criamos em Video.tsx para o arquivo e o passamos para o componente registerRoot . Tudo pronto!

Visualizando e exportando o vídeo

Ao executar o aplicativo, você verá um reprodutor de vídeo em seu navegador semelhante à captura de tela abaixo, onde as várias composições estão listadas e podem ser reproduzidas individualmente.

No Remotion player, você pode reproduzir e pausar seus vídeos e ver onde cada animação se encaixa na linha do tempo. Você também pode ajustar a visualização do vídeo de acordo com sua preferência.

Se você estiver satisfeito com seu vídeo final, renderize e exporte-o em um arquivo de vídeo para uso externo executando:

 npm run build

ou

 construção de fios

Isso executa o comando Remotion CLI subjacente, conforme especificado em package.json :

 npx remotion render src/index.tsx HelloWorld out.mp4

Este comando possui várias opções que podem ser usadas para adicionar à configuração especificada do vídeo, como codecs e formatos. Você pode ler mais sobre essas opções na referência da CLI .

O futuro do Remotion

Embora ainda seja relativamente novo, o Remotion oferece uma maneira interessante e programática de criar vídeos. Os desenvolvedores podem integrar o Remotion aos aplicativos React para adicionar entradas que influenciam dinamicamente a saída de vídeo. Mais coisas boas estão no horizonte para o Remotion, como suporte de áudio adequado, que eu deixei de fora deliberadamente por enquanto, pois ainda está em desenvolvimento. Você pode encontrar mais informações sobre a API de áudio do Remotion na seção de áudio dos documentos .

Remotion é de código aberto, então o criador Jonny Burger criou uma oportunidade para a comunidade dev contribuir para melhorar o que já é um empolgante pacote. O licenciamento em torno do Remotion o torna uma ótima escolha para muitos projetos pessoais ou de pequena escala. Seu uso é gratuito para indivíduos, bem como organizações sem fins lucrativos e com fins lucrativos com três ou menos funcionários. Existem também vários planos de empresa sobre os quais você pode ler aqui se desejar fazer uso do Remotion em uma organização não qualificada para a licença gratuita.

A postagem Remoção: uma estrutura para fazer vídeos no React apareceu primeiro no LogRocket Blog .

Source link