Chzzk Klip İndirici Chrome Uzantısı

Bu, Chrome uzantısı olarak çalışan bir Chzzk klip indiricisidir.
Harici bir sayfaya geçmeden veya API çağrısı yapmadan çalışır.

Ayrı bir script yazmak ya da
ffmpeg gibi ayrı bir program kullanmak zahmetli olduğu için
tarayıcıda açılır pencere veya yan panel olarak kullanılabilecek şekilde yapmayı denedim.

Canlı yayınlanan ts (transport stream) dosyaları tek tek birleştirilip sunulsaydı
muhtemelen daha kolay bir iş olurdu,

ancak ts dosyalarını oynatabilmek için
ayrı bir entegre codec kurulu bir oynatıcı indirmek gerekmesi can sıkıcı olduğu için
mp4e dönüştürme özelliğini ekledim.

Bu süreçte wasm ile derlenmiş ffmpegi eklemem gerekir mi diye düşündüm, ancak
ihtiyaç duyulan işleve kıyasla bunun fazla ağır kalması ve paket boyutunu büyütmesi hoşuma gitmedi.

Bu yüzden biraz deneysel olsa da ts ve mp4 dosya yapısını incelemek amacıyla
bir ajanın yardımıyla yalnızca gereken işlevleri yazıp bunları wasm olarak derledikten sonra uyguladım.

Bu nedenle sürüm dosyasının boyutu sıkıştırılmış arşiv baz alındığında yaklaşık 211KB civarında çıkıyor.

Akış yöntemi ya da yapı ne zaman tekrar değişir bilinmez,

ancak o zaman geldiğinde yine başka bir meydan okumayı deneme fırsatı olabileceğini düşünüyorum.

Kullanılanlar

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

[roxie]

Eğer sakıncası yoksa landing page’i hangi stack/tool ile yaptığınızı merak ediyorum; çok sade ve güzel görünüyor.

[aciddust]

Merhaba. Eklentide olduğu gibi sveltekit ve tailwindcss kullandım; bazı bileşenlerde de shadcn-svelte kullandım~

[roxie]

Vay, ayrıca şablon gibi bir şeyiniz yok muydu? Gerçekten harikasınız.

[aciddust]

https://github.com/media-processor/chzzk-clip-downloader
Landing page deposu.

Clip downloader landing sayfasını yapmadan önce ekran kurgusunu nasıl oluşturacağım konusunda biraz düşündüm.
Mobbin gibi referansların iyi derlendiği yerlerden hoşuma giden birkaç tasarımı seçip
Google AI Studio gibi bir ajana girdiye dönüştürme yöntemiyle bir PoC denemesi yapmıştım~

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

O zaman elde ettiğim konsepti ödünç alarak çalıştım.

Bu çalışmada layout kurgusu da çok karmaşık değildi,
section bazında component’ler oluşturup top-down şekilde yerleştirdim haha

---

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

Bu tatilde bir keyboard macro yazdım; bununla ilgili landing page.
(tauri + sveltekit)

Bunu bir şablon olarak oturtup tekrar tekrar kullanınca çalışma hızı arttığı için güzel oluyor

[zero0000]

Sboom

[aciddust]

Geliyor
Belki de çoktan gelmiştir..

[ziczin7176]

Oh, çok iyi işime yarayacak

[aciddust]

Teşekkür ederim! Mutlu olun~

[pcj9024]

Harika harika, SvelteKit harika

[aciddust]

Hüüü lütfen Svelte'e yüklenmeyin

[crawler]

Şiddetle tavsiye hahaha

[wedding]

Şiddetle tavsiye edilen boya kalemi

[crawler]

Küçük görselleri de gösteren arayüzü gerçekten çok beğendim

[aciddust]

Beğenmenize sevindim~

Toplanan ts içinden ilk karşılaşılan I-Frame (h.264) verisini çıkarıp, bunu VideoDecoder ile decode ederek canvas'a çizme yöntemini kullandım.

[click]

Svelte'i seviyorum

[chanapple]

Svelte'i seviyorum

[aciddust]

Svelte'i seviyorum~