# Transformar página web em vídeo sem captura de tela: o motor do Kodecz

> O Kodecz transforma uma página web em vídeo MP4 sem tirar foto de cada quadro, na placa de vídeo ou só no processador. Num vídeo de 74,7 s, gastou 15 a 17 vezes menos CPU que o Remotion, com o resultado quase igual. Resumo simples do artigo, com os números e onde ele perde.

Pedro Henrique Lahr, Konecz, 2026-11-01. https://konecz.com/blog/kodecz-render

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.

1. **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.
2. **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](https://doi.org/10.6084/m9.figshare.34880682). O código está em [github.com/konecz/kodecz](https://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