Chzzk क्लिप डाउनलोडर Chrome extension
(media-processor.github.io)यह Chzzk क्लिप डाउनलोडर है जो Chrome extension के रूप में काम करता है.
यह बिना किसी external page navigation या API call के काम करता है.
अलग script लिखना या
ffmpeg जैसे अलग program का इस्तेमाल करना झंझट लगा,
इसलिए इसे browser में popup या side panel के रूप में इस्तेमाल किया जा सके, इस तरह बनाया.
अगर live streaming होने वाली ts (transport stream) फ़ाइलों ko एक-एक करके जोड़कर ही दिया जाता,
तो शायद यह आसान काम होता.
लेकिन ts फ़ाइल चलाने के लिए अलग integrated codec वाला player डाउनलोड करना पड़ता है, यह खटकने वाली बात थी,
इसलिए mp4 में convert करने की सुविधा भी जोड़ दी.
इस प्रक्रिया में लगा कि शायद wasm में build किया हुआ ffmpeg चढ़ाना पड़ेगा,
लेकिन ज़रूरी functionality के मुकाबले वह बहुत ज़्यादा भारी था और bundle size बढ़ा देता, जो पसंद नहीं आया.
इसलिए थोड़ा experimental तरीके से, ts और mp4 फ़ाइल संरचना को समझने के बहाने,
agent की मदद से केवल ज़रूरी functionality लिखी, उसे wasm में build किया और फिर लागू किया.
इसी वजह से release version का आकार compressed file ke aadhar par लगभग 211KB के आसपास है.
पता नहीं आगे stream का तरीका या structure फिर कब बदल जाए,
लेकिन जब ऐसा होगा, तब शायद उसे भी एक नई चुनौती की तरह आज़माया जा सकेगा.
इस्तेमाल की गई चीज़ें
- sveltekit
- shadcn-svelte
- tailwindcss
- ts2mp4 (https://github.com/aciddust/ts2mp4)
- imgico (https://crates.io/crates/imgico)
17 टिप्पणियां
अगर आप साझा करना चाहें, तो जानना चाहूँगा कि आपने landing page किस stack/tool से बनाया है। वह साफ़-सुथरा और सुंदर लग रहा है।
नमस्ते। एक्सटेंशन की तरह ही इसमें भी
sveltekit,tailwindcssका इस्तेमाल किया गया है, और कुछ कंपोनेंट्स मेंshadcn-svelteइस्तेमाल किया गया है~वाह, क्या आपके पास अलग से कोई template वगैरह नहीं था? सच में कमाल है।
https://github.com/media-processor/chzzk-clip-downloader
यह landing page repository है।
Clip downloader landing बनाने से पहले मैंने थोड़ा सोचा कि screen composition कैसी रखी जाए।
mobbin जैसी जगहों पर, जहाँ references अच्छी तरह से संकलित होते हैं, वहाँ से कुछ ऐसे mockups चुने जो ठीक लगे,
और Google AI Studio जैसे agent में input देने के तरीके से PoC चलाने का अनुभव रहा है~
https://github.com/sc-ahn/portfolio-example
https://portfolio-example-eosin.vercel.app
उस समय मिले concept को अपनाकर मैंने यह काम किया।
इस बार के काम में layout structure बहुत complex नहीं था,
इसलिए section unit में components बनाकर उन्हें top-down तरीके से रखा haha
https://aciddust.github.io/ddt-piano/
इस बार की छुट्टियों में मैंने keyboard macro लिखा था, और यह उससे जुड़ा landing page है।
(tauri + sveltekit)
इसे template की तरह fix करके बार-बार इस्तेमाल करने से काम की speed बढ़ जाती है, यह अच्छा लगता है।
स्पूम है
आ रहा है
शायद पहले ही आ चुका हो..
ओह, अच्छी तरह इस्तेमाल करूंगा/करूंगी
धन्यवाद! खुश रहें~
बहुत अच्छा बहुत अच्छा SvelteKit बहुत अच्छा
हुएएएएंग, Svelte को मत छेड़िए
ज़ोरदार सिफारिश lol
ज़बरदस्त क्रेयन
थंबनेल भी दिखाने वाला UI मुझे सच में बहुत पसंद आया।
आपको यह पसंद आया, यह जानकर अच्छा लगा~
एकत्र किए गए ts में सबसे पहले मिलने वाले I-Frame (h.264) डेटा को निकालकर,
उसे VideoDecoder से decode करके canvas पर draw करने का तरीका इस्तेमाल किया गया।
मुझे Svelte पसंद है
मुझे Svelte पसंद है
Svelte पसंद है~