Publié le 5 mars 2026
Je m'appelle Sam Bhattacharyya et j'ai initialement créé Free AI Video Upscaler comme projet de loisir Open Source en 2023. Il a connu une croissance inattendue et organique pour atteindre 250 000 utilisateurs actifs par mois (en février 2026). Cela a été possible, car le projet a été conçu avec un traitement de l'IA côté client, qui n'entraîne aucun coût de traitement côté serveur. Vous pouvez améliorer la qualité d'une vidéo dans le navigateur, sans avoir à installer de logiciel ni à vous connecter.
Ce document explique comment j'ai utilisé WebGPU et WebCodecs pour ajouter un traitement côté client sans frais à mon application.
Problèmes liés aux coûts du serveur
Dans un rôle précédent, j'ai géré l'infrastructure d'IA d'un outil de streaming en direct basé sur un navigateur, qui comptait des millions d'utilisateurs et entraînait des coûts budgétaires importants pour le traitement des vidéos côté serveur.
Le traitement vidéo côté serveur représentait 20 % du budget. Il s'agissait d'un coût variable majeur pour l'entreprise, juste après les salaires. Pour chaque fonctionnalité d'IA, comme la transcription ou l'amélioration audio ou vidéo, l'équipe devait respecter des exigences budgétaires strictes (0,1 $ par heure de vidéo) pour les nouvelles implémentations.
La seule exception était l'IA côté client, avec des fonctionnalités telles que les arrière-plans virtuels et la suppression du bruit de fond implémentées à l'aide d'un SDK côté client interne. Ces fonctionnalités d'IA n'ont entraîné aucun coût de traitement sur le serveur, car l'inférence du modèle et le traitement vidéo ont eu lieu sur l'appareil de l'utilisateur.
Les API telles que WebCodecs permettent de créer des pipelines de traitement vidéo complets, y compris des suites de montage vidéo à part entière, dans le navigateur. WebGPU rend l'IA côté client beaucoup plus efficace.
Traitement côté client avec WebCodecs et WebGPU
L'outil sans frais AI Video Upscaler utilise le SDK WebSR Open Source. Ce SDK accepte une image, l'agrandit et peint le résultat sur un canevas.
Un réseau de neurones à super-résolution effectue une mise à l'échelle en appliquant des convolutions d'image (multiplications de matrices) répétées pour extraire les caractéristiques d'une image source. D'autres convolutions sont ensuite appliquées à ces caractéristiques d'image pour reconstruire l'image finale de meilleure qualité.
WebSR implémente ces couches de convolution de réseau de neurones en tant que nuanceurs de calcul WebGPU. Par exemple, consultez un exemple de couche et le réseau complet. Lorsque vous appelez la méthode de rendu, le SDK exécute chaque couche du réseau de mise à l'échelle et génère l'image finale sur un canevas. Pour en savoir plus sur l'implémentation du réseau de neurones.
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);
Consultez l'exemple du SDK WebSR sur Codepen.
Vous pouvez remplacer le SDK WebSR par n'importe quel modèle, à l'aide de frameworks tels que MediaPipe ou TensorflowJS. Le pipeline de traitement vidéo utilise WebCodecs et est structuré comme un pipeline de transcodage.
Le pipeline est divisé en plusieurs étapes :
- Démultiplexage : lit les blocs vidéo encodés à partir d'un objet File.
- Décodage : décode les blocs encodés en objets VideoFrame.
- Traitement : convertit le VideoFrame d'entrée en VideoFrame mis à l'échelle.
- Encodage : encode les objets VideoFrame mis à l'échelle dans de nouveaux blocs encodés.
- Multiplexage : écrit les blocs encodés de sortie dans le fichier de sortie.
Le pipeline utilise l'API Streams. L'encodage, le décodage, le démultiplexage ou le multiplexage sont implémentés sous forme de flux. Pour la démo, le projet utilise les utilitaires de multiplexage et de flux de la bibliothèque webcodecs-utils. Cette bibliothèque fournit des wrappers de flux pour VideoEncoder et 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();
Consultez le pipeline complet sur CodePen.
L'API Streams est particulièrement utile avec WebCodecs, car elle utilise la contre-pression pour ralentir automatiquement les étapes en amont, telles que le décodage, si une étape, telle que l'encodage, est surchargée. Cela évite les problèmes de mémoire et améliore l'efficacité.
Cela permet de créer une expérience utilisateur simple :
- Vous importez une vidéo avec une entrée de fichier.
- Le système traite la vidéo en local.
- Vous pouvez télécharger le résultat au format Blob.
Pour en savoir plus, consultez Créer un pipeline de transcodage dans WebCodecs. Vous pouvez également consulter le pipeline de traitement complet de Free AI Video Upscaler sur GitHub, qui comporte moins de 400 lignes de code.
Résultats
La seule promotion de Free AI Video Upscaler était un post Reddit unique. Malgré cela, il a connu une croissance organique pour atteindre 250 000 utilisateurs actifs par mois, avec un taux de croissance de 32 % d'un mois sur l'autre, grâce au bouche-à-oreille des utilisateurs qui partagent l'outil sur les forums.
250 000
Utilisateurs actifs par mois
10 000
Vidéos traitées par jour
30 000
Nombre d'heures de vidéo traitées par mois
0 $
Coûts de traitement du serveur
Il traite 10 000 vidéos par jour (30 000 heures de vidéo par mois) sans aucun coût de serveur.
L'outil sans frais AI Video Upscaler sert d'outil de génération de prospects pour un service d'upscaling vidéo par IA payant. J'ai également créé ce service à l'aide de modèles d'IA plus puissants exécutés côté serveur. Cette approche génère de la rentabilité sans marketing, tandis que l'application initiale reste sans frais et Open Source.
Recommandations et ressources
Avant WebCodecs et WebGPU, les applications nécessitant un traitement vidéo intensif nécessitaient soit un logiciel de bureau, qui pouvait être fastidieux, soit un traitement côté serveur coûteux. Les coûts de serveur représentaient souvent une part importante des coûts d'exploitation d'une application vidéo.
Ces API de navigateur vous permettent de créer des applications de traitement vidéo côté client efficaces. Ces applications sont plus intuitives et offrent moins de friction que les logiciels pour ordinateur. Elles sont également plus abordables et évolutives que le traitement côté serveur.
Si vous souhaitez en savoir plus sur WebCodecs et sur la façon de créer des applications vidéo comme Free AI Video Upscaler ou Katana, consultez WebCodecsFundamentals. Vous apprendrez à créer des applications WebCodecs de production en vous concentrant sur les détails de production et d'implémentation.