Tiện ích mở rộng Chrome tải clip Chzzk
(media-processor.github.io)Đây là trình tải clip Chzzk hoạt động dưới dạng tiện ích mở rộng Chrome
Hoạt động mà không cần chuyển sang trang bên ngoài hay gọi API
Vì việc phải tự viết script riêng
hay dùng chương trình riêng như ffmpeg khá phiền phức
nên tôi đã thử làm nó để có thể dùng ngay trong trình duyệt qua popup hoặc side panel.
Nếu các tệp ts (transport stream) được phát trực tiếp có thể được ghép nối tuần tự rồi xuất ra
thì có lẽ đây đã là một công việc đơn giản
Nhưng vì việc phải tải một trình phát có cài codec tổng hợp riêng mới có thể phát được tệp ts là một điều khá đáng tiếc
nên tôi đã thêm chức năng chuyển đổi sang mp4.
Trong quá trình này, tôi cũng từng nghĩ có lẽ phải đưa ffmpeg được build bằng wasm vào
nhưng điều đó lại quá nặng so với những chức năng cần thiết và tôi không thích việc nó làm tăng kích thước gói
Vì vậy, tuy có phần thử nghiệm, tôi đã tranh thủ tìm hiểu cấu trúc tệp ts và mp4
rồi với sự trợ giúp của agent, chỉ viết những chức năng cần thiết, build chúng bằng wasm và áp dụng vào.
Vì lý do đó, kích thước bản phát hành hiện vào khoảng 211KB tính theo tệp nén
Không biết sau này phương thức stream hay cấu trúc có thay đổi nữa hay không
Nhưng đến lúc đó, tôi nghĩ mình lại có thể thử một thử thách khác
Những gì đã sử dụng
- sveltekit
- shadcn-svelte
- tailwindcss
- ts2mp4 (https://github.com/aciddust/ts2mp4)
- imgico (https://crates.io/crates/imgico)
17 bình luận
Nếu tiện, cho mình hỏi trang landing page được làm bằng stack/tool nào vậy? Nhìn gọn gàng và đẹp quá.
Xin chào. Cũng như extension, tôi đã sử dụng sveltekit và tailwindcss, và một số component thì dùng shadcn-svelte~
Wow, bạn không có sẵn một mẫu nào riêng sao? Thật sự rất tuyệt vời.
https://github.com/media-processor/chzzk-clip-downloader
Đây là repository cho landing page.
Trước khi làm landing cho Clip Downloader, mình cũng suy nghĩ khá nhiều về cách bố trí màn hình.
Mình đã chọn ra vài mẫu thấy ổn ở những nơi tổng hợp reference tốt như mobbin, rồi từng làm PoC theo cách nhập chúng vào một agent như Google AI Studio~
https://github.com/sc-ahn/portfolio-example
https://portfolio-example-eosin.vercel.app
Mình đã mượn concept có được khi đó để thực hiện.
Trong lần làm này, cấu trúc layout cũng không phức tạp
nên mình chia component theo từng section rồi sắp xếp theo kiểu top-down thôi haha
https://aciddust.github.io/ddt-piano/
Kỳ nghỉ này mình có viết một keyboard macro, đây là landing page liên quan đến nó.
(tauri + sveltekit)
Khi đã cố định thành template để tái sử dụng thì tốc độ làm việc tăng lên nên khá ổn
Sbùm là
Sắp ra mắt
Có khi đã ra rồi..
Ồ, mình sẽ dùng thật tốt.
Cảm ơn bạn! Chúc bạn hạnh phúc nhé~
Thích lắm thích lắm, SvelteKit thích lắm
Hu hu hu, đừng ném Svelte đi mà
Ủng hộ mạnh luôn haha
Bút sáp cực chất
Tôi thực sự rất thích giao diện người dùng còn hiển thị cả ảnh thu nhỏ.
Thật vui khi bạn thích nó~
Tôi đã dùng cách trích xuất dữ liệu I-Frame (h.264) đầu tiên gặp được từ các
tsđã thu thập, sau đó giải mã bằngVideoDecodervà vẽ lên canvas.Tôi thích Svelte
Tôi thích Svelte
Tôi thích Svelte~