CristianOlivera1/openvid

Public

Create professional demos and 3D mockups in seconds, directly in your browser

  • Stars2.7k+32 tuần này
  • Forks390
  • Watchers12
  • Issues0
  • Ngày tạo10/02/2026
  • Cập nhật gần nhất11/10/2026
  • Ngôn ngữTypeScript
  • Giấy phép—
README.md18.7 KBRaw

openvid

Create professional demos and mockups in seconds, directly in your browser

Record your screen or upload a video, add smooth zooms, device mockups, 3D effects, and custom backgrounds - export a cinematic demo.

Next.js FFmpeg.wasm Three.js Discord Community

poindeo-video-speed_1 5x_1787010609273 (1) (1)

Features

Video Input

  • Screen recording - Capture your screen directly in the browser with no installation required
  • Upload your video - MP4, WebM, QuickTime, and MKV

Mockup Creation

  • Mockups applied to images
  • 3D transformations

Visual Customization

Backgrounds

  • 100+ pre-designed backgrounds
  • Custom images or Unsplash
  • Solid colors and gradients

Canvas & Elements

  • Shapes - Rectangles, circles, triangles
  • Text - Custom fonts, colors, and sizes
  • SVG - Import vector graphics
  • Images - PNG, JPG, WebP overlays

Zoom

  • Zoom in/out at specific timeline moments
  • Speed and easing control
  • 3D Camera Movement - Tilt and dynamic rotation based on points of interest

Audio

  • Multi-track support
  • Auto-trim based on video duration

Export

Quality

  • 4K (3840×2160) @ 30fps
  • 2K (2560×1440) @ 30fps
  • 1080p (1920×1080) @ 30fps
  • 720p (1280×720) @ 30fps
  • 480p (720×480) @ 24fps

Format

  • MP4 (H.264)
  • WebM (VP9 with transparent background support)
  • GIF
  • PNG, WEBP, JPG, AVIF

Screenshots

zoom
FreeCut multi-track timeline Frame 1116606751
Frame 1116606753 Frame 1116606752

Technology

Video Processing

  • FFmpeg.wasm - fully in-browser rendering
  • Canvas API - preview
  • MediaBunny - optimized video pipeline
  • Three.js - 3D effects
  • HTML to Image - mockup export

Storage

  • IndexedDB - locally recorded videos
  • LocalStorage - user settings
  • Supabase Storage - cloud backups (coming soon)

Quick Start

# Install dependencies
pnpm install

# Setup environment
cp .env.example .env
# Add your Supabase credentials

# Start development server
pnpm dev

Open http://localhost:3000


💬 Community

¡Contributions are welcome! Join our Discord to collaborate: Discord

Contributors

Nội dung README thuộc về CristianOlivera1 và cộng đồng đóng góp, giấy phép Không có giấy phép. Nguồn: github.com/CristianOlivera1/openvid