Extension Chrome de téléchargement de clips Chzzk
(media-processor.github.io)Il s’agit d’un téléchargeur de clips Chzzk qui fonctionne sous forme d’extension Chrome.
Il fonctionne sans redirection vers une page externe ni appel d’API.
Écrire un script séparé
ou utiliser un programme distinct comme ffmpeg était contraignant,
alors je l’ai conçu pour pouvoir l’utiliser dans le navigateur via une fenêtre popup ou un panneau latéral.
Si les fichiers ts (transport stream) diffusés en direct avaient pu être fournis en les concaténant un par un,
cela aurait sans doute été un travail simple,
mais il était regrettable qu’il faille télécharger un lecteur avec des codecs intégrés supplémentaires pour lire les fichiers ts,
alors j’ai ajouté une fonction de conversion en mp4.
À ce stade, je me suis demandé s’il fallait embarquer ffmpeg compilé en wasm,
mais cela me semblait trop lourd par rapport aux fonctionnalités nécessaires et je n’aimais pas l’idée d’augmenter la taille du bundle.
J’en ai donc profité, dans une approche un peu expérimentale, pour étudier la structure des fichiers ts et mp4,
et, avec l’aide d’un agent, j’ai implémenté uniquement les fonctions nécessaires avant de les compiler en wasm et de les appliquer.
Pour cette raison, la version release fait environ 211 KB au format archive compressée.
Il est difficile de savoir quand le mode de streaming ou sa structure changera à nouveau,
mais le moment venu, je pense que ce sera l’occasion de relever un autre défi.
Éléments utilisés
- sveltekit
- shadcn-svelte
- tailwindcss
- ts2mp4 (https://github.com/aciddust/ts2mp4)
- imgico (https://crates.io/crates/imgico)
17 commentaires
Si cela ne vous dérange pas, j’aimerais savoir avec quelle stack / quels outils vous avez créé la landing page. Elle est sobre et très jolie.
Bonjour. Comme pour l’extension, j’ai utilisé SvelteKit et Tailwind CSS, et certains composants utilisent shadcn-svelte~
Waouh, vous n’aviez pas de modèle séparé ou quelque chose du genre ? C’est vraiment impressionnant.
https://github.com/media-processor/chzzk-clip-downloader
C’est le dépôt de la landing page.
Avant de créer la landing du téléchargeur de clips, je me suis un peu demandé comment organiser l’interface.
J’ai sélectionné quelques maquettes qui semblaient intéressantes sur des sites qui regroupent bien les références, comme mobbin,
et j’ai déjà réalisé un PoC en les donnant en entrée à un agent comme Google AI Studio~
https://github.com/sc-ahn/portfolio-example
https://portfolio-example-eosin.vercel.app
J’ai repris le concept obtenu à ce moment-là pour réaliser ce projet.
Pour ce travail, la composition du layout n’était pas particulièrement complexe,
alors j’ai structuré les composants par section et les ai disposés de façon top-down haha.
https://aciddust.github.io/ddt-piano/
J’ai écrit un macro clavier pendant ce long week-end, et voici la landing page associée.
(tauri + sveltekit)
Le fait de l’avoir figée sous forme de template et de pouvoir la réutiliser accélère vraiment le travail, donc c’est appréciable.
Sboum, c’est là.
Ça arrive
C'est peut-être déjà arrivé..
Oh, super, je vais bien m’en servir.
Merci ! Soyez heureux~
J’adore, j’adore, j’adore SvelteKit
Bouhouhou, ne détestez pas Svelte.
Je recommande fortement lol
Je recommande fortement Crayon
J’aime vraiment beaucoup l’interface qui affiche même les miniatures.
Ça me fait plaisir de voir que ça vous plaît~
J’ai utilisé une méthode qui extrait les premières données d’I-Frame (h.264) rencontrées dans les
ts, puis les décode avecVideoDecoderavant de les dessiner sur un canvas.J’aime Svelte.
J’aime Svelte.
J’aime bien Svelte~