A powerful web-based tool for extracting individual frames from video files. Built with vanilla JavaScript and modern web APIs, Frame Extractor provides an intuitive interface for precise frame capture and batch export.
- 🎬 Multi-format Support: Works with MP4, WebM, MOV, and AVI video files
- 🖱️ Drag & Drop Upload: Simple drag-and-drop interface for video files (up to 100MB)
- 🎯 Precise Frame Navigation: Frame-by-frame stepping with keyboard shortcuts
- 🖼️ High-Quality Extraction: Captures frames at original video resolution
- 📦 Batch Export: Collect multiple frames and download as ZIP
- 🌓 Dark/Light Theme: Toggle between themes with persistent preference
- 📱 Responsive Design: Works seamlessly on desktop and mobile devices
- ⚡ Client-Side Processing: All processing happens in your browser - no uploads required
Try it live: Frame Extractor Demo
Frame Extractor is a client-side web application that runs entirely in your browser. No installation or server setup required!
Simply visit the live demo to start using the application.
-
Clone the repository:
git clone https://github.com/vredrick/frame-extractor.git cd frame-extractor -
Open
index.htmlin a modern web browser:- Double-click the file, or
- Use a local web server (e.g.,
python -m http.serveror Live Server in VS Code)
- Upload a Video: Drag and drop a video file onto the upload area or click to browse
- Navigate Frames: Use the video controls or keyboard shortcuts to find desired frames
- Extract Frames: Click "Extract Frame" to capture the current frame
- Build Collection: Add frames to your collection for batch download
- Download: Save individual frames or download your entire collection as a ZIP file
| Key | Action |
|---|---|
Space |
Play/Pause video |
← / → |
Previous/Next frame |
Shift + ← / Shift + → |
Skip 5 seconds backward/forward |
E |
Extract current frame |
A |
Add frame to collection |
Ctrl/Cmd + D |
Download collection as ZIP |
- Play/Pause: Toggle video playback
- Frame Navigation: Step through frames one at a time
- Timeline Scrubber: Click or drag to seek to any position
- Time Display: Shows current time and total duration
Frame Extractor uses a modular, class-based architecture:
FrameExtractorApp: Main application controllerVideoHandler: Manages video playback and navigationFrameExtractor: Handles frame capture using Canvas APIDownloadManager: Manages collections and ZIP generation
- Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3
- Video Processing: HTML5 Video API, Canvas 2D Context
- File Handling: File API, Blob API
- ZIP Creation: JSZip library
- UI Design: CSS Grid, Flexbox, Custom Properties
Frame Extractor requires a modern browser with support for:
- HTML5 Video element
- Canvas 2D Context
- File API
- ES6+ JavaScript features
Tested and working in:
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Maximum video file size: 100MB (for performance)
- Maximum frames in collection: 100 (to prevent memory issues)
- Frame rate detection is approximate (defaults to 30fps)
- Some video codecs may not be supported depending on browser
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- JSZip for ZIP file generation
- Icons from Feather Icons
- Glass morphism design inspiration from modern UI trends
If you encounter any issues or have questions:
- Open an issue
- Check existing issues for solutions
- Ensure your browser meets the compatibility requirements
Made with ❤️ by vredrick