Drone Footage Manager

A web application for browsing and viewing drone footage organized by location and date.

Features

• 📁 Hierarchical Navigation: Browse footage by location → date → files
• 🎥 Video Streaming: Built-in HTML5 video player with seeking support
• 🖼️ Image Viewer: View drone photos directly in the browser
• 🐳 Dockerized: Fully containerized application with docker-compose
• 🔒 Read-only Access: Footage directory mounted as read-only for safety

Architecture

• Backend: Python FastAPI server for file browsing and media streaming
• Frontend: React application with Tailwind CSS
• Deployment: Docker containers with nginx for frontend static files

Quick Start

Prerequisites

• Docker
• Docker Compose

Running the Application

1. Start the containers:

   docker-compose up -d
   

2. Access the application:

   • From the host machine: http://localhost or http://127.0.0.1
   • From local network: http://<SERVER_IP> (e.g., http://192.168.1.100)
   • The backend API is available at port 8000

   To find your server's IP address:

   # Linux/Mac
   hostname -I | awk '{print $1}'
   # or
   ip addr show | grep "inet " | grep -v 127.0.0.1
   

3. Stop the containers:

   docker-compose down
   

Rebuilding After Changes

If you make changes to the code, rebuild the containers:

docker-compose up -d --build

Project Structure

drone-footage-manager/
├── backend/
│   ├── main.py              # FastAPI application
│   ├── requirements.txt     # Python dependencies
│   ├── Dockerfile           # Backend container definition
│   └── .dockerignore
├── frontend/
│   ├── src/
│   │   ├── App.jsx          # Main React component
│   │   ├── main.jsx         # React entry point
│   │   └── index.css        # Tailwind styles
│   ├── index.html
│   ├── package.json         # Node dependencies
│   ├── vite.config.js       # Vite configuration
│   ├── tailwind.config.js   # Tailwind configuration
│   ├── nginx.conf           # Nginx configuration
│   ├── Dockerfile           # Frontend container definition
│   └── .dockerignore
├── docker-compose.yml       # Docker Compose configuration
└── README.md

Configuration

Volume Mount

The footage directory is mounted in docker-compose.yml:

volumes:
  - /home/uad/nextcloud/footages:/footages:ro

To use a different directory, edit the docker-compose.yml file and update the path before the colon.

Ports

• Frontend: Port 80 (accessible from local network)
• Backend: Port 8000 (accessible from local network)

The application binds to 0.0.0.0, making it accessible from:

• The host machine (localhost)
• Other devices on the local network (using server's IP)

To change ports, edit the ports section in docker-compose.yml.

Network Access

By default, the application is accessible from any device on your local network. If you cannot access it from other devices, check your firewall:

# Allow ports 80 and 8000 through firewall (Ubuntu/Debian)
sudo ufw allow 80/tcp
sudo ufw allow 8000/tcp

API Endpoints

• GET /api/locations - List all location folders
• GET /api/locations/{location}/dates - List dates for a location
• GET /api/files/{location}/{date} - List files with metadata
• GET /api/stream/{location}/{date}/{filename} - Stream video files
• GET /api/image/{location}/{date}/{filename} - Serve image files

Development

Backend Development

cd backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt
uvicorn main:app --reload

Frontend Development

cd frontend
npm install
npm run dev

Supported File Types

Videos: .mp4, .MP4, .mov, .MOV, .avi, .AVI

Images: .jpg, .JPG, .jpeg, .JPEG, .png, .PNG

Logs

View container logs:

# All services
docker-compose logs -f

# Backend only
docker-compose logs -f backend

# Frontend only
docker-compose logs -f frontend

Troubleshooting

Videos not playing

• Ensure the video codec is supported by your browser (H.264 recommended)
• Check browser console for errors
• Verify file permissions on the footage directory

Cannot access the application

• Verify containers are running: docker-compose ps
• Check logs: docker-compose logs
• Ensure ports 80 and 8000 are not in use by other applications
• Check firewall settings: sudo ufw status
• Verify you're using the correct IP address: hostname -I

Changes not reflected

• Rebuild containers: docker-compose up -d --build
• Clear browser cache

License

MIT