Tóm tắt nhanh
- openvid là một video studio mã nguồn mở chạy hoàn toàn trong trình duyệt, được phát triển bởi Cristian Olivera – cho phép quay màn hình, thêm zoom mượt, mockup thiết bị, hiệu ứng 3D và background tuỳ biến để xuất ra demo video chất lượng điện ảnh.
- Toàn bộ xử lý video chạy client-side qua FFmpeg.wasm – không upload file lên server, nên dữ liệu nhạy cảm vẫn nằm trên máy bạn.
- Hỗ trợ xuất file lên đến 4K @ 30fps, các định dạng MP4 (H.264), WebM (VP9 với nền trong suốt), GIF, PNG, WebP, JPG, AVIF.
- 100+ background pre-designed, tích hợp Unsplash, gradient, blur 0-100%, cùng device frames Safari, Chrome, Arc, Samsung.
- Stack công nghệ hiện đại: Next.js, TypeScript, Three.js (3D), Supabase Auth, Tailwind CSS 4, MediaBunny.
- Có thể dùng ngay tại openvid.dev mà không cần cài, hoặc self-host bằng
pnpm install+pnpm devchỉ trong vài phút.- License mở, có cộng đồng Discord, đang chấp nhận contribution.
Mỗi developer và indie hacker đến một lúc nào đó đều cần làm demo video cho sản phẩm: bản preview tính năng cho landing page, GIF minh hoạ cho README, screen recording cho changelog, hay clip ngắn cho Twitter/X launch. Các công cụ thương mại như Screen Studio (macOS-only, $89-$229) hay CleanShot X giải quyết tốt vấn đề này nhưng đóng và đắt. Còn OBS thì mạnh nhưng lại quá chuyên dụng cho streaming, không tối ưu cho việc làm demo product.
openvid đứng giữa hai thái cực đó. Đây là một studio dựng demo video chạy 100% trong trình duyệt, không cài đặt, không upload, hoàn toàn mã nguồn mở. Bạn có thể vào openvid.dev và bắt đầu quay màn hình trong vòng 10 giây – hoặc clone repo về self-host nếu muốn kiểm soát tuyệt đối.
Các tính năng nổi bật của openvid
Đầu vào video linh hoạt
openvid hỗ trợ ba cách đưa video vào project:
- Screen recording – quay màn hình trực tiếp trong trình duyệt qua Web API, không cần extension hay app native.
- Upload file – nhận MP4, WebM, QuickTime (MOV), MKV.
- Drag & drop – kéo file vào canvas, upload diễn ra tức thời.
Vì toàn bộ pipeline chạy client-side, file lớn (vài GB) không bị nghẽn ở khâu upload server.
Zoom điện ảnh và chuyển động camera 3D
Đây là tính năng “ăn tiền” của openvid – thứ phân biệt nó với một video editor thông thường. Bạn có thể đặt điểm zoom in/out tại các mốc cụ thể trên timeline, kiểm soát tốc độ và easing curve. Nâng cao hơn nữa, openvid có 3D Camera Movement – tilt và rotation động dựa trên points of interest – cho phép mô phỏng perspective sâu trên trục X/Y. Đây là kiểu chuyển động khiến demo trông giống một clip marketing của Apple hơn là một screen recording phẳng.
Device mockups chuyên nghiệp
Thêm một frame thiết bị xung quanh demo của bạn để tạo ngữ cảnh. openvid hỗ trợ sẵn:
- Safari (macOS) – cho web app demo
- Chrome – chrome browser frame chuẩn
- Arc – cho audience hipster-developer
- Samsung – cho mobile demo
Mockup được render đè lên video gốc, không nén hay re-encode – giữ chất lượng tuyệt đối.
Background, hiệu ứng và canvas elements
Tham khảo từ thư viện hơn 100 background pre-designed, tích hợp tìm kiếm Unsplash, hoặc upload ảnh tuỳ biến. Hỗ trợ solid color, gradient và blur effect từ 0 đến 100%. Trên canvas, bạn có thể thêm shape (rectangle, circle, triangle), text với custom font, SVG vector, image overlay (PNG/JPG/WebP) và quản lý layer ở trên hoặc dưới video chính.
Các effect chuẩn cho demo modern đều có sẵn: dynamic padding, rounded corners, shadow, video rotation, positioning – chỉ cần kéo slider, không cần plugin.
Audio multi-track và export linh hoạt
openvid hỗ trợ multi-track audio với per-track và master volume, auto-trim theo độ dài video, và toggle bật/tắt audio gốc. Khi xuất, bạn có các tuỳ chọn chất lượng từ 4K (3840×2160) @ 30fps xuống tới 480p, các format MP4 (H.264), WebM (VP9 với nền trong suốt), GIF, và frame export PNG/WEBP/JPG/AVIF. Định dạng WebM với nền trong suốt cực kỳ hữu ích cho việc nhúng demo vào landing page mà không cần background cứng.
Kiến trúc công nghệ phía sau openvid
Đối với những ai tò mò bên trong, openvid xây trên:
- Video processing: FFmpeg.wasm cho render in-browser, Canvas API cho preview, MediaBunny cho pipeline tối ưu, Three.js cho hiệu ứng 3D, HTML to Image cho export mockup.
- Storage: IndexedDB lưu video quay local, LocalStorage cho user settings, Supabase Storage cho cloud backup (đang phát triển).
- UI/UX: Radix UI (accessible components), Framer Motion (animation), Tailwind CSS 4 (styling).
- Authentication: Supabase Auth với OAuth qua Google, GitHub, Twitch.
Việc dùng FFmpeg.wasm là quyết định kiến trúc đáng chú ý – nó cho phép xử lý video phức tạp ngay trong browser, không cần backend, đổi lại bạn cần một máy có đủ RAM và CPU khi xuất file 4K.
Hướng dẫn cài đặt openvid (self-host)
Nếu bạn chỉ muốn dùng nhanh, vào thẳng openvid.dev là xong – không cần cài gì. Tuy nhiên với những ai muốn tự host (cho team nội bộ, hoặc tuỳ biến source), dưới đây là các bước.
Yêu cầu
- Node.js (khuyến nghị LTS gần nhất)
- pnpm (package manager)
- Một tài khoản Supabase miễn phí (cho auth và storage)
Bước 1: Clone repository
git clone https://github.com/CristianOlivera1/openvid.git
cd openvidBước 2: Cài dependencies
pnpm installBước 3: Cấu hình environment
cp .env.example .envMở file .env và điền credentials Supabase của bạn:
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-keyBạn lấy hai giá trị trên ở Supabase Dashboard → Project Settings → API. Nếu muốn bật OAuth, đăng ký Google/GitHub/Twitch OAuth app rồi paste client ID/secret vào tab Authentication → Providers trên Supabase.
Bước 4: Khởi động dev server
pnpm devMở http://localhost:3000. Studio đã sẵn sàng.
Build production
Khi đã hài lòng, deploy lên Vercel hoặc bất kỳ Next.js host nào:
pnpm build
pnpm startVì openvid là Next.js app chuẩn, việc deploy lên Vercel chỉ tốn vài cú nhấp – chỉ cần đảm bảo các biến môi trường Supabase được set trong Vercel Dashboard.
Workflow điển hình: Tạo một demo trong 5 phút
Bước 1: Quay hoặc upload video
Bấm Record Screen, chọn cửa sổ hoặc tab muốn quay. Sau khi dừng, video tự động đổ vào timeline. Nếu đã có file, kéo thả vào canvas.
Bước 2: Thêm zoom points
Click vào điểm trên timeline nơi bạn muốn camera zoom vào (ví dụ: khi user click một nút quan trọng). Chỉnh easing curve cho mượt, set scale level. Lặp lại cho 2-3 điểm zoom.
Bước 3: Áp device mockup và background
Chọn mockup Safari hoặc Chrome cho web demo. Pick một background gradient hoặc Unsplash image phù hợp với brand color của sản phẩm. Bật rounded corners và shadow cho demo trông “lift” lên khỏi nền.
Bước 4: Thêm text overlay
Thêm text title cho từng segment (“Step 1: Create account”, “Step 2: Configure…”) để viewer dễ theo dõi. Custom font, color, size đều có sẵn.
Bước 5: Export
Chọn 1080p MP4 cho social media, hoặc 4K MP4 cho landing page hero video. WebM với nền trong suốt cho overlay use case. Process render chạy ngay trong trình duyệt – tuỳ độ dài và chất lượng có thể mất từ vài giây đến vài phút.
Một số lưu ý quan trọng
Vì FFmpeg.wasm chạy CPU-bound trong trình duyệt, export 4K cho video dài có thể nặng trên máy yếu. Cân nhắc dùng Chrome/Edge (V8 engine tối ưu WASM tốt nhất), đóng các tab nặng khác trước khi render.
Privacy: Toàn bộ xử lý là client-side, file không upload lên server openvid.dev. Tuy nhiên auth qua Supabase vẫn lưu account metadata – nếu cực kỳ paranoid, hãy self-host và disable Supabase Auth (anonymous mode).
Cloud backup qua Supabase Storage hiện đang được phát triển – nên đừng phụ thuộc vào việc lưu project online, hãy export file thường xuyên.
Trong một thị trường mà các công cụ làm demo video chất lượng cao đa phần đóng và không rẻ, openvid là một dự án mã nguồn mở đáng được chú ý. Việc chạy hoàn toàn trong trình duyệt, không cần cài đặt, không upload file lên server, lại có đầy đủ tính năng từ zoom điện ảnh, 3D camera, đến mockup thiết bị và export 4K – khiến nó trở thành lựa chọn lý tưởng cho indie hackers, technical founders, và developer advocate cần làm content chất lượng nhanh chóng.
