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)
마음에 들어하셔서 기분이 좋네요~
수집한 ts 에서 가장 처음 만나는 I-Frame(h.264) 데이터를 추출해서
VideoDecoder 로 디코드하고 캔버스에 그리는 방식을 사용했습니다