VideoFrames: Tag & Extract

VideoFrames: Tag & Extract is a powerful web-based tool designed for efficient video frame extraction and tagging. It allows users to easily navigate through videos, mark specific frames, assign custom tags, and extract selected frames as images.

Features

• Video Navigation: Intuitive timeline scrubbing and frame-by-frame navigation.
• Frame Selection: Easily mark and unmark frames for extraction.
• Custom Tagging: Create, assign, and manage tags for selected frames.
• Keyboard Shortcuts: Streamline your workflow with customizable keyboard shortcuts.
• Flexible Export Options: Choose between PNG, JPEG, or WebP formats with adjustable quality settings.
• Session Management: Save and load your work progress, including video, frames, and tags.
• User-Friendly Interface: Drag-and-drop video upload, collapsible sidebar, and helpful overlays.

How to Use

1. Upload a Video:

   • Drag and drop a video file onto the upload area, or click the "Upload Video" button.

2. Navigate the Video:

   • Use the timeline below the video player to scrub through the video.
   • Utilize keyboard shortcuts or on-screen controls for frame-by-frame navigation.

3. Mark Frames:

   • Press the designated shortcut key (default: 'F') or click the "Add/Remove Frame" button to mark frames for extraction.

4. Manage Tags:

   • Open the Tag Manager to create, edit, or delete tags.
   • Assign tags to frames using the tag overlay or number keys 1-9.

5. Extract Frames:

   • Click the "Export Frames" button in the sidebar.
   • Choose between exporting frames only or including session data.
   • Confirm the extraction when prompted.
   • Wait for the process to complete, and download the ZIP file containing extracted frames.

Keyboard Shortcuts

• Add/Remove Frame: F (customizable)
• Previous Frame: A (customizable)
• Next Frame: D (customizable)
• Open Tag Manager: T (customizable)
• Assign/Remove Tags: 1-9 (for the first 9 tags)

Settings

Access the settings menu by clicking the gear icon in the bottom right corner:

• Customize Shortcuts: Change default keyboard shortcuts.
• Export Settings: Choose image format, quality, and file naming options.
• Display Settings: Toggle the shortcut overlay visibility.

Session Management

• Save Session: When exporting frames, choose the option to include session data.
• Load Session: Use the "Load Session" button to restore a previous work session.

Tips

• Hover over timeline indicators to preview frames without adding them.
• Reorder tags in the Tag Manager by dragging and dropping.
• Use the "Load Session" feature to continue work from a previous session.
• The shortcut overlay can be toggled on/off in the settings menu.

Technical Details

This application is built using HTML, CSS, and JavaScript. It utilizes the following libraries:

• JSZip: For creating ZIP archives of extracted frames.
• FileSaver.js: For handling file downloads.

Browser Compatibility

VideoFrames: Tag & Extract is designed to work with modern web browsers. For the best experience, use the latest versions of Chrome, Firefox, Safari, or Edge.

Feedback and Support

If you encounter any issues or have suggestions for improvements, please open an issue on the project's GitHub repository.

---

Enjoy using VideoFrames: Tag & Extract for all your video frame extraction needs!