Publicado em: 5 de março de 2026
Eu, Sam Bhattacharyya, criei o Free AI Video Upscaler como um projeto de hobby de código aberto em 2023. Ele cresceu de forma inesperada e orgânica para 250.000 usuários ativos por mês (MAU,na sigla em inglês) (em fevereiro de 2026). Isso foi possível porque o projeto foi criado com processamento de IA do lado do cliente, que não tem custos de processamento do servidor. Você pode melhorar vídeos no navegador sem precisar instalar software ou fazer login.
Este documento explica como usei o WebGPU e o WebCodecs para adicionar processamento sem custo financeiro do lado do cliente ao meu aplicativo.
Desafios com o custo do servidor
Em uma função anterior, gerenciei a infraestrutura de IA de uma ferramenta de transmissão ao vivo baseada em navegador com milhões de usuários e custos orçamentários significativos para processar vídeos no lado do servidor.
O processamento de vídeo do lado do servidor representou 20% do orçamento. Esse era um grande custo variável para a empresa, perdendo apenas para os salários. Para cada recurso de IA, como transcrição, áudio ou melhoria de vídeo, a equipe enfrentou requisitos orçamentários rigorosos (US$ 0, 1 por hora de vídeo) para novas implementações.
A IA do lado do cliente foi a única exceção, com recursos como planos de fundo virtuais e remoção de ruído de fundo implementados usando um SDK interno do lado do cliente. Esses recursos de IA não geraram custos de processamento do servidor porque a inferência do modelo e o processamento de vídeo ocorreram no dispositivo do usuário.
APIs como WebCodecs permitem criar pipelines completos de processamento de vídeo, incluindo suítes completas de edição de vídeo, no navegador. O WebGPU torna a IA do lado do cliente muito mais eficiente.
Processamento do lado do cliente com WebCodecs e WebGPU
O Free AI Video Upscaler usa o WebSR SDK de código aberto. Esse SDK aceita uma imagem, aumenta a escala dela e pinta o resultado em uma tela.
Uma rede neural de superresolução realiza o aumento aplicando convoluções de imagem repetidas (multiplicações de matrizes) para extrair atributos de uma imagem de origem. Mais convoluções são aplicadas a esses recursos de imagem para reconstruir a imagem final de maior qualidade.
O WebSR implementa essas camadas de convolução de rede neural como shaders de computação WebGPU. Por exemplo, consulte uma camada de exemplo e a rede completa. Quando você chama o método de renderização, o SDK executa cada camada da rede de upscaling e gera a imagem final em uma tela. Saiba mais sobre a implementação de rede neural.
import WebSR from "https://esm.sh/@websr/websr@0.0.15";
const gpu = await WebSR.initWebGPU();
const canvas = document.getElementById("canvas");
const websr = new WebSR({
network_name: "anime4k/cnn-2x-l",
weights: await (
await fetch("https://katana.video/files/cnn-2x-lg-2d-animation.json")
).json(),
gpu,
canvas,
});
const img = document.getElementById("source");
const bitmap = await createImageBitmap(img);
await websr.render(bitmap);
Confira o exemplo do SDK WebSR no Codepen.
É possível substituir o SDK WebSR por qualquer modelo usando frameworks como MediaPipe ou TensorflowJS. O pipeline de processamento de vídeo usa WebCodecs e é estruturado como um pipeline de transcodificação.
O pipeline é dividido em várias etapas:
- Demuxing: lê partes de vídeo codificadas de um objeto de arquivo.
- Decodificação: decodifica partes codificadas em objetos VideoFrame.
- Processamento: converte o VideoFrame de entrada em um VideoFrame ampliado.
- Codificação: codifica os objetos VideoFrame com aumento de resolução em novos blocos codificados.
- Multiplexação: grava os blocos codificados de saída no arquivo de saída.
O pipeline usa a API Streams. A
codificação, a decodificação e a demux ou mux são implementadas como streams. Para uma demonstração,
o projeto usa utilitários de multiplexação e stream da webcodecs-utils
library. Essa biblioteca fornece wrappers de
streaming para
VideoEncoder
e
VideoDecoder.
import {
SimpleDemuxer,
VideoDecodeStream,
VideoProcessStream,
VideoEncodeStream,
SimpleMuxer,
} from "https://esm.sh/webcodecs-utils";
import WebSR from "https://esm.sh/@websr/websr@0.0.15";
// Fetch demo video
const arrayBuffer = await (
await fetch("https://katana.video/files/hero-small.mp4")
).arrayBuffer();
const videoFile = new File([arrayBuffer], "hero-small.mp4", {
type: "video/mp4",
});
// Initialize WebGPU and WebSR
const gpu = await WebSR.initWebGPU();
const weights = await (
await fetch("https://katana.video/files/cnn-2x-lg-2d-animation.json")
).json();
const websr = new WebSR({
network_name: "anime4k/cnn-2x-l",
weights,
gpu,
canvas,
});
// Set up demuxer
const demuxer = new SimpleDemuxer(videoFile);
await demuxer.load();
const decoderConfig = await demuxer.getVideoDecoderConfig();
const encoderConfig = {
codec: "avc1.4d0034", // https://webcodecsfundamentals.org/codecs/avc1.4d0034.html
width: 640,
height: 360,
bitrate: 1000000,
framerate: 30,
};
// Set up muxer
const muxer = new SimpleMuxer({ video: "avc" });
// Build the upscaling pipeline
await demuxer
.videoStream()
.pipeThrough(new VideoDecodeStream(decoderConfig))
.pipeThrough(
new VideoProcessStream(async (frame) => {
// AI upscale with WebSR
await websr.render(frame);
const upscaledFrame = new VideoFrame(canvas, {
timestamp: frame.timestamp,
duration: frame.duration,
});
return upscaledFrame;
}),
)
.pipeThrough(new VideoEncodeStream(encoderConfig))
.pipeTo(muxer.videoSink());
// Get output
const blob = await muxer.finalize();
Confira o pipeline completo no Codepen.
A API Streams é especialmente útil com o WebCodecs porque usa contrapressão para diminuir automaticamente as etapas upstream, como decodificação, se uma etapa, como codificação, ficar sobrecarregada. Isso evita problemas de memória e melhora a eficiência.
Isso cria uma experiência do usuário simples:
- Você envia um vídeo com uma entrada de arquivo.
- O sistema processa o vídeo localmente.
- Você pode baixar o resultado como um Blob.
Saiba mais sobre como criar um pipeline de transcodificação em WebCodecs. Você também pode conferir o pipeline de processamento completo do Free AI Video Upscaler (em inglês), que tem menos de 400 linhas de código, no GitHub.
Resultados
A única promoção do Free AI Video Upscaler foi uma postagem única no Reddit. Apesar disso, ele cresceu organicamente para 250.000 usuários ativos por mês, com uma taxa de crescimento de 32% entre um mês e outro, graças ao boca a boca dos usuários que compartilham a ferramenta em fóruns.
250.000
Usuários ativos mensais
10.000
Vídeos processados por dia
30.000
Horas de vídeo processadas por mês
0 $
Custos de processamento do servidor
Ele processa 10.000 vídeos por dia (30.000 horas de vídeo por mês) sem custos de servidor.
O Free AI Video Upscaler serve como uma ferramenta de geração de leads para um serviço pago de ampliação de vídeo com IA. Também criei esse serviço usando modelos de IA mais avançados executados do lado do servidor. Essa abordagem gera lucratividade sem marketing, enquanto o aplicativo inicial permanece sem custo financeiro e de código aberto.
Recomendações e recursos
Antes do WebCodecs e do WebGPU, os aplicativos que exigiam muito processamento de vídeo precisavam de software para computador, o que podia ser complicado, ou de processamento caro do lado do servidor. Os custos de servidor geralmente representavam uma parte significativa dos custos operacionais de um aplicativo de vídeo.
Com essas APIs do navegador, é possível criar aplicativos eficientes de processamento de vídeo do lado do cliente. Esses aplicativos são mais intuitivos e oferecem menos atrito do que o software para computador. Além disso, são mais acessíveis e escalonáveis do que o processamento do lado do servidor.
Se você quiser saber mais sobre o WebCodecs e como criar aplicativos de vídeo como o Free Vídeo com IA Upscaler ou o Katana, leia WebCodecsFundamentals. Você vai aprender a criar aplicativos WebCodecs de produção com foco em produção e detalhes de implementação.