Como transformar automaticamente dados ao vivo em vídeos compartilháveis

• Foi criado um fluxo de trabalho baseado na web para transformar dados ao vivo, atualizados a cada poucos dias, em vídeos sociais sem que uma pessoa precise editá-los toda vez
• A fonte do vídeo não é um arquivo de edição, mas uma página web oculta; o Playwright move o navegador quadro a quadro e o ffmpeg empacota tudo em MP4 e GIF
• Um breve storyboard.ts e um único playhead organizam os números de hoje, fades, o ponto inicial de dezembro de 2024 e um período de crescimento de 18 meses em um clipe de cerca de 14 segundos
• Uma GitHub Action agendada detecta mudanças nos dados, recompila e reimplanta o site, gera 4 cortes conforme combinações de proporção e idioma e publica tudo na CDN CloudFront
• O YouTube permite upload de rascunhos não listados, mas o Instagram só oferece publicação pública imediata; por isso, mantém-se uma etapa de aprovação humana para revisão final e edição das legendas

---

Estrutura que usa uma página web como fonte do vídeo

• O vídeo não parte de um projeto de edição separado, mas de uma página dedicada oculta dentro do site
• Essa página foi projetada para a tela vertical 9:16 usada em Reels, Shorts e TikTok
• A tela reutiliza elementos existentes do site ao vivo
  • Título
  • Número grande de instituições
  • Gráfico animado
  • Mapa nacional
  • Pequena linha de créditos
• Ela aproveita animações de timeline e efeitos de movimento do navegador, enquanto o computador controla um navegador headless invisível para o usuário
• Como uma página web comum, pode ser aberta diretamente no navegador para avançar e retroceder, facilitando pré-visualização e depuração
• Ela herda o framework multilíngue do site, permitindo capturar vídeos em cada idioma compatível
• A asset bakery, o pipeline de dados e o frontend deste projeto estão disponíveis como open source

storyboard.ts e playhead

• Um único arquivo storyboard.ts define o timing e as transições do vídeo como uma lista de tomadas de um diretor
• A composição é formada por alguns beats nomeados e suas durações
  • Manter o total de hoje por 1,5 segundo
  • Fade de 0,7 segundo
  • Manter o ponto de dezembro de 2024, quando os dados começam, por 1,5 segundo
  • Em seguida, reproduzir para frente o período de crescimento de 18 meses
  • Assentar novamente na tela de hoje
• O resultado final é um clipe de cerca de 14 segundos
• O desenho do gráfico, a exibição dos pontos no mapa e o incremento do contador ficam vinculados a um único playhead
• O playhead faz com que todos os componentes renderizem o mesmo estado em um timestamp específico, evitando que elementos da tela fiquem dessincronizados

O método de “assar” quadro a quadro

• O arquivo de vídeo real é criado abrindo a página web em um navegador headless e controlando o Chromium com Playwright
• No início, parecia possível apertar virtualmente o botão de reprodução e capturar a tela por gravação, mas a gravação em tempo real podia perder quadros ou engasgar
• O mesmo vídeo podia rodar suavemente localmente e se comportar de outro jeito no hardware da nuvem; nos experimentos iniciais, às vezes ele até era reproduzido anormalmente rápido
• Para um resultado mais estável, em vez de gravação em tempo real, os quadros são gerados um a um, como um flipbook
  • Pedir à página: “mostre a aparência no ponto de 0,04 segundo”
  • Tirar um screenshot
  • Avançar para 0,08 segundo e tirar outro screenshot
  • Repetir esse processo centenas de vezes
• Como se fosse avançar manualmente uma página congelada, cada imagem é capturada em um estado totalmente renderizado
• O resultado é determinístico e testável; ao executar duas vezes, deve-se obter os mesmos quadros de forma verificável
• Se o número de quadros dobra, o tempo de computação e o espaço de armazenamento necessários para renderização também praticamente dobram

Detalhes para estabilizar a renderização no servidor

• O mapa nacional usa MapLibre GL JS e normalmente é renderizado com código WebGL que espera uma GPU
• Como o servidor não tem GPU, o Chromium é configurado para usar renderização por software
  • É mais lenta do que hardware gráfico real
  • Consegue rodar com qualidade semelhante em quase todas as plataformas
• Cada quadro é salvo como JPEG, não PNG
  • A codificação PNG era a parte lenta dos screenshots
  • Como o vídeo resultante parece igual, há ganho de velocidade ao longo de centenas de quadros
• Algumas flags são necessárias para que o navegador headless rode de forma estável em um bare server dentro de um contêiner, e os detalhes completos estão no repositório público
• As centenas de imagens geradas são unidas pelo ffmpeg em MP4 e em um GIF em loop

Automação baseada em GitHub Action

• Todo o processo é conectado a um pipeline automatizado de dados executado por uma GitHub Action agendada
• Algumas vezes por dia, ele verifica se os dados mudaram
• Quando novos dados chegam, o job faz o seguinte
  • Recompila o site
  • Reimplanta o site
  • Gera 4 cortes nas combinações de proporção quadrada/vertical e inglês/espanhol
  • Publica na CDN CloudFront
• A página pública de download oferece os cortes mais recentes por idioma compatível
• A última etapa inclui upload de rascunho para o YouTube e alerta de publicação para o Instagram
  • O script para YouTube é publish-social-youtube.mjs
  • O alerta de preparação para publicação no Instagram é notify-social-ready.mjs
  • A integração com TikTok também está planejada

A fronteira entre automação e controle editorial

• O projeto não descarta automação completa, mas mantém revisão humana antes de qualquer vídeo ser publicado
• O controle editorial sobre título e legenda, a revisão final e a decisão sobre como publicar ficam com pessoas
• Como os dados de entrada podem ser ruins ou o sistema pode produzir resultados incorretos, evita-se a publicação automática às cegas
• O YouTube cria vídeos em rascunho não listados por meio da API oficial
• Como a API do Instagram só permite publicação pública imediata, sempre que há novos dados o sistema cria um rascunho no YouTube e envia um alerta por e-mail pedindo a criação manual da publicação no Instagram

Produção de vídeos sociais que termina em web design

• A vantagem desse método é que o design do vídeo passa a ser web design
• Ele não depende de After Effects, reexportações manuais, números desatualizados ou produtores web ocupados
• Mudanças de cor ou rótulo se resolvem com a alteração de uma linha e aparecem na próxima renderização
• O sistema inteiro é composto por algumas centenas de linhas de glue code em torno de ferramentas existentes
  • Pipeline de dados
  • Navegador headless
  • Mapas e gráficos já usados no site
  • ffmpeg
• O custo de execução fica na faixa de alguns dólares por mês
• O Missouri Vehicle Stops MCP, citado como comparação, parece custar atualmente cerca de 50 dólares por mês
• A asset bakery tem custo por usuário menor que o MCP, enquanto o MCP se parece mais com uma ferramenta que oferece envolvimento mais profundo com os dados

Estratégia e o papel do “shortcut”

• A estratégia é responder às plataformas mainstream com assets de alta qualidade gerados automaticamente para compartilhamento, ao mesmo tempo em que oferece suporte a ferramentas modernas de dados, como MCP, para usuários mais engajados
• O objetivo não é um circo viral nem um público geral indefinido, nem um único produto que sirva para todos
• Um shortcut não é trapaça; é uma forma de aproveitar recursos já existentes para ir mais longe e se desgastar menos
• Ao conectar recursos existentes com uma GitHub Action, só é preciso pensar em vídeo quando se quer fazer um vídeo ou quando a situação realmente exige isso