Extensión de Chrome para descargar clips de CHZZK
(media-processor.github.io)Es un descargador de clips de CHZZK que funciona como una extensión de Chrome.
Funciona sin redirigir a páginas externas ni hacer llamadas a APIs.
Me resultaba incómodo tener que escribir scripts por separado
o usar programas aparte como ffmpeg,
así que lo hice para poder usarlo desde el navegador como popup o panel lateral.
Si entregara los archivos ts (transport stream) de la transmisión en vivo unidos uno por uno,
probablemente habría sido una tarea sencilla, pero
como era una lástima que para reproducir archivos ts hubiera que descargar un reproductor con códecs integrados por separado,
agregué una función para convertirlos a mp4.
En ese proceso pensé en subir ffmpeg compilado como wasm,
pero me pareció excesivo para las funciones necesarias y no me gustó que aumentara el tamaño del bundle.
Así que, aunque es algo experimental, aproveché para estudiar la estructura de archivos ts y mp4;
con ayuda de un agente, implementé solo las funciones necesarias, las compilé como wasm y luego las apliqué.
Por estas razones, el tamaño de la versión de lanzamiento queda en alrededor de 211 KB en archivo comprimido.
No se sabe cuándo podría volver a cambiar el método de streaming o la estructura, pero
pienso que, cuando llegue ese momento, también será posible intentar otro desafío.
Cosas utilizadas
- sveltekit
- shadcn-svelte
- tailwindcss
- ts2mp4 (https://github.com/aciddust/ts2mp4)
- imgico (https://crates.io/crates/imgico)
17 comentarios
Si no te molesta, me gustaría saber con qué stack/herramientas hiciste la landing page. Se ve limpia y bonita.
Hola. Al igual que con la extensión, usé sveltekit y tailwindcss, y para algunos componentes usé shadcn-svelte~
Vaya, ¿no tenían algo como una plantilla aparte? De verdad, es impresionante.
https://github.com/media-processor/chzzk-clip-downloader
Es el repositorio de la landing page.
Antes de crear la landing del descargador de clips, estuve pensando un poco en cómo estructurar la pantalla.
Elegí algunas propuestas que me parecieron buenas en sitios con buenas recopilaciones de referencias, como mobbin,
y alguna vez hice una PoC ingresándolas en un agente como Google AI Studio~
https://github.com/sc-ahn/portfolio-example
https://portfolio-example-eosin.vercel.app
Tomé el concepto que obtuve en ese momento y trabajé a partir de él.
En este trabajo la composición del layout no era tan compleja,
así que armé los componentes por secciones y los acomodé de arriba hacia abajo jaja.
https://aciddust.github.io/ddt-piano/
Durante este feriado hice una macro de teclado, y esta es la landing page relacionada.
(tauri + sveltekit)
Está bueno porque, como lo dejé fijo como plantilla y lo reutilizo, la velocidad de trabajo mejora.
Sboom es
Ya viene
Quizá ya llegó..
Oh, lo usaré bien
¡Gracias! ¡Que seas feliz!
Me gusta, me gusta, me gusta SvelteKit
Noo, por favor no me mates a Svelte
Muy recomendado jajaja
Buenísimo, Crayon.
La interfaz que incluso muestra las miniaturas me gusta muchísimo.
Me alegra que te haya gustado~
Usé un método que extrae los datos del primer I-Frame (h.264) que encuentra en el
tsrecopilado, los decodifica conVideoDecodery luego los dibuja en el canvas.Me gusta Svelte.
Me gusta Svelte
Me gusta Svelte~