Show GN: 치지직 클립 다운로더 크롬익스텐션
(media-processor.github.io)크롬익스텐션 방식으로 작동하는 치지직 클립 다운로더입니다
외부 페이지 이동이나 API 호출 없이 작동합니다
별도의 스크립트를 작성하거나
ffmpeg 같은 별도의 프로그램을 사용하는게 번거로워서
브라우저에서 팝업이나 사이드패널로 사용할 수 있도록 만들어보았습니다.
라이브 스트리밍 되는 ts(transport stream) 파일을 하나씩 붙여서 내어주었다면
쉬운 작업이 되었을 것 같은데
별도의 통합코덱이 설치된 플레이어를 받아야 ts 파일을 재생할 수 있는점이 아쉬워서
mp4 로 변환하는 기능을 추가했습니다.
이 과정에서 wasm 으로 빌드된 ffmpeg 를 올려야하나 싶었지만
필요한 기능에 비해 너무 과하고 번들 크기를 늘려버리는게 마음에 안들었는데요
그래서 다소 실험적이지만 ts, mp4 파일 구조를 공부할겸
에이전트의 도움을 받아 필요한 기능만 작성해서 wasm 으로 빌드한 뒤에 적용해보았습니다.
이러한 이유로 릴리즈 버전의 크기는 압축파일 기준으로 약 211KB 정도 나오네요
언제 또 스트림 방식이나 구조가 달라질지 모르겠지만
그 때가 되면 또 다른 도전을 해볼 수 있을 것 같다는 생각이 드네요
사용한 것들
- sveltekit
- shadcn-svelte
- tailwindcss
- ts2mp4 (https://github.com/aciddust/ts2mp4)
- imgico (https://crates.io/crates/imgico)
안녕하세요. 익스텐션과 마찬가지로 sveltekit, tailwindcss 사용했고, 일부 컴포넌트는 shadcn-svelte 사용했습니다~
https://github.com/media-processor/chzzk-clip-downloader
랜딩페이지 레파지토리입니다.
클립다운로더 랜딩을 만들기전에 화면구성을 어떻게 할지 고민을 좀 했는데요
mobbin 같이 래퍼런스 잘 모아둔 곳에서 괜찮겠다 싶은 시안을 몇 가지 골라보고
Google AI Studio 같은 에이전트에 입력하는 방식으로 PoC를 진행한 적 있습니다~
https://github.com/sc-ahn/portfolio-example
https://portfolio-example-eosin.vercel.app
이 때 얻은 컨셉을 차용해서 작업했어요
이번작업에서는 레이아웃 구성이 복잡하지도 않고
섹션단위로 컴포넌트 구성해서 탑다운으로 배치했어요 ㅎㅎ
https://aciddust.github.io/ddt-piano/
이번 연휴에 키보드매크로를 작성했는데 관련 랜딩페이지에요
(tauri + sveltekit)
템플릿으로 굳혀놓고 돌려쓰니까 작업속도가 붙어서 좋긴해요
마음에 들어하셔서 기분이 좋네요~
수집한 ts 에서 가장 처음 만나는 I-Frame(h.264) 데이터를 추출해서
VideoDecoder 로 디코드하고 캔버스에 그리는 방식을 사용했습니다