Ekstensi Chrome pengunduh klip CHZZK

Ini adalah pengunduh klip CHZZK yang bekerja dalam bentuk ekstensi Chrome
Berfungsi tanpa berpindah ke halaman eksternal atau memanggil API

Karena repot jika harus menulis skrip terpisah
atau menggunakan program terpisah seperti ffmpeg,
saya membuatnya agar bisa digunakan sebagai popup atau side panel di browser.

Kalau file ts (transport stream) dari live streaming disajikan dengan cara digabung satu per satu,
rasanya ini akan menjadi pekerjaan yang mudah,

namun cukup disayangkan karena file ts hanya bisa diputar jika mengunduh pemutar dengan codec terintegrasi terpisah,
saya pun menambahkan fitur konversi ke mp4.

Dalam proses ini saya sempat mempertimbangkan apakah perlu memuat ffmpeg yang di-build dengan wasm,
namun rasanya itu terlalu berlebihan dibanding fungsi yang dibutuhkan dan saya juga tidak suka jika ukuran bundle membesar.

Jadi meski agak eksperimental, sambil mempelajari struktur file ts dan mp4,
dengan bantuan agen saya menulis hanya fungsi yang diperlukan, lalu membangunnya dengan wasm dan menerapkannya.

Karena alasan tersebut, ukuran versi rilisnya sekitar 211KB berdasarkan file terkompresi.

Saya juga tidak tahu kapan metode atau struktur streaming akan berubah lagi,

namun ketika saat itu tiba, saya merasa itu akan menjadi tantangan lain yang bisa dicoba.

Yang digunakan

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

[roxie]

Kalau berkenan, saya penasaran landing page-nya dibuat dengan stack/tool apa. Soalnya tampilannya rapi dan bagus.

[aciddust]

Halo. Sama seperti ekstensi ini, saya menggunakan SvelteKit dan Tailwind CSS, dan untuk beberapa komponen saya memakai shadcn-svelte~

[roxie]

Wah, apakah Anda tidak punya semacam template terpisah? Benar-benar luar biasa.

[aciddust]

https://github.com/media-processor/chzzk-clip-downloader
Ini adalah repositori landing page.

Sebelum membuat landing untuk clip downloader, saya sempat cukup memikirkan bagaimana sebaiknya komposisi layarnya.
Saya pernah mencoba membuat PoC dengan memilih beberapa desain referensi yang terlihat bagus dari tempat yang mengumpulkan referensi dengan rapi seperti mobbin,
lalu memasukkannya ke agen seperti Google AI Studio.

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

Saya mengerjakannya dengan mengadopsi konsep yang didapat saat itu.

Untuk pekerjaan kali ini, susunan layout-nya juga tidak terlalu rumit,
dan saya menyusun komponen per section lalu menempatkannya secara top-down, hehe.

---

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

Selama libur panjang kali ini saya membuat keyboard macro, dan ini adalah landing page terkait.
(tauri + sveltekit)

Karena saya sudah memantapkannya sebagai template dan bisa dipakai berulang, enaknya kecepatan kerja jadi meningkat.

[zero0000]

Sbumm adalah

[aciddust]

Akan datang
Mungkin sudah datang..

[ziczin7176]

Oh, akan kupakai dengan baik

[aciddust]

Terima kasih! Semoga bahagia~

[pcj9024]

Bagus banget, bagus banget, SvelteKit bagus banget

[aciddust]

Huweee jangan pakai Svelte

[crawler]

Sangat direkomendasikan wkwkwk

[wedding]

Sangat direkomendasikan, Crayon

[crawler]

Saya sangat suka UI-nya yang bahkan menampilkan thumbnail.

[aciddust]

Senang rasanya karena Anda menyukainya~

Saya menggunakan metode mengekstrak data I-Frame (h.264) pertama yang ditemukan dari ts yang dikumpulkan, lalu mendekodenya dengan VideoDecoder dan menggambarnya ke kanvas.

[click]

Saya suka Svelte

[chanapple]

Saya suka Svelte.

[aciddust]

Saya suka Svelte~