สำหรับนักพัฒนาทั่วไป การดาวน์โหลดวิดีโอจากเว็บอาจดูเหมือนแค่การส่งคำสั่ง GET ไปยัง URL ของไฟล์ .mp4 แต่สำหรับแพลตฟอร์มยักษ์ใหญ่อย่าง Naver (รวมถึง Naver TV และ V LIVE เดิม) สถาปัตยกรรมเบื้องหลังนั้นซับซ้อนกว่านั้นมาก ในบทความนี้ ผมจะมาแชร์ประสบการณ์การสร้าง Naver Video Downloader และวิธีที่เราจัดการกับระบบป้องกันและการสตรีมแบบแยกส่วน
1. ปัญหาเชิงเทคนิค: ทำไม Naver ถึงดาวน์โหลดได้ยาก?
Naver ไม่ได้ให้บริการไฟล์วิดีโอเป็นไฟล์เดียว แต่ใช้เทคโนโลยี Adaptive Bitrate Streaming (ABS) ผ่านโปรโตคอล HLS (HTTP Live Streaming) เพื่อปรับคุณภาพวิดีโอตามความเร็วอินเทอร์เน็ตของผู้ใช้
ความท้าทายหลัก:
• HLS Architecture: วิดีโอถูกแยกออกเป็นไฟล์ดัชนี (.m3u8) และไฟล์ส่วนประกอบย่อยๆ (.ts หรือ .m4s) นับร้อยชิ้น
• Dynamic Tokens: Naver ใช้ระบบ VodSeed และการยืนยันตัวตนผ่าน API ที่มีความซับซ้อน หากไม่มี Parameter ที่ถูกต้องเช่น inkey และ vid เซิร์ฟเวอร์จะตอบกลับด้วย 403 Forbidden
• CORS Restrictions: นโยบายความปลอดภัยของเบราว์เซอร์ป้องกันไม่ให้สคริปต์จากโดเมนอื่นเข้าถึงไฟล์ไบนารีจาก CDN ของ Naver โดยตรง
2. การวิเคราะห์ Metadata และ Reverse Engineering
ขั้นตอนแรกคือการจำลอง (Emulate) พฤติกรรมของ Naver Web Player เพื่อดึงข้อมูล Metadata ที่จำเป็น
การวิเคราะห์ API Handshake
เราต้องทำการ Reverse Engineering ชุดคำสั่ง JavaScript ของ Naver เพื่อทำความเข้าใจวิธีที่มันเรียกใช้ API vod_play_info
- Extraction: ค้นหา vid และ inkey จาก Source Code หรือ Metadata แฝงในหน้าเว็บ
- Authentication: ส่งคำขอไปยังเซิร์ฟเวอร์ปลายทางพร้อม Header ที่ถูกต้อง (เช่น Referer และ User-Agent ที่กำหนดเอง)
- Resolution Mapping: วิเคราะห์ Master Playlist เพื่อเลือกสตรีมที่มี Bitrate สูงที่สุด (เช่น 1080p)
3. สถาปัตยกรรมระบบ: การจัดการประสิทธิภาพ (Performance)
การดาวน์โหลดวิดีโอ HLS ที่มีหลายร้อยชิ้นส่วนต้องอาศัยการจัดการทรัพยากรที่ดี
การใช้ Async Pool และ Concurrency Control
หากเราดาวน์โหลดไฟล์ .ts ทั้งหมดพร้อมกันจะทำให้ระบบค้าง หรือหากโหลดทีละไฟล์ก็จะช้าเกินไป เราจึงใช้แนวคิด Async Pool เพื่อควบคุมจำนวนคำขอที่ส่งออกไปพร้อมกัน (Concurrency Limit)
JavaScript
// ตัวอย่างตรรกะการควบคุมการดาวน์โหลดพร้อมกัน
async function downloadWithPool(urls, concurrencyLimit) {
const pool = new Set();
for (const url of urls) {
if (pool.size >= concurrencyLimit) {
await Promise.race(pool);
}
const promise = fetchSegment(url).then(() => pool.delete(promise));
pool.add(promise);
}
}
4. โซลูชันขั้นสูง: FFmpeg.wasm (WebAssembly)
นี่คือส่วนที่สำคัญที่สุดของ Naver Downloader คือการรวมไฟล์ (Merging) โดยไม่ต้องพึ่งพาพลังงานจากเซิร์ฟเวอร์
ทำไมต้องใช้ WebAssembly?
การรวมไฟล์วิดีโอบนเซิร์ฟเวอร์กินทรัพยากร CPU และ Bandwidth มหาศาล เราจึงย้ายกระบวนการนี้มาไว้ที่เบราว์เซอร์ของผู้ใช้โดยใช้ FFmpeg.wasm
• Remuxing ไม่ใช่ Transcoding: เราใช้คำสั่ง -c copy เพื่อย้าย Packet จาก Container เดิม (TS) ไปยัง Container ใหม่ (MP4) โดยไม่มีการเข้ารหัสใหม่ (No Re-encoding) ทำให้ภาพชัดเจน 1:1 และประมวลผลได้รวดเร็วภายในไม่กี่วินาที
• Data Privacy: ข้อมูลวิดีโอถูกประมวลผลใน RAM ของผู้ใช้ ทำให้เราไม่ต้องเก็บข้อมูลส่วนตัวใดๆ ไว้บนเซิร์ฟเวอร์
5. การจัดการกับ CORS ผ่าน Transparent Proxy
เนื่องจากเบราว์เซอร์บล็อกการดึงข้อมูลข้ามโดเมน เราจึงต้องสร้าง Layer พิเศษขึ้นมาคือ Transparent Proxy ที่ทำหน้าที่:
- รับคำขอจากผู้ใช้
- ไปดึงข้อมูลจาก Naver CDN พร้อมส่ง Header ที่จำเป็นไปตรวจสอบ
- ส่งข้อมูลกลับมายังผู้ใช้โดยปลดล็อก CORS Header ออก (Stripping) โดยใช้เทคนิค Stream Piping เพื่อไม่ให้กินหน่วยความจำของเซิร์ฟเวอร์เราเอง
6. สรุปผลและบทเรียนที่ได้รับ
การสร้างเครื่องมือดาวน์โหลดวิดีโอ Naver ไม่ใช่แค่เรื่องของการ Scraping แต่มันคือการเข้าใจลึกถึง Network Protocol, Security Layers และการประยุกต์ใช้เทคโนโลยีใหม่อย่าง WebAssembly
หากคุณกำลังมองหาเครื่องมือที่เสถียร รวดเร็ว และรองรับความละเอียดสูงสุด 1080p จาก Naver สามารถลองใช้งานได้ที่: 👉 Naver Video Downloader (ภาษาไทย)
จุดเด่นทางเทคนิค:
• Lossless Quality: รักษาคุณภาพต้นฉบับ 100% เพราะไม่มีการบีบอัดซ้ำ
• Speed: ดาวน์โหลดพร้อมกันหลายส่วนด้วย Async Concurrency
• Browser-Based: ทุกอย่างเสร็จสิ้นในเบราว์เซอร์ ไม่ต้องติดตั้งซอฟต์แวร์เพิ่มเติม
หากนักพัฒนาท่านใดมีข้อสงสัยเกี่ยวกับ HLS Parsing หรือการใช้งาน WASM ในโปรเจกต์วิดีโอ สามารถคอมเมนต์พูดคุยกันได้เลยครับ!
Tags: #NodeJS #WebDev #FFmpeg #WebAssembly #HLS #Streaming #Naver #SoftwareArchitecture
Top comments (0)