Video Annotation Editor

A VS Code extension for viewing and editing Pascal VOC format annotations for video frames with bounding boxes. Perfect for computer vision researchers and developers working on object detection tasks.

Features

• 📹 Video Frame Annotation: View and edit Pascal VOC XML annotations with visual bounding box overlay
• 🎯 Bounding Box Editor: Interactive editing of object detection annotations
• 📁 File Integration: Seamless integration with VS Code's file explorer
• 🔧 XML Support: Full Pascal VOC XML format support with syntax highlighting
• 🖼️ Visual Interface: Clean, intuitive annotation viewer with CSS styling

Installation

1. Open VS Code
2. Go to Extensions view (Ctrl+Shift+X)
3. Search for "Video Annotation Editor" or "annotation-editor"
4. Click "Install" on the extension

Alternatively, you can install it from the command palette:

1. Open Command Palette (Ctrl+Shift+P)
2. Type "Extensions: Install Extensions"
3. Search for "Video Annotation Editor"
4. Click "Install"

Usage

Opening Annotations

There are several ways to open an annotation file:

1. Right-click on XML file in the Explorer and select "Open Annotation Editor"
2. Click the annotation icon in the editor title bar when viewing an XML file
3. Use Command Palette (Ctrl+Shift+P) and run "Open Annotation Editor"

Supported File Format

The extension works with Pascal VOC XML annotation files. A typical annotation file structure:

<annotation>
    <filename>image.jpg</filename>
    <size>
        <width>640</width>
        <height>480</height>
        <depth>3</depth>
    </size>
    <object>
        <name>bird</name>
        <bndbox>
            <xmin>100</xmin>
            <ymin>100</ymin>
            <xmax>200</xmax>
            <ymax>200</ymax>
        </bndbox>
    </object>
</annotation>

Recommended Folder Structure

Based on the extension's architecture, organize your video annotation project with the following folder structure:

project-root/
├── video1.mp4                          # Source video file
├── video1_pascal_voc_1.1/              # Project directory (named after video)
│   ├── annotations/                    # Pascal VOC XML annotation files
│   │   ├── frame_000001.xml
│   │   ├── frame_000002.xml
│   │   └── ...
│   └── frame_images/                   # Auto-generated frame images (if needed)
│       ├── frame_000001.jpg
│       ├── frame_000002.jpg
│       └── ...
├── video2.avi                          # Another source video file
├── video2_pascal_voc_1.1/              # Another project directory
│   ├── annotations/
│   │   ├── frame_000001.xml
│   │   └── ...
│   └── frame_images/
│       ├── frame_000001.jpg
│       └── ...
└── ...

Automatic Frame Generation

The extension intelligently handles frame extraction from videos:

🎯 Smart Frame Detection:

• The extension looks for a frame_images/ directory in your annotation project folder
• It checks if frame images already exist that correspond to your XML annotation files
• If frames exist: The extension uses the existing images (no regeneration)
• If frames don't exist: The extension automatically extracts them from the video

🔧 Frame Extraction Process:

1. Automatic Video Discovery: The extension finds your video file by:

   • Looking for video files in the parent directory
   • Matching video names with project folder names (e.g., video1.mp4 ↔ video1_pascal_voc_1.1/)
   • Supporting formats: .mp4, .avi, .mov, .mkv, .webm

2. Frame Extraction: Uses FFmpeg to extract frames:

   • Extracts frames with 6-digit padding (e.g., frame_000001.jpg)
   • Maintains high quality (quality level 2)
   • Matches frame count to your annotation files

3. Fallback Handling: If FFmpeg is unavailable:

   • Creates placeholder SVG frames for visualization
   • Shows helpful message to install FFmpeg for actual frame extraction

📋 Requirements:

• FFmpeg: Install FFmpeg for automatic frame extraction from videos
• File Naming: Annotation XML files should use 6-digit frame numbering (e.g., frame_000001.xml)
• Matching Names: Frame images and annotation files should have corresponding names

FFmpeg Installation

FFmpeg is required for automatic video frame extraction. You only need to install FFmpeg if you have video files but don't have a frame_images/ folder in the same directory as your XML annotation files. If frame images already exist, the extension will use them directly without needing FFmpeg.

Install FFmpeg using one of the methods below:

Windows (using Chocolatey)

choco install ffmpeg -y

Location: C:\ProgramData\chocolatey\lib\ffmpeg\tools\ffmpeg\bin

Mac OSX

brew install ffmpeg mono-libgdiplus

Location: /usr/local/bin

Ubuntu

sudo apt-get install -y ffmpeg libgdiplus

Location: /usr/bin

Manual Download

If you prefer to manually download them, visit ffbinaries or zeranoe Windows builds.

Development

Prerequisites

• Node.js (22.x or later)
• TypeScript
• VS Code

Building

# Install dependencies
npm install

# Compile the extension
npm run compile

# Watch for changes during development
npm run watch

# Run tests
npm test

# Package for distribution
npm run package

Project Structure

src/
├── extension.ts              # Main extension entry point
├── annotationViewerPanel.ts  # WebView panel for annotation viewer
├── annotationParser.ts       # Pascal VOC XML parsing logic
├── templateLoader.ts         # HTML template loading utilities
└── test/
    └── extension.test.ts     # Extension tests

templates/
├── annotation-viewer.html    # Main viewer HTML template
├── annotation-viewer.css     # Viewer styling
├── annotation-script.js      # Client-side annotation logic
├── loading.html             # Loading screen template
└── loading.css              # Loading screen styles

Keywords

• annotation
• bounding box
• pascal voc
• video
• xml
• object detection
• editor

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the terms specified in the LICENSE file.

Issues and Support

If you encounter any issues or have feature requests, please visit the GitHub Issues page.

Repository

https://github.com/EbramTawfik/annotation-editor