Transformar página web em vídeo sem captura de tela: o motor do Kodecz
Artigo por Pedro Henrique Lahr
O Kodecz é um motor de código aberto que transforma uma página web em vídeo MP4. A diferença dele é que nenhum quadro vira uma foto no caminho, nem na placa de vídeo nem no processador. Num vídeo real de 74,7 segundos, isso fez o processador trabalhar 15 a 17 vezes menos que no Remotion, e o vídeo saiu quase igual.
O que é renderizar uma página como vídeo?
Dá para fazer um vídeo escrevendo uma página de site, com textos, cores e animações. Renderizar é transformar essa página em vídeo, quadro por quadro. Um vídeo tem 30 quadros por segundo, como as folhas de um livrinho que a gente folheia rápido para ver o desenho mexer.
Por que a captura de tela pesa tanto?
As ferramentas mais usadas, como o Remotion e o HyperFrames, tiram uma foto da página a cada quadro. Cada foto sai da placa de vídeo, é copiada para o processador, comprimida como imagem (PNG ou JPEG) e depois aberta de novo para virar vídeo. É como imprimir cada folha do livrinho, escanear de volta e só então montar o filme.
Quando a página tem um vídeo gravado dentro, é pior: esse vídeo passa várias vezes pelo processador antes da foto.
Como o Kodecz faz sem foto?
Ele tem dois caminhos. Os dois usam a mesma página e dão o mesmo quadro.
- Com placa de vídeo NVIDIA (GPU). A GPU é a peça do computador feita para imagens. O quadro desenhado pelo navegador fica dentro da placa e vai direto para o codificador de vídeo dela (o NVENC), sem passar pelo processador.
- Só com o processador (CPU). Em qualquer máquina, sem placa NVIDIA, o navegador pinta o quadro e entrega esse quadro cru direto ao codificador x264. Nunca vira PNG nem JPEG.
Mais três ideias ajudam:
- Linha do tempo declarada. Nada se mexe sozinho. Para o quadro N, o motor coloca cada animação no instante certo. Por isso o quadro N é sempre o mesmo, comece o vídeo do início, do meio ou fora de ordem.
- Quadros repetidos quase de graça. Quando a página avisa que um quadro não mudou, o motor escreve uma marca de cerca de 40 bytes dizendo «repete o anterior», sem desenhar nem codificar de novo.
- Vídeo gravado fora do navegador. O próprio motor abre o vídeo gravado na placa e coloca embaixo da página, com o tamanho e os cantos que a página pede.
Quanto mais rápido ficou?
Num vídeo de produção de 74,7 segundos, com uma pessoa falando, gráficos e som, comparado com o Remotion usando a placa:
| Formato | CPU no Remotion | CPU no Kodecz |
|---|---|---|
| Horizontal (16:9) | 473,5 s | 30,8 s |
| Vertical (9:16) | 481,1 s | 28,6 s |
- O tempo de espera caiu 67%: de 116,9 s para 38,8 s no horizontal.
- A memória usada caiu de 3,7 a 4,5 GB para 0,76 a 1,06 GB.
- A semelhança com o vídeo do Remotion (SSIM, uma nota de 0 a 1 em que 1 é igual) ficou entre 0,991 e 0,992.
Sem placa nenhuma, com a placa escondida das duas ferramentas e o mesmo ajuste do x264, o caminho pela CPU gastou 1,2 e 3,1 vezes menos processador que o Remotion em dois vídeos de teste.
Onde ele perde?
O artigo conta os casos ruins também:
- Num vídeo de teste com muito som, o Kodecz demorou mais no relógio: 19,1 s contra 15,6 s do Remotion.
- O caminho pela placa só funciona com NVIDIA no Linux. Mac, Windows e placas AMD não são suportados.
- Em vídeos reais com texto animado, dois renders podem diferir em até 2 níveis de cor, por causa do jeito que o navegador desenha. Não dá para ver a olho.
Perguntas frequentes
Preciso de placa de vídeo para usar o Kodecz? Não. Sem placa NVIDIA, ele usa o caminho pela CPU, com a mesma página e o mesmo quadro.
Posso usar React, GSAP ou Lottie? Sim. A página é uma página web normal. Animações de CSS, GSAP e Lottie seguem a linha do tempo do motor.
O Kodecz substitui o Remotion? Os dois transformam código em vídeo. O Remotion pede componentes React; o Kodecz aceita qualquer página. O artigo compara os dois com números e mostra onde cada um ganha.
Artigo completo
Este texto é um resumo. O artigo completo, com o método, as tabelas e o que não funcionou, está em doi.org/10.6084/m9.figshare.34880682. O código está em github.com/konecz/kodecz.
Como citar: Lahr, Pedro Henrique. Kodecz: rendering web pages as video without screenshots, on the GPU and on the CPU, with a declared timeline and deterministic frames. Figshare, 1 nov. 2026. https://doi.org/10.6084/m9.figshare.34880682