CHZZKクリップダウンローダー Chrome拡張機能
(media-processor.github.io)Chrome拡張機能方式で動作するCHZZKクリップダウンローダーです。
外部ページへの移動やAPI呼び出しなしで動作します。
別途スクリプトを書いたり、
ffmpeg のような別プログラムを使ったりするのが面倒だったため、
ブラウザでポップアップやサイドパネルとして使えるように作ってみました。
ライブ配信される ts(transport stream) ファイルを1つずつつなげて出力できていれば、
もっと簡単な作業になっていた気もしますが、
別途統合コーデックがインストールされたプレーヤーを入れないと ts ファイルを再生できない点が惜しかったので、
mp4 に変換する機能を追加しました。
この過程で wasm にビルドされた ffmpeg を載せるべきかとも思いましたが、
必要な機能に対してあまりにも大げさで、バンドルサイズを増やしてしまうのが気に入りませんでした。
そこでやや実験的ではありますが、ts と mp4 のファイル構造を勉強するついでに、
エージェントの助けを借りて必要な機能だけを実装し、それを wasm にビルドして適用してみました。
こうした理由から、リリース版のサイズは圧縮ファイル基準で約211KBほどになっています。
いつまたストリーム方式や構造が変わるかわかりませんが、
その時になれば、また別の挑戦をしてみることになりそうです。
使ったもの
- sveltekit
- shadcn-svelte
- tailwindcss
- ts2mp4 (https://github.com/aciddust/ts2mp4)
- imgico (https://crates.io/crates/imgico)
17件のコメント
もし差し支えなければ、ランディングページはどんなスタック／ツールで作られたのか気になります。すっきりしていてきれいなので。
こんにちは。エクステンションと同様に SvelteKit、Tailwind CSS を使用し、一部のコンポーネントには 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)
テンプレートとして固めておいて使い回せるので、作業スピードが上がってよかったです。
スブームは
来る
もう来たのかも..
おお、活用させてもらいます
ありがとうございます！お幸せに〜
いいね いいね SvelteKit いいね
ふええええん、Svelteを捨てないでください
激しくおすすめwww
超おすすめクレヨン
サムネイルまで表示してくれるUIが本当に気に入っています
気に入っていただけたようで、うれしいです〜
収集した ts から最初に見つかる I-Frame(h.264) データを抽出して、
VideoDecoder でデコードし、キャンバスに描画する方式を使いました
Svelteいいですね
Svelteが好きです
Svelte、いいですね〜