# Camera Implementation Documentation

## Overview

This document describes how camera functionality is implemented across the
TimeSafari application. The application uses cameras for two main purposes:

1. QR Code scanning

2. Photo capture

## Components

### QRScannerDialog.vue

Primary component for QR code scanning in web browsers.

**Key Features:**

- Uses `qrcode-stream` for web-based QR scanning

- Supports both front and back cameras

- Provides real-time camera status feedback

- Implements error handling with user-friendly messages

- Includes camera switching functionality

**Camera Access Flow:**

1. Checks for camera API availability

2. Enumerates available video devices

3. Requests camera permissions

4. Initializes camera stream with preferred settings

5. Handles various error conditions with specific messages

### PhotoDialog.vue

Component for photo capture and selection.

**Key Features:**

- Cross-platform photo capture interface

- Image cropping capabilities

- File selection fallback

- Unified interface for different platforms

## Services

### QRScanner Services

#### WebDialogQRScanner

Web-based implementation of QR scanning.

**Key Methods:**

- `checkPermissions()`: Verifies camera permission status

- `requestPermissions()`: Requests camera access

- `isSupported()`: Checks for camera API support

- Handles various error conditions with specific messages

#### CapacitorQRScanner

Native implementation using Capacitor's MLKit.

**Key Features:**

- Uses `@capacitor-mlkit/barcode-scanning`

- Supports both front and back cameras

- Implements permission management

- Provides continuous scanning capability

### Platform Services

#### WebPlatformService

Web-specific implementation of platform features.

**Camera Capabilities:**

- Uses HTML5 file input with capture attribute

- Falls back to file selection if camera unavailable

- Processes captured images for consistent format

#### CapacitorPlatformService

Native implementation using Capacitor.

**Camera Features:**

- Uses `Camera.getPhoto()` for native camera access

- Supports image editing

- Configures high-quality image capture

- Handles base64 image processing

#### ElectronPlatformService

Desktop implementation (currently unimplemented).

---

**See also**:

- `.cursor/rules/features/camera_technical.mdc` for

  detailed technical implementation

- `.cursor/rules/features/camera_platforms.mdc` for platform-specific details

**Status**: Active camera implementation overview
**Priority**: Medium
**Estimated Effort**: Ongoing reference
**Dependencies**: None
**Stakeholders**: Development team, Camera feature team

- iOS and Android devices

- Desktop platforms

- Various network conditions

## Model Implementation Checklist

### Before Camera Implementation

- [ ] **Platform Analysis**: Understand camera requirements across all platforms
- [ ] **Feature Planning**: Plan QR scanning and photo capture features
- [ ] **Service Planning**: Plan camera service architecture
- [ ] **Testing Strategy**: Plan testing across web, mobile, and desktop

### During Camera Implementation

- [ ] **Component Development**: Implement QRScannerDialog and PhotoDialog
- [ ] **Service Implementation**: Implement platform-specific camera services
- [ ] **Permission Handling**: Implement proper camera permission management
- [ ] **Error Handling**: Implement graceful error handling for camera failures

### After Camera Implementation

- [ ] **Cross-Platform Testing**: Test camera functionality across all platforms
- [ ] **Feature Validation**: Verify QR scanning and photo capture work correctly
- [ ] **Performance Testing**: Ensure camera performance meets requirements
- [ ] **Documentation Update**: Update camera implementation documentation