Chzzk-Clip-Downloader als Chrome-Erweiterung

Dies ist ein Chzzk-Clip-Downloader, der als Chrome-Erweiterung funktioniert.
Er arbeitet ohne den Wechsel zu externen Seiten oder API-Aufrufe.

Da es umständlich war, ein separates Skript zu schreiben
oder ein zusätzliches Programm wie ffmpeg zu verwenden,
habe ich ihn so entwickelt, dass er im Browser als Popup oder Seitenpanel genutzt werden kann.

Wenn die live gestreamten ts-Dateien (Transport Stream) einzeln zusammengefügt und ausgegeben worden wären,
wäre es wahrscheinlich eine einfache Aufgabe gewesen.

Allerdings fand ich es unpraktisch, dass man zum Abspielen von ts-Dateien einen Player mit separat installiertem integriertem Codec benötigt,
daher habe ich eine Funktion zur Umwandlung in mp4 hinzugefügt.

Dabei habe ich überlegt, ob ich ein als wasm gebautes ffmpeg einbinden sollte,
aber das wäre für die benötigten Funktionen zu überdimensioniert gewesen und hätte die Bundle-Größe unnötig erhöht.

Deshalb habe ich – wenn auch etwas experimentell – die Struktur von ts- und mp4-Dateien studiert
und mit Hilfe eines Agenten nur die benötigten Funktionen implementiert, anschließend als wasm gebaut und angewendet.

Aus diesem Grund liegt die Größe der Release-Version als komprimiertes Archiv bei etwa 211 KB.

Ich weiß nicht, wann sich die Streaming-Methode oder die Struktur wieder ändern wird,
aber wenn es so weit ist, denke ich, dass das erneut eine interessante Herausforderung sein könnte.

Verwendet

• sveltekit
• shadcn-svelte
• tailwindcss
• ts2mp4 (https://github.com/aciddust/ts2mp4)
• imgico (https://crates.io/crates/imgico)

[roxie]

Falls es Ihnen recht ist, würde mich interessieren, mit welchem Stack bzw. welchen Tools Sie die Landingpage erstellt haben — sie ist so sauber und schön gestaltet.

[aciddust]

Hallo. Wie bei der Extension selbst habe ich sveltekit und tailwindcss verwendet, und für einige Komponenten kam shadcn-svelte zum Einsatz~

[roxie]

Wow, hatten Sie dafür nicht so etwas wie eine eigene Vorlage? Wirklich beeindruckend.

[aciddust]

https://github.com/media-processor/chzzk-clip-downloader
Das ist das Repository für die Landingpage.

Bevor ich die Landingpage für den Clip-Downloader erstellt habe, habe ich mir einige Gedanken darüber gemacht, wie der Bildschirm aufgebaut sein sollte.
Ich habe an Orten wie mobbin, wo gute Referenzen gesammelt sind, ein paar Entwürfe ausgewählt, die vielversprechend wirkten,
und einmal ein PoC durchgeführt, indem ich sie in einen Agenten wie Google AI Studio eingegeben habe~

https://github.com/sc-ahn/portfolio-example
https://portfolio-example-eosin.vercel.app

Das damals gewonnene Konzept habe ich für diese Arbeit übernommen.

Bei dieser Arbeit ist der Layout-Aufbau auch nicht besonders komplex,
also habe ich die Komponenten nach Sektionen aufgebaut und sie top-down angeordnet, hehe.

---

https://aciddust.github.io/ddt-piano/

Über die Feiertage habe ich ein Tastaturmakro geschrieben; das ist die dazugehörige Landingpage.
(tauri + sveltekit)

Es ist auf jeden Fall praktisch, dass die Arbeit schneller vorangeht, seit ich das als Template verfestigt habe und wiederverwende.

[zero0000]

Sboom ist

[aciddust]

Kommt
Vielleicht ist es schon da..

[ziczin7176]

Oh, ich werde es gut nutzen.

[aciddust]

Vielen Dank! Alles Gute~

[pcj9024]

Gefällt mir, gefällt mir, SvelteKit gefällt mir

[aciddust]

Huuuu, bitte verdirb mir Svelte nicht.

[crawler]

Klare Empfehlung, haha

[wedding]

Absolut empfehlenswert, Crayon.

[crawler]

Die UI, die sogar Vorschaubilder anzeigt, gefällt mir wirklich sehr.

[aciddust]

Es freut mich, dass es Ihnen gefällt~

Ich habe die Methode verwendet, aus den gesammelten TS-Dateien die zuerst auftauchenden I-Frame-(h.264)-Daten zu extrahieren, sie mit VideoDecoder zu decodieren und anschließend auf ein Canvas zu zeichnen.

[click]

Ich mag Svelte.

[chanapple]

Ich mag Svelte.

[aciddust]

Ich mag Svelte~