Publicado: 5 de marzo de 2026
Yo, Sam Bhattacharyya, creé Free AI Video Upscaler inicialmente como un proyecto de pasatiempo de código abierto en 2023. Creció de forma inesperada y orgánica hasta alcanzar los 250,000 usuarios activos mensuales (UAM) (a partir de febrero de 2026). Esto fue posible porque el proyecto se creó con procesamiento de IA del cliente, que no tiene costos de procesamiento del servidor. Puedes mejorar videos en el navegador sin necesidad de instalar software ni acceder a tu cuenta.
En este documento, se explica cómo usé WebGPU y WebCodecs para agregar procesamiento gratuito del cliente a mi aplicación.
Desafíos relacionados con el costo del servidor
En un puesto anterior, administré la infraestructura de IA de una herramienta de transmisión en vivo basada en el navegador con millones de usuarios y costos presupuestarios significativos para procesar videos del lado del servidor.
El procesamiento de video del servidor representó el 20% del presupuesto. Este era un costo variable importante para la empresa, solo superado por los salarios. Para cada función basada en IA, como la transcripción o la mejora de audio o video, el equipo debió cumplir con estrictos requisitos de presupuesto (USD 0.1 por hora de video) para las nuevas implementaciones.
La IA del cliente fue la única excepción, con funciones como los fondos virtuales y la eliminación del ruido de fondo implementadas con un SDK interno del cliente. Estas funciones basadas en IA no generaron costos de procesamiento del servidor, ya que la inferencia del modelo y el procesamiento de video se realizaron en el dispositivo del usuario.
Las APIs como WebCodecs permiten crear canalizaciones completas de procesamiento de video, incluidas suites de edición de video completas, en el navegador. WebGPU hace que la IA del cliente sea mucho más eficiente.
Procesamiento del cliente con WebCodecs y WebGPU
Free AI Video Upscaler usa el SDK de WebSR de código abierto. Este SDK acepta una imagen, la mejora y pinta el resultado en un lienzo.
Una red neuronal de superresolución logra el aumento de tamaño aplicando convoluciones de imágenes (multiplicaciones de matrices) repetidas para extraer atributos de imágenes de una imagen fuente. Luego, se aplican más convoluciones a estas características de la imagen para reconstruir la imagen final de mayor calidad.
WebSR implementa estas capas de convolución de redes neuronales como sombreadores de procesamiento de WebGPU. Por ejemplo, consulta una capa de ejemplo y la red completa. Cuando llamas al método de renderización, el SDK ejecuta cada capa de la red de aumento de escala y genera la imagen final en un lienzo. Puedes obtener más información sobre la implementación de la red neuronal.
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);
Consulta el ejemplo del SDK de WebSR en Codepen.
Puedes reemplazar el SDK de WebSR por cualquier modelo con frameworks como MediaPipe o TensorFlow.js. La canalización de procesamiento de video usa WebCodecs y se estructura como una canalización de transcodificación.
La canalización se divide en varias etapas:
- Demuxing: Lee fragmentos de video codificados desde un objeto File.
- Decodificación: Decodifica fragmentos codificados en objetos VideoFrame.
- Procesamiento: Convierte el VideoFrame de entrada en un VideoFrame mejorado.
- Codificación: Codifica los objetos VideoFrame aumentados en nuevos fragmentos codificados.
- Multiplexación: Escribe los fragmentos codificados de salida en el archivo de salida.
La canalización usa la API de Streams. La codificación, la decodificación, la demultiplexación o la multiplexación se implementan como transmisiones. Para una demostración, el proyecto usa utilidades de multiplexación y transmisión de la biblioteca webcodecs-utils. Esta biblioteca proporciona wrappers de transmisión para VideoEncoder y 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();
Consulta la canalización completa en Codepen.
La API de Streams es especialmente útil con WebCodecs porque usa contrapresión para reducir automáticamente la velocidad de las etapas anteriores, como la decodificación, si una etapa, como la codificación, se sobrecarga. Esto evita problemas de memoria y mejora la eficiencia.
Esto crea una experiencia del usuario sencilla:
- Subes un video con una entrada de archivo.
- El sistema procesa el video de forma local.
- Puedes descargar el resultado como un Blob.
Obtén más información para compilar una canalización de transcodificación en WebCodecs. También puedes ver la canalización de procesamiento completa de Free AI Video Upscaler, que tiene menos de 400 líneas de código, en GitHub.
Resultados
La única promoción de Free AI Video Upscaler fue una publicación en Reddit. A pesar de esto, creció de forma orgánica hasta alcanzar los 250,000 usuarios activos por mes, con una tasa de crecimiento intermensual del 32%, gracias al boca a boca de los usuarios que compartieron la herramienta en foros.
250,000
Usuarios activos por mes
10,000
Videos procesados por día
30,000
Horas de video procesadas por mes
0 USD
Costos de procesamiento del servidor
Procesa 10,000 videos por día (30,000 horas de video por mes) sin costos de servidor.
Free AI Video Upscaler sirve como herramienta de generación de clientes potenciales para un servicio de mejora de la calidad con IA pagado. También creé este servicio con modelos de IA más potentes que se ejecutan del lado del servidor. Este enfoque genera rentabilidad sin marketing, mientras que la aplicación inicial sigue siendo gratuita y de código abierto.
Recomendaciones y recursos
Antes de WebCodecs y WebGPU, las aplicaciones que requieren un procesamiento de video intensivo necesitaban software de escritorio, que podía ser engorroso, o un procesamiento costoso del servidor. Los costos de servidor a menudo representaban una parte significativa de los costos operativos de una aplicación de video.
Estas APIs del navegador te permiten compilar aplicaciones eficientes de procesamiento de video del cliente. Estas aplicaciones son más intuitivas y ofrecen menos fricción que el software de escritorio, además de ser más asequibles y escalables que el procesamiento del servidor.
Si quieres obtener más información sobre WebCodecs y cómo compilar aplicaciones de video como Free AI Video Upscaler o Katana, lee WebCodecsFundamentals. Aprenderás a compilar aplicaciones de WebCodecs de producción con un enfoque en los detalles de implementación y producción.