ส่วนขยาย Chrome สำหรับดาวน์โหลดคลิป Chzzk
(media-processor.github.io)นี่คือเครื่องมือดาวน์โหลดคลิป Chzzk ที่ทำงานในรูปแบบส่วนขยาย Chrome
ทำงานได้โดยไม่ต้องย้ายไปหน้าเว็บภายนอกหรือเรียกใช้ API
เพราะการต้องเขียนสคริปต์แยกต่างหาก
หรือใช้โปรแกรมแยกอย่าง ffmpeg นั้นค่อนข้างยุ่งยาก
จึงลองทำให้สามารถใช้งานเป็นป๊อปอัปหรือไซด์พาเนลในเบราว์เซอร์ได้
ถ้าไฟล์ ts (transport stream) ที่สตรีมสดถูกส่งออกมาโดยนำมาต่อกันทีละไฟล์
ก็น่าจะเป็นงานที่ทำได้ง่ายกว่านี้
แต่เพราะการเล่นไฟล์ ts ต้องดาวน์โหลดเพลเยอร์ที่ติดตั้งชุดโค้ดेकแบบรวมแยกต่างหาก
จึงรู้สึกเสียดายตรงจุดนั้นและได้เพิ่มฟังก์ชันแปลงเป็น mp4 เข้าไป
ในกระบวนการนี้เคยคิดว่าจะต้องใส่ ffmpeg ที่บิลด์เป็น wasm ขึ้นไปหรือไม่
แต่ก็รู้สึกว่ามันเกินความจำเป็นสำหรับฟังก์ชันที่ต้องใช้ และยังทำให้ขนาดบันเดิลใหญ่ขึ้นเกินไป
ดังนั้นแม้จะค่อนข้างเป็นแนวทดลองอยู่บ้าง แต่เพื่อศึกษาทั้งโครงสร้างไฟล์ ts และ mp4
จึงเขียนเฉพาะฟังก์ชันที่จำเป็นด้วยความช่วยเหลือของเอเจนต์ แล้วนำไปบิลด์เป็น wasm ก่อนจะนำมาใช้งาน
ด้วยเหตุนี้ ขนาดของเวอร์ชันรีลีสเมื่อเป็นไฟล์บีบอัดจึงอยู่ที่ประมาณ 211KB
แม้จะไม่รู้ว่าเมื่อไรวิธีการสตรีมหรือโครงสร้างจะเปลี่ยนไปอีกครั้ง
แต่ก็คิดว่าเมื่อถึงตอนนั้นก็น่าจะได้ลองความท้าทายแบบใหม่อีกครั้ง
สิ่งที่ใช้
- sveltekit
- shadcn-svelte
- tailwindcss
- ts2mp4 (https://github.com/aciddust/ts2mp4)
- imgico (https://crates.io/crates/imgico)
17 ความคิดเห็น
ถ้าไม่เป็นการรบกวน อยากทราบว่าทำหน้าแลนดิ้งเพจด้วยสแตก/เครื่องมืออะไรบ้างครับ ดูสะอาดตาและสวยมากเลย
สวัสดีครับ/ค่ะ เช่นเดียวกับส่วนขยายนี้ ผม/ฉันใช้
sveltekitและtailwindcssและใช้shadcn-svelteกับบางคอมโพเนนต์ด้วย~ว้าว คุณไม่มีอะไรอย่างเทมเพลตแยกไว้ต่างหากเลยเหรอครับ? สุดยอดจริง ๆ
https://github.com/media-processor/chzzk-clip-downloader
นี่คือรีโพซิทอรีของหน้าแลนดิ้งเพจ
ก่อนจะทำหน้าแลนดิ้งของตัวดาวน์โหลดคลิป ผมก็คิดอยู่พอสมควรว่าจะจัดองค์ประกอบหน้าจอยังไงดี
เลยลองเลือกดีไซน์ตัวอย่างที่คิดว่าโอเคมาสักหลายแบบจากที่รวมเรเฟอเรนซ์ไว้ดี ๆ อย่าง Mobbin
แล้วเคยทำ PoC โดยใช้วิธีป้อนให้เอเจนต์อย่าง Google AI Studio ครับ~
https://github.com/sc-ahn/portfolio-example
https://portfolio-example-eosin.vercel.app
ผมนำคอนเซปต์ที่ได้ตอนนั้นมาประยุกต์ใช้ในการทำงานครั้งนี้
งานรอบนี้ไม่ได้มีการจัดเลย์เอาต์ที่ซับซ้อนมาก
เลยแยกคอมโพเนนต์เป็นรายเซกชันแล้ววางแบบ top-down ครับ ฮ่าๆ
https://aciddust.github.io/ddt-piano/
ช่วงวันหยุดรอบนี้ผมเขียนคีย์บอร์ดแมโครไว้ อันนี้คือหน้าแลนดิ้งเพจที่เกี่ยวข้องครับ
(tauri + sveltekit)
พอทำให้เป็นเทมเพลตแล้วเอากลับมาหมุนใช้ซ้ำได้ ความเร็วในการทำงานก็ดีขึ้นจริง ๆ
สบุมคือ
กำลังมา
อาจจะมาถึงแล้วก็ได้..
โอ้ จะนำไปใช้ให้ดีเลย
ขอบคุณครับ! ขอให้มีความสุขนะ~
ดีจัง ดีจัง SvelteKit ดีจัง
ฮืออออ อย่าทำ Svelte เนิร์ฟเลยนะ
โคตรเห็นด้วย 555
ขอแนะนำอย่างยิ่ง ดินสอสีเทียน
UI ที่แสดงภาพตัวอย่างด้วยนี่ถูกใจผมมากจริง ๆ
ดีใจนะครับที่คุณชอบ~
ผมใช้วิธีดึงข้อมูล I-Frame (h.264) ที่เจอเป็นตัวแรกจาก
tsที่รวบรวมมาแล้วถอดรหัสด้วย
VideoDecoderและวาดลงบนแคนวาสชอบ Svelte
ชอบ Svelte
ชอบ Svelte ครับ~