Data di pubblicazione: 5 marzo 2026
Io, Sam Bhattacharyya, ho creato inizialmente Free AI Video Upscaler come progetto amatoriale open source nel 2023. È cresciuto in modo inaspettato e organico fino a 250.000 utenti attivi mensili (a febbraio 2026). Ciò è stato possibile perché il progetto è stato creato con l'elaborazione AI lato client, che non comporta costi di elaborazione del server. Puoi migliorare i video nel browser, senza richiedere l'installazione di software o l'accesso.
Questo documento spiega come ho utilizzato WebGPU e WebCodecs per aggiungere l'elaborazione lato client senza costi alla mia applicazione.
Sfide relative ai costi del server
In un ruolo precedente, ho gestito l'infrastruttura AI per uno strumento di live streaming basato su browser con milioni di utenti e costi di budget significativi per l'elaborazione dei video lato server.
L'elaborazione video lato server ha rappresentato il 20% del budget. Si trattava di un costo variabile importante per l'azienda, secondo solo agli stipendi. Per ogni funzionalità di AI, come la trascrizione, il miglioramento audio o video, il team ha dovuto rispettare rigorosi requisiti di budget (0, 1 $ per ora di video) per le nuove implementazioni.
L'unica eccezione è stata l'AI lato client, con funzionalità come gli sfondi virtuali e la rimozione del rumore di fondo implementate utilizzando un SDK lato client interno. Queste funzionalità di AI non hanno comportato costi di elaborazione del server perché l'inferenza del modello e l'elaborazione video sono avvenute sul dispositivo dell'utente.
API come WebCodecs consentono di creare pipeline di elaborazione video complete, incluse suite di editing video complete, nel browser. WebGPU rende l'AI lato client molto più efficiente.
Elaborazione lato client con WebCodecs e WebGPU
Free AI Video Upscaler utilizza l'SDK WebSR open source. Questo SDK accetta un'immagine, la ridimensiona e dipinge il risultato su un canvas.
Una rete neurale di super risoluzione esegue l'upscaling applicando convoluzioni ripetute delle immagini (moltiplicazioni di matrici) per estrarre le caratteristiche dell'immagine da un'immagine di origine. A queste caratteristiche dell'immagine vengono quindi applicate altre convoluzioni per ricostruire l'immagine finale di qualità superiore.
WebSR implementa questi livelli di convoluzione della rete neurale come shader di calcolo WebGPU. Ad esempio, vedi un livello di esempio e l'intera rete. Quando chiami il metodo di rendering, l'SDK esegue ogni livello della rete di upscaling e restituisce l'immagine finale a un canvas. Puoi scoprire di più sull'implementazione della rete neurale.
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 l'esempio di SDK WebSR su Codepen.
Puoi sostituire l'SDK WebSR con qualsiasi modello utilizzando framework come MediaPipe o TensorflowJS. La pipeline di elaborazione video utilizza WebCodecs ed è strutturata come una pipeline di transcodifica.
La pipeline è suddivisa in più fasi:
- Demultiplexing: legge i blocchi video codificati da un oggetto File.
- Decodifica: decodifica i blocchi codificati in oggetti VideoFrame.
- Elaborazione: converte il VideoFrame di input in un VideoFrame con upscaling.
- Codifica: codifica gli oggetti VideoFrame sottoposti a upscaling in nuovi blocchi codificati.
- Multiplexing: scrive i blocchi codificati di output nel file di output.
La pipeline utilizza l'API
Streams. La
codifica, la decodifica e il demuxing o il muxing vengono implementati come stream. Per una demo,
il progetto utilizza le utilità di muxing e stream della libreria
webcodecs-utils. Questa libreria fornisce
wrapper
di streaming per
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();
Visualizza la pipeline completa su Codepen.
L'API Streams è particolarmente utile con WebCodecs perché utilizza la contropressione per rallentare automaticamente le fasi upstream, come la decodifica, se una fase, come la codifica, viene sovraccaricata. In questo modo si evitano problemi di memoria e si migliora l'efficienza.
In questo modo, l'esperienza utente è semplice:
- Carichi un video con un input di file.
- Il sistema elabora il video localmente.
- Puoi scaricare il risultato come blob.
Puoi scoprire di più sulla creazione di una pipeline di transcodifica in WebCodecs. Puoi anche visualizzare la pipeline di elaborazione completa per Free AI Video Upscaler, che contiene meno di 400 righe di codice, su GitHub.
Risultati
L'unica promozione di Free AI Video Upscaler è stata un singolo post di Reddit. Nonostante ciò, è cresciuta in modo organico fino a raggiungere 250.000 utenti attivi mensili, con un tasso di crescita mensile del 32%, grazie al passaparola degli utenti che condividono lo strumento sui forum.
250.000
Utenti attivi mensili
10.000
Video elaborati al giorno
30.000
Ore di video elaborati al mese
0 $
Costi di elaborazione del server
Elabora 10.000 video al giorno (30.000 ore di video al mese) senza costi del server.
Free AI Video Upscaler funge da strumento di generazione di lead per un servizio di upscaling dell'AI a pagamento. Ho creato anche questo servizio utilizzando modelli di AI più potenti eseguiti lato server. Questo approccio genera redditività senza marketing, mentre l'applicazione iniziale rimane senza costi e open source.
Consigli e risorse
Prima di WebCodecs e WebGPU, le applicazioni che richiedono un'elaborazione video intensiva richiedevano software desktop, che poteva essere macchinoso, o un'elaborazione lato server costosa. I costi del server spesso rappresentavano una parte significativa dei costi operativi di un'applicazione video.
Queste API del browser ti consentono di creare applicazioni di elaborazione video lato client efficienti. Queste applicazioni sono più intuitive e offrono meno attrito rispetto al software desktop. Inoltre, sono più convenienti e scalabili rispetto all'elaborazione lato server.
Se ti interessa saperne di più su WebCodecs e su come creare applicazioni video come Free AI Video Upscaler o Katana, leggi WebCodecsFundamentals. Scoprirai come creare applicazioni WebCodecs di produzione con particolare attenzione ai dettagli di produzione e implementazione.