Lokale Verarbeitung
Technischer Deep-Dive

Wie browserbasierte Videoverarbeitung mit WebAssembly funktioniert

Wenn ich Menschen erzähle, dass mein Video-Tool Dateien komplett im Browser verarbeitet, ist die erste Reaktion meist Skepsis. Hier ist, wie WebAssembly das möglich macht – und warum das wichtig ist.

Technisches Diagramm, das zeigt, wie WebAssembly Videoverarbeitung im Browser ermöglicht

Der Browser als Verarbeitungsumgebung

Wenn du vor fünf Jahren einem Entwickler gesagt hättest, dass ein Browser FFmpeg ausführen und Videodateien lokal verarbeiten kann, hättest du sehr skeptische Blicke geerntet. JavaScript galt als zu langsam für rechenintensive Aufgaben wie Multimedia-Verarbeitung. Der Browser war zum Anzeigen von Webseiten da, nicht zum Ausführen von Tools, die traditionell native, kompilierte Binärdateien brauchten.

WebAssembly hat diese Gleichung grundlegend verändert. Es bietet ein Kompilierungsziel für Sprachen wie C, C++ und Rust, das im Browser mit nahezu nativer Geschwindigkeit läuft. Und FFmpeg, das Multimedia-Framework hinter allem von YouTubes Backend bis zu deinem Lieblings-Videoeditor, wurde als FFmpeg.wasm nach WebAssembly kompiliert.

Ich habe die letzten zwei Jahre mit dieser Technologie gearbeitet, um Remove Audio zu bauen, und dabei viel darüber gelernt, was browserbasierte Videoverarbeitung kann – und was nicht. Hier ist die technische Realität hinter dem Marketing.

"WebAssembly hat browserbasierte Videoverarbeitung nicht nur möglich gemacht. Es hat sie praktisch gemacht. Die Leistungslücke zwischen nativer Software und wasm ist so klein geworden, dass Nutzer bei den meisten gängigen Aufgaben keinen Unterschied merken."

Was ist WebAssembly eigentlich?

WebAssembly – oft als wasm abgekürzt – ist ein binäres Instruktionsformat, das in einer virtuellen Maschine innerhalb deines Browsers läuft. Stell es dir als eine standardisierte Assemblersprache vor, die jeder Browser ausführt, unabhängig von der zugrunde liegenden Hardware. Die CPU deines Computers ist vielleicht x86 oder ARM, aber WebAssembly liefert eine Abstraktionsschicht, die auf beidem funktioniert.

Die beiden wichtigsten Eigenschaften für Videoverarbeitung sind Performance und Sandboxing. In Sachen Leistung läuft wasm-Code bei den meisten Aufgaben mit 80 bis 95 Prozent nativer Geschwindigkeit. Das ist für rechenintensive Arbeiten wie Demuxing oder Codec-Operationen dramatisch schneller als JavaScript. Das Sandboxing bedeutet, dass wasm-Code nicht direkt auf dein Dateisystem, dein Netzwerk oder andere Browser-Tabs zugreifen kann. Er kann nur mit Daten arbeiten, die ihm explizit übergeben werden.

Für ein datenschutzorientiertes Tool wie Remove Audio ist dieses Sandboxing genauso wichtig wie die Performance. Selbst wenn es einen Fehler in FFmpeg.wasm gäbe, könnte der Code deine Videodaten nicht einfach exfiltrieren, weil die Sandbox unautorisierte Netzwerkzugriffe verhindert. Dein Video geht in die wasm-Sandbox hinein, wird dort verarbeitet und kommt wieder heraus. Das ist der gesamte Datenfluss.

FFmpeg.wasm: ein Multimedia-Kraftpaket im Browser

FFmpeg ist das Open-Source-Multimedia-Framework, das seit über zwei Jahrzehnten das Rückgrat der Audio- und Videoverarbeitung bildet. Es unterstützt praktisch jeden existierenden Codec und jedes Containerformat. Video-Plattformen wie YouTube, Streaming-Dienste und professionelle Schnittsoftware nutzen FFmpeg oder seine Bibliotheken unter der Haube.

FFmpeg.wasm ist eine Kompilierung der Kernbibliotheken von FFmpeg nach WebAssembly. Das bedeutet: Du bekommst die erprobten Multimedia-Fähigkeiten von FFmpeg direkt in einem Browser-Tab. Wenn du Remove Audio nutzt, lädt dein Browser ein kompaktes wasm-Modul – rund 30 Megabyte –, das den FFmpeg-Code enthält, der nötig ist, um Videodateien zu analysieren, zu manipulieren und wieder auszugeben.

Die konkrete Operation, die Remove Audio ausführt, ist in FFmpeg-Begriffen einfach: Die Eingabedatei wird gelesen, der Videostream in die Ausgabe kopiert und der Audiostream ausgelassen. Weil der Videostream ohne Dekodieren und erneutes Kodieren kopiert wird, ist der Vorgang schnell und verlustfrei. Die Videodaten bleiben unverändert. Nur die Audiospur wird verworfen.

Flow diagram showing how WebAssembly processes video files locally in the browser without uploading to a server

So funktioniert es Schritt für Schritt

Wenn du remove-audio.com lädst, lädt dein Browser die Seiten-Assets und das FFmpeg.wasm-Modul herunter. Das wasm-Modul wird nach dem ersten Besuch zwischengespeichert, weshalb spätere Besuche schneller laden.

Wenn du eine Videodatei auswählst, liest der Browser sie über die File API in den Speicher. Die Dateidaten bleiben im reservierten Speicher deines Browsers. Es wird keine Netzwerkanfrage gesendet. Das kann jeder mit den Entwicklertools des Browsers überprüfen: Network-Tab öffnen, Datei hinzufügen und beobachten, dass kein Upload stattfindet.

Die Dateidaten werden dann an die FFmpeg.wasm-Instanz übergeben, die den Container analysiert, Video- und Audiostreams erkennt und den Muxing-Vorgang ausführt. Beim Entfernen von Audio bedeutet das, einen neuen Container zu schreiben, der nur den Videostream – und gegebenenfalls Untertitel- oder Metadaten-Streams – enthält. Der Audiostream wird einfach nicht in die Ausgabe übernommen.

Die Ausgabedatei existiert anschließend im Speicher des Browsers – technisch im virtuellen Dateisystem der wasm-Instanz. Wenn die Verarbeitung abgeschlossen ist, erstellt das Tool einen Download-Link zu dieser In-Memory-Datei. Ein Klick auf „Download“ startet den nativen Download-Mechanismus des Browsers und speichert die Datei auf deinem Gerät.

Nach dem Download wird der Speicher freigegeben. Die Originaldatei, der Arbeitsbereich der wasm-Instanz und die Ausgabedatei werden vom Browser aufgeräumt. Nichts bleibt bestehen, außer du speicherst den Download bewusst.

Performance: Was du erwarten kannst

Browserbasierte Videoverarbeitung ist schnell, hat aber andere Leistungsmerkmale als native Software. Das habe ich über Tausende reale Anwendungsfälle hinweg gemessen.

Beim Entfernen von Audio – also ohne Dekodieren oder erneutes Kodieren des Videos – wird die Performance vor allem durch Datei-I/O bestimmt: also wie schnell der Browser die Eingabedatei lesen und die Ausgabedatei schreiben kann. Eine 100-Megabyte-MP4-Datei ist auf einem modernen Desktop typischerweise in 2 bis 5 Sekunden fertig, auf einem Handy in 5 bis 15 Sekunden.

Die Dauer skaliert grob linear mit der Dateigröße. Eine 500-Megabyte-Datei braucht ungefähr fünfmal so lange wie eine 100-Megabyte-Datei. Der Flaschenhals ist also Datendurchsatz, nicht Rechenleistung.

Langsamer wird browserbasierte Verarbeitung bei Aufgaben, die Dekodieren und Re-Encoding erfordern – etwa Formatkonvertierung, Transkodierung oder Filter. Diese Jobs sind rechenintensiv, und dann wird die Leistungsdifferenz von 5 bis 20 Prozent zwischen wasm und nativer Software spürbar. Für das Entfernen von Audio ist diese Lücke praktisch irrelevant, weil wir Re-Encoding komplett vermeiden.

Ehrliche Grenzen

Ich möchte offen darüber sein, was browserbasierte Verarbeitung nicht gut kann. Ehrlichkeit über Grenzen schafft mehr Vertrauen, als so zu tun, als gäbe es sie nicht.

Der größte Engpass ist Speicher. Browser begrenzen den Speicher, der einem einzelnen Tab zur Verfügung steht, und auf Mobilgeräten ist diese Grenze niedriger. Ein Handy mit 4 Gigabyte RAM stellt einem Browser-Tab vielleicht nur 1 bis 2 Gigabyte zur Verfügung, und das Tool muss Ein- und Ausgabedatei gleichzeitig im Speicher halten. Damit liegt die maximale Dateigröße effektiv bei ungefähr der Hälfte des verfügbaren Tab-Speichers.

Hintergrundverarbeitung wird nicht unterstützt. Wenn du den Tab schließt oder die Seite verlässt, stoppt die Verarbeitung. Native Apps können im Hintergrund laufen; browserbasierte Tools sind darauf angewiesen, dass der Tab geöffnet und aktiv bleibt.

Einige Codecs sind im wasm-Build nicht enthalten. Damit der Download mit etwa 30 Megabyte vertretbar bleibt, enthält FFmpeg.wasm die gängigsten Codecs, aber nicht jedes exotische Format. Dateien mit ungewöhnlichen Codecs können daher scheitern.

Auch Multi-Threading in wasm entwickelt sich noch weiter. Manche Browser unterstützen SharedArrayBuffer – und damit Multi-Threading in wasm –, andere schränken es aus Sicherheitsgründen ein. Das bedeutet, dass manche Operationen in bestimmten Browsern nur single-threaded laufen und dadurch langsamer sind.

"Ich baue lieber ein Tool, das ehrlich mit seinen Grenzen umgeht, als eines, das Unmögliches verspricht. Browserbasierte Verarbeitung ist wirklich leistungsfähig – und wirklich begrenzt. Beides stimmt gleichzeitig."

Wohin sich browserbasierte Verarbeitung entwickelt

Die Web-Plattform entwickelt sich weiter in eine Richtung, die browserbasierte Medienverarbeitung deutlich leistungsfähiger macht. Die WebCodecs API gibt direkten Zugriff auf Hardware-Video-Decoder und -Encoder und umgeht damit die Notwendigkeit wasm-basierter Codec-Implementierungen. Die File System Access API erlaubt Lesen und Schreiben von Dateien, ohne sie komplett in den Speicher zu laden. Die Web Workers API ermöglicht Verarbeitung im Hintergrund in separaten Threads.

Ich erwarte, dass browserbasierte Video-Tools in wenigen Jahren für die meisten üblichen Aufgaben funktional gleichwertig mit leichten nativen Apps sein werden. Die Lücke wird mit jeder Browser-Version kleiner, und die Privacy-Vorteile lokaler Verarbeitung treiben das Interesse von Entwicklern weiter an.

Für Entwickler, die ähnliche Tools bauen wollen: Das Ökosystem ist reifer, als viele denken. FFmpeg.wasm hat solide Dokumentation und eine aktive Community. Die Toolchains, um C und Rust nach wasm zu kompilieren, sind etabliert. Und die Nachfrage nach datenschutzfreundlichen Tools, die Daten lokal verarbeiten, wächst. Es ist ein guter Zeitpunkt, diesen Bereich zu erkunden.

Dein Browser kann mehr, als du denkst

WebAssembly hat still und leise verändert, was in einem Browser-Tab möglich ist. Vorgänge, für die früher native Software oder Server-Uploads nötig waren, können heute lokal, privat und mit einer Performance stattfinden, die für reale Nutzung absolut praktikabel ist.

Remove Audio ist ein Beispiel dafür, was diese Technologie ermöglicht: ein Video-Tool ohne Installation, ohne Konto, ohne Server-Upload – und trotzdem bekommst du in Sekunden das Ergebnis, das du brauchst. Der technische Stack ist spannend, aber für Nutzer zählt die Erfahrung: Datei hineinziehen, Ergebnis bekommen und wissen, dass dein Video dein Gerät nie verlassen hat.

Wenn dich die Technik interessiert oder du sie selbst testen willst, verarbeite ein Video auf remove-audio.com. Beobachte den Network-Tab in den Entwicklertools deines Browsers. Du siehst das Laden der Seite – und danach nichts mehr. Kein Upload. Keine Serveranfrage. Nur dein Browser, der die Arbeit lokal erledigt. Genau das ist WebAssembly in Aktion.

Dieses Tool teilen

Wenn dir diese Anleitung geholfen hat, teile Remove Audio mit deinem Team, deiner Klasse oder im Gruppenchat.