Warum wir ein Browser-basiertes Videoverarbeitungstool entwickelt haben

Als wir uns daran machten, Videotools für das Web zu entwickeln, war die gängige Meinung klar: Videoverarbeitung gehört auf den Server. Datei hochladen, FFmpeg ausführen, Ergebnis zurückgeben. Einfach, bewährt und stark durch Bandbreite, Kosten und Datenschutz eingeschränkt.

Wir dachten, es müsste einen besseren Weg geben. Es stellte sich heraus, dass es ihn gibt – und sie die ganze Zeit in unseren Browsern steckte.

Der Status Quo: ffmpeg.wasm

In den letzten Jahren war ffmpeg.wasm die Standardlösung für die In-Browser-Videoverarbeitung. Es kompiliert FFmpeg zu WebAssembly und bietet Ihnen so Zugriff auf das gesamte FFmpeg-Toolkit direkt im Browser. Es funktioniert, hat aber erhebliche Nachteile:

• Große Bundle-Größe: ffmpeg.wasm Core ist ~25 MB groß, mit formatspezifischen Codecs steigt es auf über 30 MB
• Langsames Initialisieren: Laden eines 25 MB großen WebAssembly-Moduls, bevor die Verarbeitung beginnt
• Standardmäßig Single-threaded: Kein Zugriff auf Hardwarebeschleunigung
• Speicherbeschränkungen: WebAssembly lineare Speicherlimits (4 GB) verursachen Probleme bei großen Dateien
• Keine Hardware-Dekodierung: Nur Software-Dekodierung/-Kodierung, GPU-Beschleunigung fehlt vollständig

In unseren Benchmarks dauerte die Komprimierung eines 50 MB MP4-Videos mit 70 % Qualität 45-60 Sekunden mit ffmpeg.wasm. Nicht schlecht, aber auch nicht großartig.

Der WebCodecs-Ansatz

Die WebCodecs API ist eine relativ neue Browser-API, die direkten Zugriff auf die nativen Medien-Codecs des Browsers bietet – dieselben, die für die Videowiedergabe auf YouTube, Netflix und jeder anderen Streaming-Plattform verwendet werden. Die wichtigsten Vorteile:

• Hardwarebeschleunigung: Nutzt die GPU für Dekodierung und Kodierung, wo verfügbar
• Kein Bundle-Overhead: Kein WebAssembly, keine kompilierten Binärdateien – es ist eine native Browser-API
• Schnelles Initialisieren: Sofort verfügbar, keine Ladezeit
• Volle Formatunterstützung: H.264, H.265, VP8, VP9, AV1 – was immer Ihr Browser unterstützt

Der Haken? WebCodecs ist Low-Level. Sie müssen Demuxing, Frame-für-Frame-Kodierung, Container-Formatierung und alles dazwischen selbst handhaben. Das ist viel Vorarbeit.

Hier kommt mediabunny

Wir haben mediabunny entwickelt – eine leichte Bibliothek, die WebCodecs mit einer einfachen, ergonomischen API umschließt. Sie übernimmt die komplexen Teile:

• Automatisches Demuxing: Erkennt das Containerformat und extrahiert Video-/Audio-Streams
• Frame-Level-Kontrolle: Zugriff auf einzelne Frames für präzise Bearbeitung
• Intelligentes Re-Encoding: Konfigurierbare Qualitätsvoreinstellungen mit Echtzeit-Fortschritt
• Speichereffizientes Streaming: Verarbeitet Frames in Blöcken, nicht alle auf einmal

Leistungsvergleich

Durchweg 3-5x schneller, mit dramatisch geringerem Speicherverbrauch und ohne Bundle-Overhead.

Datenschutz: Das Killer-Feature

Leistung ist großartig, aber hier ist, was die Browser-basierte Verarbeitung wirklich auszeichnet: Datenschutz durch Architektur.

Bei serverbasierten Tools vertrauen Sie Ihre Daten jemand anderem an. Selbst gut gemeinte Dienste haben Server, die kompromittiert, gerichtlich angefordert oder falsch konfiguriert werden können. Mit VideosKit:

• Dateien verlassen niemals Ihr Gerät – es gibt buchstäblich keinen Server-Endpunkt für Datei-Uploads
• Keine Cookies, kein Tracking, keine Analysen von Dateiinhalten
• Funktioniert offline, sobald geladen – Videos im Flugzeug, in einem eingeschränkten Netzwerk, überall verarbeiten
• Unternehmensfreundlich für sensible Inhalte – keine Bedenken hinsichtlich Datenresidenz oder Compliance

Die Entwicklungsherausforderungen

Der Bau war nicht ohne Herausforderungen:

Umgang mit großen Dateien

Browser ermöglichen keinen zufälligen Dateizugriff. Wir verwenden die File API + Streaming, um Videos Frame für Frame zu verarbeiten, ohne die gesamte Datei in den Speicher zu laden. Dies erforderte ein sorgfältiges Puffer-Management und Feinabstimmung der Garbage Collection.

Cross-Browser-Kompatibilität

WebCodecs wird in Chrome 94+, Edge 94+ und Safari 16.4+ unterstützt. Firefox hat die Unterstützung in Version 130 hinzugefügt. Wir erkennen die Fähigkeiten und greifen für nicht unterstützte Browser elegant auf eine Meldung zurück.

Speicherverwaltung

Video-Frames sind groß – ein einzelner 4K-Frame ist unkomprimiert ~33 MB groß. Wir haben Frame-Pooling und Streaming-Pipelines implementiert, um den Speicherverbrauch auch bei 4K-Inhalten unter Kontrolle zu halten.

Fortschrittsanzeige

Benutzer müssen wissen, wie lange sie warten müssen. Wir haben ein Callback-System entwickelt, das den Fortschritt basierend auf der Frame-Position meldet und genaue Echtzeit-Updates liefert.

Open Source

VideosKit und mediabunny sind beide Open Source. Schauen Sie sich den Code an:

• VideosKit: github.com/nicely-gg/video-tools
• mediabunny: github.com/nicely-gg/mediabunny

Beiträge, Probleme und Feedback sind willkommen.

Die Zukunft des Browser-basierten Videos

WebCodecs entwickelt sich noch weiter. AV1-Kodierung, WebGPU-gestützte Verarbeitung und verbesserte MediaSource Extensions werden Browser-basiertes Video noch leistungsfähiger machen. Wir freuen uns darauf, die Grenzen des Möglichen zu verschieben.

Wenn Sie VideosKit noch nicht ausprobiert haben, besuchen Sie videoskit.cc. Komprimieren, konvertieren, trimmen oder überprüfen Sie ein Video – alles in Ihrem Browser, alles kostenlos.