Por Que Construímos uma Ferramenta de Processamento de Vídeo Baseada no Navegador

Quando nos propusemos a construir ferramentas de vídeo para a web, a sabedoria convencional era clara: o processamento de vídeo pertence ao servidor. Faça o upload do arquivo, execute o FFmpeg, retorne o resultado. Simples, comprovado e profundamente limitado por largura de banda, custo e privacidade.

Pensamos que deveria haver uma maneira melhor. Acontece que há — e ela esteve em nossos navegadores o tempo todo.

O Status Quo: ffmpeg.wasm

Nos últimos anos, o ffmpeg.wasm tem sido a solução preferida para o processamento de vídeo no navegador. Ele compila o FFmpeg para WebAssembly, dando acesso a todo o kit de ferramentas do FFmpeg diretamente no navegador. Funciona, mas vem com desvantagens significativas:

• Tamanho de pacote grande: o núcleo do ffmpeg.wasm tem ~25MB, com codecs específicos de formato empurrando-o para mais de 30MB
• Inicialização lenta: Carregando um módulo WebAssembly de 25MB antes que qualquer processamento comece
• Monothread por padrão: Sem acesso à aceleração de hardware
• Restrições de memória: Limites de memória linear do WebAssembly (4GB) criam problemas com arquivos grandes
• Sem decodificação de hardware: Decodificação/codificação apenas por software, perdendo completamente a aceleração da GPU

Em nossos benchmarks, uma compressão de vídeo MP4 de 50MB com 70% de qualidade levou 45-60 segundos com ffmpeg.wasm. Não é terrível, mas também não é ótimo.

A Abordagem WebCodecs

A WebCodecs API é uma API de navegador relativamente nova que fornece acesso direto aos codecs de mídia nativos do navegador — os mesmos usados para reprodução de vídeo no YouTube, Netflix e todas as outras plataformas de streaming. Principais vantagens:

• Aceleração de hardware: Usa GPU para decodificação e codificação onde disponível
• Zero sobrecarga de pacote: Sem WebAssembly, sem binários compilados — é uma API nativa do navegador
• Inicialização rápida: Disponível imediatamente, sem tempo de carregamento
• Suporte total a formatos: H.264, H.265, VP8, VP9, AV1 — o que seu navegador suportar

A pegadinha? WebCodecs é de baixo nível. Você precisa lidar com demuxing, codificação quadro a quadro, formatação de contêiner e tudo mais. Isso é muita infraestrutura.

Entre no mediabunny

Construímos o mediabunny — uma biblioteca leve que envolve a WebCodecs com uma API simples e ergonômica. Ela lida com as partes complexas:

• Demuxing automático: Detecta o formato do contêiner e extrai fluxos de vídeo/áudio
• Controle em nível de quadro: Acessa quadros individuais para edição precisa
• Recodificação inteligente: Predefinições de qualidade configuráveis com progresso em tempo real
• Streaming eficiente em memória: Processa quadros em blocos, não todos de uma vez

Comparação de Desempenho

3-5x mais rápido em todos os aspectos, com uso de memória dramaticamente menor e zero sobrecarga de pacote.

Privacidade: A Funcionalidade Matadora

O desempenho é ótimo, mas aqui está o que realmente diferencia o processamento baseado em navegador: privacidade por arquitetura.

Com ferramentas baseadas em servidor, você está confiando seus dados a outra pessoa. Mesmo serviços bem-intencionados têm servidores que podem ser violados, intimados ou mal configurados. Com o VideosKit:

• Os arquivos nunca saem do seu dispositivo — literalmente não há um endpoint de servidor para uploads de arquivos
• Sem cookies, sem rastreamento, sem análise do conteúdo do arquivo
• Funciona offline uma vez carregado — processe vídeos em um avião, em uma rede restrita, em qualquer lugar
• Amigável para empresas com conteúdo sensível — sem preocupações com residência de dados ou conformidade

Os Desafios de Desenvolvimento

Construir isso não foi sem desafios:

Manuseio de Arquivos Grandes

Os navegadores não fornecem acesso aleatório a arquivos. Usamos a File API + streaming para processar vídeos quadro a quadro sem carregar o arquivo inteiro na memória. Isso exigiu um gerenciamento cuidadoso de buffers e ajuste da coleta de lixo.

Compatibilidade entre Navegadores

A WebCodecs é suportada no Chrome 94+, Edge 94+ e Safari 16.4+. O Firefox adicionou suporte na versão 130. Detectamos a capacidade e, graciosamente, retornamos uma mensagem para navegadores não suportados.

Gerenciamento de Memória

Os quadros de vídeo são grandes — um único quadro 4K tem ~33MB descompactado. Implementamos pool de quadros e pipelines de streaming para manter o uso de memória sob controle, mesmo com conteúdo 4K.

Relatório de Progresso

Os usuários precisam saber quanto tempo esperar. Construímos um sistema de callback que relata o progresso com base na posição do quadro, fornecendo atualizações precisas em tempo real.

Código Aberto

VideosKit e mediabunny são ambos de código aberto. Confira o código:

• VideosKit: github.com/nicely-gg/video-tools
• mediabunny: github.com/nicely-gg/mediabunny

Contribuições, problemas e feedback são bem-vindos.

O Futuro do Vídeo Baseado no Navegador

A WebCodecs ainda está evoluindo. A codificação AV1, o processamento alimentado por WebGPU e as MediaSource Extensions aprimoradas tornarão o vídeo baseado no navegador ainda mais poderoso. Estamos entusiasmados em ultrapassar os limites do que é possível.

Se você ainda não experimentou o VideosKit, visite videoskit.cc. Compacte, converta, corte ou inspecione um vídeo — tudo no seu navegador, tudo de graça.