Veröffentlicht am 5. März 2026
Ich, Sam Bhattacharyya, habe Free AI Video Upscaler 2023 als Open-Source-Hobbyprojekt entwickelt. Die Zahl der monatlich aktiven Nutzer (MAU) ist unerwartet und organisch auf 250.000 gestiegen (Stand: Februar 2026). Das war möglich, weil das Projekt mit clientseitiger KI-Verarbeitung erstellt wurde, die keine Serververarbeitungskosten verursacht. Sie können Videos im Browser optimieren, ohne Software installieren oder sich anmelden zu müssen.
In diesem Dokument wird erläutert, wie ich WebGPU und WebCodecs verwendet habe, um meiner Anwendung eine kostenlose clientseitige Verarbeitung hinzuzufügen.
Herausforderungen bei Serverkosten
In einer früheren Position habe ich die KI-Infrastruktur für ein browserbasiertes Livestreaming-Tool mit Millionen von Nutzern verwaltet. Die Verarbeitung von Videos auf der Serverseite verursachte erhebliche Budgetkosten.
Die serverseitige Videoverarbeitung machte 20% des Budgets aus. Das war nach den Gehältern der zweitgrößte variable Kostenfaktor für das Unternehmen. Für jede KI-Funktion, z. B. Transkription, Audio- oder Videooptimierung, musste das Team strenge Budgetanforderungen (0, 1 $ pro Stunde Video) für neue Implementierungen erfüllen.
Die einzige Ausnahme war die clientseitige KI, bei der Funktionen wie virtuelle Hintergründe und die Entfernung von Hintergrundgeräuschen mit einem internen clientseitigen SDK implementiert wurden. Für diese KI-Funktionen sind keine Serververarbeitungskosten angefallen, da die Modellinferenz und die Videoverarbeitung auf dem Gerät des Nutzers erfolgt sind.
APIs wie WebCodecs ermöglichen die Entwicklung vollständiger Videoverarbeitungs-Pipelines, einschließlich vollwertiger Videobearbeitungssuiten, im Browser. WebGPU macht clientseitige KI viel effizienter.
Clientseitige Verarbeitung mit WebCodecs und WebGPU
Der kostenlose KI-Video-Upscaler verwendet das Open-Source-WebSR SDK. Dieses SDK akzeptiert ein Bild, skaliert es hoch und rendert das Ergebnis auf einer Leinwand.
Ein neuronales Netzwerk für Superauflösung führt die Skalierung durch, indem es wiederholte Bildfaltungen (Matrixmultiplikationen) auf ein Quellbild anwendet, um Bildmerkmale zu extrahieren. Anschließend werden weitere Faltungen auf diese Bildmerkmale angewendet, um das endgültige Bild in höherer Qualität zu rekonstruieren.
WebSR implementiert diese Convolution-Ebenen des neuronalen Netzwerks als WebGPU-Compute-Shader. Ein Beispiel für eine Ebene und das vollständige Netzwerk finden Sie hier. Wenn Sie die Rendermethode aufrufen, führt das SDK jede Ebene des Upscaling-Netzwerks aus und gibt das endgültige Bild auf einem Canvas aus. Weitere Informationen zur Implementierung des neuronalen Netzwerks
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);
WebSR SDK-Beispiel auf Codepen
Sie können das WebSR SDK durch ein beliebiges Modell ersetzen, indem Sie Frameworks wie MediaPipe oder TensorflowJS verwenden. Die Videoverarbeitungs-Pipeline verwendet WebCodecs und ist als Transcodierungs-Pipeline strukturiert.
Die Pipeline ist in mehrere Phasen unterteilt:
- Demultiplexing: Liest codierte Videosegmente aus einem File-Objekt.
- Decodieren: Decodiert codierte Chunks in VideoFrame-Objekte.
- Verarbeitung: Das eingegebene VideoFrame wird in ein hochskaliertes VideoFrame konvertiert.
- Codierung: Die hochskalierten VideoFrame-Objekte werden in neue codierte Chunks codiert.
- Muxing: Die codierten Ausgabechunks werden in die Ausgabedatei geschrieben.
Die Pipeline verwendet die Streams API. Die Codierung, Decodierung und das Demuxing oder Muxing werden als Streams implementiert. Für eine Demo werden im Projekt Muxing- und Stream-Dienstprogramme aus der webcodecs-utils-Bibliothek verwendet. Diese Bibliothek bietet Streaming-Wrapper für VideoEncoder und 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();
Vollständige Pipeline auf Codepen ansehen
Die Streams API ist besonders hilfreich bei WebCodecs, da sie Backpressure verwendet, um Upstream-Phasen wie die Decodierung automatisch zu verlangsamen, wenn eine Phase wie die Codierung überlastet ist. So werden Speicherprobleme vermieden und die Effizienz verbessert.
Das sorgt für eine unkomplizierte Nutzererfahrung:
- Sie laden ein Video mit einer Dateieingabe hoch.
- Das System verarbeitet das Video lokal.
- Sie können das Ergebnis als Blob herunterladen.
Weitere Informationen zum Erstellen einer Transcodierungs-Pipeline in WebCodecs Sie können sich auch die vollständige Verarbeitungspipeline für Free AI Video Upscaler auf GitHub ansehen. Sie umfasst weniger als 400 Zeilen Code.
Ergebnisse
Die einzige Werbung für den kostenlosen AI Video Upscaler war ein einzelner Reddit-Beitrag. Trotzdem ist die Zahl der monatlich aktiven Nutzer organisch auf 250.000 gestiegen, mit einer Wachstumsrate von 32% im Monatsvergleich. Das ist darauf zurückzuführen, dass Nutzer das Tool in Foren weiterempfohlen haben.
250.000
Aktive Nutzer pro Monat
10.000
Verarbeitete Videos pro Tag
30.000
Anzahl der Videostunden, die pro Monat verarbeitet werden
0 $
Kosten für die Serververarbeitung
Es werden 10.000 Videos pro Tag (30.000 Stunden Video pro Monat) verarbeitet, ohne dass Serverkosten anfallen.
Free AI Video Upscaler dient als Tool zur Lead-Generierung für einen kostenpflichtigen KI-Upscaling-Dienst. Auch diesen Dienst habe ich mit leistungsstärkeren KI-Modellen erstellt, die serverseitig ausgeführt werden. So wird Profitabilität ohne Marketing erzielt, während die ursprüngliche Anwendung kostenlos und Open Source bleibt.
Empfehlungen und Ressourcen
Vor WebCodecs und WebGPU benötigten Anwendungen, die viel Videoverarbeitung erfordern, entweder Desktopsoftware, was umständlich sein konnte, oder kostspielige serverseitige Verarbeitung. Serverkosten machten oft einen erheblichen Teil der Betriebskosten einer Videoanwendung aus.
Mit diesen Browser-APIs können Sie effiziente clientseitige Anwendungen zur Videoverarbeitung erstellen. Diese Anwendungen sind intuitiver und einfacher zu bedienen als Desktopsoftware. Außerdem sind sie kostengünstiger und besser skalierbar als die serverseitige Verarbeitung.
Wenn Sie mehr über WebCodecs und die Entwicklung von Videoanwendungen wie Free AI Video Upscaler oder Katana erfahren möchten, lesen Sie WebCodecsFundamentals. Sie erfahren, wie Sie WebCodecs-Anwendungen für die Produktion erstellen, wobei der Schwerpunkt auf Produktions- und Implementierungsdetails liegt.