KI-gesteuerte Videobearbeitung: So funktioniert ein Browser-Editor mit JSON-Projektdatei

Die Zukunft der Videobearbeitung könnte einfacher sein, als wir denken. Mit FableCut, einem kürzlich veröffentlichten Open-Source-Projekt, wird die gesamte Timeline eines Videos in einer einzigen JSON-Datei gespeichert. Der Clou: Diese Datei dient gleichzeitig als Schnittstelle für KI-Agenten, Web-Interfaces und sogar manuelle Bearbeitung mit einem Texteditor. Doch warum ist dieses Prinzip so revolutionär?

Vom API zur Projektdatei: Die Umkehr des üblichen Ansatzes

Die meisten KI-gestützten Videotools arbeiten mit APIs. Entwickler rufen Funktionen wie clipEinfügen() oder FilterAnwenden() auf, während der Dienst die eigentliche Bearbeitung im Hintergrund übernimmt. Der Nachteil: Wer das Ergebnis anpassen möchte, benötigt eine zusätzliche Kollaborationsschicht oder eine grafische Oberfläche.

FableCut geht den umgekehrten Weg. Die gesamte Videobearbeitung – vom Einfügen von Clips über Keyframes bis hin zu Übergängen – wird in der Datei project.json abgelegt. Diese JSON-Struktur wird nicht nur vom Editor gelesen, sondern auch von jeder Software, die JSON verarbeiten kann. Ob ein Python-Skript, das jq-Tool oder ein KI-Agent wie Claude Code: Alles kann die Timeline bearbeiten, indem es einfach die Projektdatei modifiziert.

Ein konkretes Beispiel:

{
  "id": "titel",
  "kind": "text",
  "track": "V3",
  "start": 0,
  "duration": 2.2,
  "props": {
    "text": "HANDGEMACHT",
    "font": "Bebas Neue",
    "glow": 45,
    "textAnim": "letter-pop"
  }
}

In diesem Ausschnitt wird ein leuchtender Textclip definiert – ohne API-Aufruf, ohne zusätzliche Abstraktion. Die Bearbeitung erfolgt direkt durch das Ändern der Projektdatei.

Server-Sent Events als minimalistische Lösung

Auf Hacker News wurde gefragt, warum der Editor Server-Sent Events (SSE) statt WebSockets nutzt. Die Antwort ist simpel: Es geht hier nicht um Echtzeit-Kommunikation, sondern um eine Benachrichtigung des Browsers.

Der Server überwacht die project.json mit fs.watch und sendet bei Änderungen nur die Zeichenfolge change an den Client – ohne Payload. Der Browser reagiert darauf, indem er die aktualisierte Datei neu lädt und die Timeline neu rendert. Dieser Mechanismus ist in nur etwa 15 Zeilen Code auf einem einfachen node:http-Server implementiert.

Der Vorteil: WebSockets wären überdimensioniert, da die Daten nur in eine Richtung fließen. Jede Änderung – sei es durch die Benutzeroberfläche, ein Skript oder einen KI-Agenten – wird über REST oder das Dateisystem vorgenommen. Der Browser benötigt lediglich die Information, dass eine Aktualisierung stattgefunden hat. Ein fehlender Event ist unproblematisch, da der nächste Abruf ohnehin die aktuelle Version der Datei liefert.

Revisionen als einfaches Concurrency-Modell

Um Konflikte bei gleichzeitigen Bearbeitungen zu vermeiden, führt FableCut einen einfachen, aber effektiven Mechanismus ein: eine Revisionsnummer. Jede Änderung an der Projektdatei muss diese Nummer erhöhen. Erhält der Server eine Schreibanfrage mit einer Revisionsnummer, die nicht höher ist als die aktuelle Version, wird die Anfrage mit einem HTTP-Statuscode 409 (Conflict) abgelehnt.

Dieses Modell ermöglicht eine nahtlose Zusammenarbeit zwischen Mensch und KI-Agent. Während ein Benutzer einen Clip in der Timeline zieht, führt der KI-Agent möglicherweise eine automatische Bearbeitung durch. Führt der Agent eine veraltete Version aus, wird sein Schreibversuch abgelehnt. Der Agent liest die aktualisierte Datei neu ein, wendet seine Änderungen auf die neue Version an und schreibt erneut. Es sind keine komplexen Algorithmen wie Operational Transforms oder CRDTs nötig – die Bearbeitungen sind grob und selten genug, um mit einem einfachen „Last-Writer-Wins“-Ansatz zu funktionieren.

Framegenaue CSS-Animationen für präzise Exporte

Ein besonderes Feature von FableCut sind animierte SVG-Overlays wie Untertitel oder Konfetti-Effekte. Diese werden als .svg-Dateien mit CSS @keyframes animiert. Doch hier stellt sich ein Problem: Ein Videocompositor muss den exakten Zustand einer Animation zu einem bestimmten Zeitpunkt rendern können. CSS-Animationen laufen jedoch in Echtzeit ab und sind nicht direkt steuerbar.

Die Lösung liegt in der manuellen Steuerung der Animation. Der Compositor setzt den CSS-Parameter animation-delay: calc(var(--d, 0s) - t) ein, wobei t die lokale Zeit des Clips ist. Ein negativer Delay-Wert bedeutet, dass die Animation in der Vergangenheit gestartet ist. Eine pausierte Animation mit einem Delay von -1.3s zeigt somit exakt den Frame nach 1,3 Sekunden an – sowohl in der Vorschau als auch im finalen Export.

Für Entwickler, die eigene SVG-Animationen erstellen, gilt eine einfache Regel: Vermeiden Sie harte Kodierung des animation-delay-Parameters. Nutzen Sie stattdessen die benutzdefinierte Eigenschaft --d für Verzögerungen, um die Flexibilität zu erhalten.

Warum FableCut ffmpeg nicht ersetzt – und auch nicht soll

Ein Kommentar auf Hacker News lautete: „Warum nicht einfach Claude Zugriff auf ffmpeg geben?“ Die Antwort ist simpel: ffmpeg ist ein hervorragendes Tool für Batch-Bearbeitungen wie Trimmen, Zusammenführen oder Transkodieren. Doch es ist ein write-only-System: Sobald ffmpeg eine Bearbeitung durchführt, liegt das Ergebnis als fertiger Clip vor – eine iterative Anpassung ist nicht möglich.

FableCut positioniert sich als Brücke zwischen agentengesteuerter Bearbeitung und ffmpeg. Die JSON-Projektdatei dient als zustandsbehaftetes Zwischenspeicher, der Echtzeit-Vorschau und iterative Bearbeitung ermöglicht. Erst am Ende des Prozesses übernimmt ffmpeg die finale Rasterisierung der Frames und die Kodierung des Videos. Der Editor selbst ist also kein Ersatz für ffmpeg, sondern ein Werkzeug, das den kreativen Prozess beschleunigt – bevor die Rohdaten an ffmpeg übergeben werden.

Grenzen und ehrliche Einordnung

Aktuell hat FableCut noch einige Einschränkungen. Der Export erfolgt über den Browser, sodass eine geöffnete Chromium-Sitzung erforderlich ist (headless Export ist noch nicht implementiert). Zudem ist der Editor primär für Chromium optimiert.

Ein weiterer wichtiger Punkt: KI-Agenten sind zwar in der Lage, präzise Schnitte oder Effekte zu setzen, doch sie fehlt oft der „Geschmack“ – die menschliche Komponente der Videobearbeitung. Deshalb ist FableCut bewusst so konzipiert, dass es sowohl von Maschinen als auch von Menschen genutzt werden kann. Die KI übernimmt die repetitive Arbeit, während der Nutzer die künstlerische Leitung behält.

Ein Projekt, das seine eigene Philosophie beweist

Interessanterweise wurde ein großer Teil der Dokumentation und des Editors in Zusammenarbeit mit KI-Agenten erstellt – ein passendes Symbol für ein Tool, dessen primärer Nutzer eine KI ist. Doch die Architekturentscheidungen, wie die JSON-basierte Timeline oder das einfache Concurrency-Modell, sind bewusst gewählt und würden auch ohne KI-Unterstützung funktionieren.

Das Projekt ist unter der MIT-Lizenz verfügbar, enthält keine Abhängigkeiten und lässt sich mit einem einzigen Befehl – node server.js – starten. Wer also experimentierfreudig ist, findet hier eine Plattform, um ungewöhnliche Videobearbeitungsideen umzusetzen.