Das Projekt

Werkzeug sollte nichts kosten

Angefangen hat es als Programm auf meinem eigenen Rechner, weil ich keine Lust mehr hatte, zwei Stunden Aufnahme nach Kills abzusuchen. Jetzt liegt es im Browser, damit es alle benutzen können — ohne Installation und ohne Rechnung.

Wie es entstanden ist

Zuerst gab es die Desktop-Version: Python, OpenCV, ffmpeg, eine kleine Oberfläche. Die Erkennung wurde an echtem FiveM-Material eingemessen — Punktgröße, Abstand zur Mitte, Farbschwellen, Mindestabstand zwischen zwei Kills. Alle Werte, die hier im Browser laufen, stammen von dort.

Der Haken: Man musste Python installieren, ein Setup durchlaufen lassen und wissen, was ein Terminal ist. Für die meisten Leute ist das eine Hürde zu viel. Also wurde die Erkennung nach JavaScript portiert und ffmpeg als WebAssembly danebengestellt. Seitdem reicht ein Link.

Was sich zur Desktop-Version unterscheidet

	Browser	Desktop
Installation	keine	Python + Pakete
Erkennung	identisch	identisch
Standard-Ausgabe	Original 1:1, sofort	neu berechnet
Neu berechnen	ca. 10× langsamer	voller Speed
Motion Blur	nein	ja
Discord-Limit	ja, automatisch	nein
Kosten	keine	keine

Aufbau

Die Trennlinie läuft zwischen functions/ und dem Rest: die Fachlogik kennt kein DOM, keine Knöpfe, keine Farben. Man kann sie in Node laufen lassen oder testen, ohne einen Browser zu öffnen. Umgekehrt weiß die Oberfläche nichts davon, wie ein Killdot aussieht.

Ordnerstruktur

src/pages/                Eine Datei pro Seite. Neue Seite anlegen heißt: neue Datei.
src/layouts/              Das Grundgerüst, das jede Seite teilt.
src/components/           Wiederverwendbare Bausteine: Kopfzeile, Fußzeile, Schaubild.
src/scripts/functions/    Die Fachlogik. Weiß nichts von der Oberfläche.
src/scripts/ui/           Die Effekte. Jeder in einer eigenen Datei, jeder abschaltbar.
src/styles/               Tokens, Grundlagen, Bausteine, Effekte — in dieser Reihenfolge.
src/data/                 Navigation und wiederkehrende Texte an einer Stelle.

Die Funktionen im Einzelnen

detector.js	Killdot-Erkennung. Masken, Flächen, Ringprüfung.
scan.js	Video abtasten und Treffer zu Zeitstempeln machen.
cutter.js	ffmpeg.wasm: Video einhängen, Ausschnitt schneiden.
encoding.js	Die drei Ausgabe-Modi und die Bitrate fürs Größenlimit.
pipeline.js	Verbindet Erkennung und Schnitt zu einem Durchlauf.
zip.js	ZIP-Datei bauen, ohne Fremdcode.

Grundsätze

Deine Dateien gehören dir

Es gibt keinen Upload. Nicht weil er teuer wäre, sondern weil niemand seine Aufnahmen bei Fremden abladen sollte, um sie zu schneiden.

Keine erfundenen Zahlen

Jeder Messwert auf dieser Seite kommt aus einem echten Test. Wo etwas schlechter ist als die Alternative, steht das da.

Keine Regler ohne Wirkung

Eingestellt werden kann, was tatsächlich einen Unterschied macht. Der Rest ist eingemessen und bleibt so.

Funktioniert auch kaputt

Ohne JavaScript sind alle Texte lesbar. Fällt eine Animation aus, läuft der Rest weiter. Wer "weniger Bewegung" eingestellt hat, bekommt eine ruhige Seite.

Selbst betreiben

Statische Seite, kein Backend. Bauen und den Ordner dist/ irgendwo hinlegen.

Terminal

# Abhängigkeiten holen, ffmpeg wird mitkopiert
npm install

# Entwicklungsserver
npm run dev

# Fertige Seite nach dist/
npm run build

Für den Mehrkern-Modus müssen zwei Header gesetzt sein: Cross-Origin-Opener-Policy: same-origin und Cross-Origin-Embedder-Policy: require-corp. Die Datei public/_headers erledigt das auf Netlify und Cloudflare Pages automatisch. Auf GitHub Pages lassen sich keine Header setzen — dort läuft es im Einkern-Modus, also langsamer, aber es läuft.

Wer das gebaut hat

Xhypher. Ich mache meine Sachen kostenlos, weil ich selbst von kostenlosen Sachen gelernt habe. Wenn dir etwas fehlt oder etwas nicht funktioniert: sag Bescheid, dann schau ich es mir an.