Skip to content

README.md

Latest commit

 

History

History
207 lines (156 loc) · 5.62 KB

README.md

File metadata and controls

207 lines (156 loc) · 5.62 KB
Raw

Web Camera Kit 📸

A lightweight, mobile-optimized camera boilerplate designed for AI vision and computer vision projects. Built with React, TypeScript, and modern web APIs.

🚀 Live Demo

Learn More On Product Site

Live Demo

Example

✨ Key Features

📱 Mobile-First Design

  • Responsive interface optimized for mobile and desktop
  • PWA capabilities with offline support
  • Dynamic viewport handling for seamless mobile experience

📷 Advanced Camera Functionality

  • Photo and video capture with high-quality output
  • Real-time camera switching (front/back on mobile, device selection on desktop)
  • Live video processing with canvas-based frame manipulation
  • Robust error handling and retry mechanisms

💾 Smart Storage System

  • IndexedDB integration for persistent media storage
  • Automatic data recovery when app reopens
  • Gallery with thumbnail generation for videos

🎨 Modern UI/UX

  • Beautiful animations powered by GSAP
  • Glassmorphism design with backdrop blur effects
  • Adaptive layouts across all screen sizes
  • Accessibility-first approach

⚡ Performance Optimized

  • Lazy loading and efficient resource management
  • Service worker for offline functionality
  • Memory leak prevention with proper cleanup

🎯 Perfect For

  • AI Vision Projects - Ready-to-use camera input for ML models
  • Computer Vision Applications - Real-time video processing
  • Educational Tools - Clean codebase for learning
  • Prototyping - Quick setup for camera-based proof of concepts

🛠️ Tech Stack

  • Frontend: React 18 + TypeScript
  • Styling: Tailwind CSS with custom animations
  • Icons: Lucide React
  • Animations: GSAP
  • Storage: IndexedDB for media persistence
  • PWA: Service Worker + Web App Manifest
  • Build Tool: Vite with PWA plugin

📦 Installation

# Clone the repository
git clone https://github.com/yourusername/web-camera-kit.git
cd web-camera-kit

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

🚀 Deployment

Netlify (Recommended)

npm run build
# Deploy the 'dist' folder to Netlify

Works with any static hosting: Vercel, GitHub Pages, AWS S3, Firebase Hosting.

🔧 Configuration

Environment Variables

# Disable loading screen (optional)
VITE_APP_DISABLE_LOADING_SCREEN=false

# Disable PWA features (optional)
VITE_APP_DISABLE_PWA=false

Camera Settings

// Modify in src/components/CameraPreview.tsx
const videoConstraints = {
  width: { ideal: 1920, max: 2560 },
  height: { ideal: 1080, max: 1440 },
  frameRate: { ideal: 30, max: 60 }
};

📱 Browser Compatibility

Feature Chrome Firefox Safari Edge
Photo Capture ✅ ✅ ✅ ✅
Video Recording ✅ ✅ ✅ ✅
Camera Switching ✅ ✅ ✅ ✅
PWA Install ✅ ✅ ✅ ✅

Minimum Versions: Chrome 63+, Firefox 65+, Safari 12+, Edge 79+

🏗️ Architecture

Project Structure

src/
├── components/          # React components
│   ├── CameraPreview.tsx    # Main camera interface
│   ├── MediaGallery.tsx     # Gallery with thumbnails
│   └── MediaPreviewModal.tsx # Full-screen viewer
├── hooks/               # Custom React hooks
│   ├── useMediaCapture.ts   # Media capture logic
│   └── useMobileDetection.ts # Device detection
├── utils/               # Utility functions
│   ├── indexedDb.ts         # Database operations
│   └── pwa.ts              # PWA management
└── types/               # TypeScript definitions

Key Components

  • CameraPreview: Camera initialization, switching, and capture
  • MediaGallery: Media display with thumbnails and batch operations
  • MediaPreviewModal: Full-screen viewing and sharing
  • useMediaCapture: Media state management and IndexedDB persistence
  • useMobileDetection: Device type detection and responsive behavior

🔐 Security & Privacy

  • No external data transmission - All media stays on device
  • Local storage only - IndexedDB for client-side persistence
  • HTTPS required - Enforced for camera API access

🔧 Development

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production  
npm run preview      # Preview production build
npm run lint         # Run ESLint

Integration Examples

AI Model Integration

const processWithAI = async (imageBlob: Blob) => {
  const formData = new FormData();
  formData.append('image', imageBlob);
  
  const response = await fetch('/api/ai-process', {
    method: 'POST',
    body: formData
  });
  
  return response.json();
};

Computer Vision

const processWithOpenCV = (canvas: HTMLCanvasElement) => {
  const src = cv.imread(canvas);
  // Your CV processing here
  cv.imshow('output', src);
  src.delete();
};

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

Ready to build camera-powered applications? Star ⭐ this repo and start creating!