VAM Seek: thư viện 15KB biến timeline video thành lưới 2D, chạy hoàn toàn trên trình duyệt

TL;DR

VAM Seek (Visual Array Matrix Seeker) là thư viện JavaScript 15KB do Susumu Takahashi (@unhaya) phát hành. Nó thay thanh timeline 1D bằng một lưới thumbnail 2D — bạn click ô nào thì video nhảy tới scene đó. Toàn bộ frame được trích xuất ngay trên trình duyệt qua Canvas API: không server, không pre-render, không upload. Show HN ngày 14/01/2026, hiện ở v1.3.5 với 242 sao.

What's new

Tua video trên web vẫn là một dải mảnh, kéo qua lại đoán xem đoạn nào hay. YouTube và Vimeo có tooltip hover hiển thị 1 thumbnail tại 1 thời điểm. VAM Seek đẩy ý tưởng đó lên một bậc: render toàn bộ video dưới dạng contact sheet — ví dụ 5 cột × 15 giây/ô — rồi cho user click trực tiếp vào ô có cảnh muốn tới.

Cái khác biệt là tất cả xảy ra trên client. Không có pipeline FFmpeg phía server, không CDN sprite, không cron job pre-extract. Mở video local, lib vẽ canvas, đọc frame, hiển thị. Nghĩa là nó chạy được trên trang tĩnh, trên app Electron, trên một file HTML duy nhất bạn gửi qua AirDrop.

Why it matters

Pre-extract thumbnails trên server là chuẩn công nghiệp suốt 10 năm qua — nhưng nó kéo theo storage, CDN, jobs, và một bản copy của data người dùng nằm ngoài trình duyệt. Với footage nhạy cảm — body-cam, y tế, security, video nội bộ — đó là bài toán compliance khá đau. VAM Seek bỏ luôn lớp đó: frame chưa bao giờ rời thiết bị.

Mặt còn lại là chi phí. Một dự án indie có thể nhúng visual seek mà không cần thuê thêm 1GB R2/S3 hay setup ffmpeg worker. Bundle 15KB, zero dependency, license dual (free cho personal/educational, trả phí cho commercial) — hợp với indie hacker hoặc team sản phẩm SMB cần ship nhanh.

Technical facts

API gọn: VAMSeek.init({video, container, columns, secondsPerCell}), kèm seekTo(time), moveToCell(col, row), configure(options), destroy(). Có thể chạy nhiều instance trên cùng một trang. Còn có file deploy/demo/index.html độc lập — single-file drop-in, gửi qua mail cũng dùng được.

Comparison

Đánh đổi: lần extract đầu tốn CPU client (vài giây cho video dài hoặc 4K). Sau đó LRU cache giữ lại 5 video gần nhất nên lần thứ hai mở lại là instant.

Use cases

• Long-form content: bài giảng, podcast, talk hội nghị, replay thể thao — nhảy đúng cảnh không cần kéo timeline mò mẫm.
• Pre-review trước khi edit: dò cảnh nhanh trước khi mở Premiere/DaVinci.
• Tutorial / how-to: user skim bằng mắt, không cần nghe.
• Footage nhạy cảm: body-cam, hồ sơ y tế, camera an ninh — frame không lên server.
• AI vision pipeline: qua dự án anh em vam-seek-ai, lưới thumbnail trở thành input cho Claude/Gemini. Tác giả công bố con số 48 frames → 1 grid image → 1 API call, phân tích video 5 tiếng tốn ~$0.008 thay vì ~$50 nếu gửi từng frame.

VAM-RGB: bonus track cho AI

Đi kèm thư viện chính là một protocol nhỏ tên VAM-RGB: pack 3 thời điểm (past / present / future) vào 3 channel RGB của cùng một ảnh. Vision model nhìn 1 ảnh nhưng thấy được chuyển động và nhân quả. Ảnh hero của bài này chính là một sample VAM-RGB — bạn nhìn rõ 6 ô lưới, mỗi ô là 1 mốc thời gian, các channel R/G/B của ô lệch nhau tạo cảm giác motion.

Limitations & pricing

• Lần extract đầu tiên ăn CPU client — video 4K hoặc 1 tiếng+ sẽ thấy lag.
• Chỉ đọc được format mà <video> + Canvas API hỗ trợ — HLS/DASH cần decoder ngoài.
• Chưa publish lên npm — phải dùng CDN jsdelivr hoặc vendored copy dist/vam-seek.js.
• License dual: miễn phí cho personal/educational, commercial cần license trả phí (liên hệ haasiy@gmail.com).

What's next

Roadmap không chính thức nhưng dấu hiệu rõ: mở rộng codec (HLS/DASH), hoàn thiện công cụ VAM-RGB cho nhiều provider AI, và có thể publish npm package. Nếu bạn đang ship một sản phẩm có video — từ LMS, dashcam viewer, đến AI video assistant — thư viện này đáng cho vào shortlist evaluate cuối tuần này.

Nguồn: github.com/unhaya/vam-seek, Show HN discussion, vam-seek-ai.