🎨 Plakat-Designer Web-App — GPS-gestützter Plakat-Tracker mit Echtzeit-Kamera

📊 Business Value

Mobile Datenerfassung ohne App-Store-Hürden. Teams fotografieren Plakatstandorte, GPS-Daten werden automatisch erfasst. Alle Daten zentral in MySQL — auswertbar, durchsuchbar, exportierbar.

⚙️ Technischer Ablauf

💻 Code — serverseitig (PHP + MySQL)

Der PHP-Backend-Code validiert GPS-Koordinaten, dekodiert Base64-Bilder, extrahiert EXIF-Daten und speichert in MySQL:

// Base64 Bild dekodieren
$imageData = $_POST['imageData'];
if (strpos($imageData, 'data:image/jpeg;base64,') === 0) {
    $imageData = substr($imageData, strlen('data:image/jpeg;base64,'));
}
$imageBlob = base64_decode($imageData);
if ($imageBlob === false) {
    throw new Exception('Ungültiges Bildformat');
}

// GPS Koordinaten validieren
$latitude = floatval($_POST['latitude']);
$longitude = floatval($_POST['longitude']);
if ($latitude < -90 || $latitude > 90 || $longitude < -180 || $longitude > 180) {
    throw new Exception('Ungültige GPS-Koordinaten');
}

// Dateiname mit Timestamp + Unique ID
$filename = 'plakat_' . date('Y-m-d_H-i-s') . '_' . uniqid() . '.jpg';
$filepath = UPLOAD_PATH . $filename;
file_put_contents($filepath, $imageBlob);

// Bildmetadaten via getimagesize
$imageInfo = getimagesize($filepath);
$imageWidth = $imageInfo[0] ?? null;
$imageHeight = $imageInfo[1] ?? null;

// MySQL INSERT mit Prepared Statement
$sql = "INSERT INTO plakate (filename, filepath, latitude, longitude, 
    accuracy, description, plakat_typ, image_width, image_height, 
    file_size, upload_date, ip_address) 
    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, NOW(), ?)";
$stmt = $pdo->prepare($sql);
$stmt->execute([$filename, $filepath, $latitude, $longitude, 
    $accuracy, $description, $plakatTyp, $imageWidth, 
    $imageHeight, $fileSize, $_SERVER['REMOTE_ADDR']]);

💻 Code — clientseitig (JavaScript Camera + GPS)

async startCamera() {
    this.stream = await navigator.mediaDevices.getUserMedia({
        video: {
            facingMode: this.currentFacingMode, // 'environment' = Rückkamera
            width: { ideal: 1920 },
            height: { ideal: 1080 }
        }
    });
    this.video.srcObject = this.stream;
}

// Zwischen Front- und Rückkamera wechseln
async switchCamera() {
    this.currentFacingMode = this.currentFacingMode === 'environment' 
        ? 'user' : 'environment';
    if (this.stream) {
        this.stream.getTracks().forEach(track => track.stop());
    }
    await this.startCamera();
}

navigator.geolocation.getCurrentPosition(
    (position) => {
        this.location = {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            accuracy: position.coords.accuracy
        };
    },
    (error) => {
        switch(error.code) {
            case error.PERMISSION_DENIED: /* ... */ break;
            case error.POSITION_UNAVAILABLE: /* ... */ break;
            case error.TIMEOUT: /* ... */ break;
        }
    },
    { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
);

capturePhoto() {
    const context = this.canvas.getContext('2d');
    this.canvas.width = this.video.videoWidth;
    this.canvas.height = this.video.videoHeight;
    context.drawImage(this.video, 0, 0);
    
    // JPEG mit 80% Qualität — gutes Verhältnis Größe/Qualität
    const imageDataUrl = this.canvas.toDataURL('image/jpeg', 0.8);
    document.getElementById('imageData').value = imageDataUrl;
    
    // Kamera-Stream stoppen (spart Akku)
    if (this.stream) {
        this.stream.getTracks().forEach(track => track.stop());
    }
}

🎯 Strategische Erkenntnisse