Extensão do Chrome para baixar clipes do CHZZK

Este é um downloader de clipes do CHZZK que funciona como uma extensão do Chrome.
Funciona sem redirecionar para páginas externas nem fazer chamadas de API.

Como era incômodo escrever um script separado
ou usar um programa à parte como o ffmpeg,
resolvi criar algo que pudesse ser usado no navegador como popup ou painel lateral.

Se os arquivos ts (transport stream) da transmissão ao vivo fossem simplesmente entregues unidos um a um,
teria sido uma tarefa fácil,

mas como é uma pena que seja preciso baixar um player com codecs integrados separados para reproduzir arquivos ts,
adicionei uma função de conversão para mp4.

Nesse processo, pensei em incluir o ffmpeg compilado em wasm,
mas achei exagerado para as funções necessárias e não gostei da ideia de aumentar o tamanho do bundle.

Então, ainda que de forma um pouco experimental, aproveitei para estudar a estrutura de arquivos ts e mp4
e, com a ajuda de um agente, implementei apenas as funções necessárias, compilei em wasm e apliquei ao projeto.

Por esse motivo, o tamanho da versão de release ficou em cerca de 211 KB no arquivo compactado.

Não dá para saber quando o método de streaming ou a estrutura vão mudar de novo,

mas quando isso acontecer, acho que será mais um desafio interessante para encarar.

O que foi usado

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

[roxie]

Se não se importar, fiquei curioso para saber com qual stack/ferramentas você fez a landing page; ficou limpa e bonita.

[aciddust]

Olá. Assim como na extensão, usei sveltekit e tailwindcss, e em alguns componentes usei shadcn-svelte~

[roxie]

Uau, você não tinha algo como um template separado? É realmente incrível.

[aciddust]

https://github.com/media-processor/chzzk-clip-downloader
É o repositório da landing page.

Antes de criar a landing do clip downloader, pensei bastante em como organizar a interface.
Escolhi algumas referências que pareciam boas em lugares que reúnem bem esse tipo de material, como o Mobbin,
e já cheguei a fazer uma PoC usando a abordagem de inserir isso em agentes como o Google AI Studio~

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

Aproveitei o conceito que obtive nessa época para este trabalho.

Desta vez, a composição do layout não era tão complexa,
então montei os componentes por seção e os organizei de cima para baixo haha

---

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

Escrevi um macro de teclado neste feriado, e esta é a landing page relacionada.
(tauri + sveltekit)

Como deixei isso consolidado como template para reutilizar, é bom porque a velocidade de trabalho aumenta.

[zero0000]

Sbumm é

[aciddust]

Está vindo
Talvez já tenha chegado..

[ziczin7176]

Ah, ótimo, vou usar bastante

[aciddust]

Obrigado! Seja feliz~

[pcj9024]

Bom, bom, SvelteKit é bom

[aciddust]

Aaaah, por favor, não joguem Svelte fora

[crawler]

Super recomendo kkk

[wedding]

Super recomendado, Crayon

[crawler]

Gostei muito da interface que mostra até as miniaturas

[aciddust]

Fico feliz que você tenha gostado~

Usei um método que extrai os dados do primeiro I-Frame (h.264) encontrado no ts, decodifica com VideoDecoder e desenha no canvas.

[click]

Gosto de Svelte

[chanapple]

Gosto de Svelte

[aciddust]

Gosto de Svelte~