pro_camera.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Pro Web Camera</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; user-select: none; -webkit-tap-highlight-color: transparent; }
        body { background: #000; color: #fff; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

        /* === TOP BAR === */
        .top-bar {
            display: flex; justify-content: space-between; align-items: center;
            padding: 20px; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
            position: absolute; top: 0; width: 100%; z-index: 10;
        }
        .app-title { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 1px; }

        .btn-icon {
            background: rgba(255,255,255,0.1); border: none; border-radius: 50%; width: 45px; height: 45px;
            display: flex; justify-content: center; align-items: center; color: #fff; cursor: pointer; backdrop-filter: blur(5px);
        }
        .btn-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
        .btn-icon:active { transform: scale(0.9); background: rgba(255,255,255,0.3); }

        /* === CAMERA VIEWFINDER === */
        .viewfinder { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; }
        #videoElement { width: 100%; height: 100%; object-fit: cover; }
        
        /* Shutter Flash Animation */
        .flash-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.1s ease-out;
        }
        .flash-overlay.active { opacity: 1; transition: none; }

        /* === BOTTOM CONTROLS === */
        .bottom-bar {
            padding: 30px 20px 40px; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.5), transparent);
            display: flex; justify-content: space-around; align-items: center;
            position: absolute; bottom: 0; width: 100%; z-index: 10;
        }

        /* Gallery / Preview Box */
        .preview-box {
            width: 50px; height: 50px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.5);
            background: rgba(255,255,255,0.1); overflow: hidden; display: flex; justify-content: center; align-items: center;
            cursor: pointer; position: relative;
        }
        .preview-box img { width: 100%; height: 100%; object-fit: cover; display: none; }
        .preview-box svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; position: absolute; display: none; }
        .preview-box.has-image svg { display: block; background: rgba(0,0,0,0.5); padding: 2px; border-radius: 50%; }

        /* Shutter Button */
        .btn-shutter {
            width: 75px; height: 75px; border-radius: 50%; background: #fff; border: 4px solid #000;
            outline: 4px solid #fff; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center;
        }
        .btn-shutter:active { transform: scale(0.85); background: #e0e0e0; }

        /* Hidden Canvas for saving image */
        #canvasElement { display: none; }
    </style>
</head>
<body>

    <div class="top-bar">
        <div class="app-title">ProCam</div>
        <!-- Flip Camera Button -->
        <button class="btn-icon" onclick="switchCamera()">
            <svg viewBox="0 0 24 24"><path d="M21 2v6h-6"></path><path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path><path d="M3 22v-6h6"></path><path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>
        </button>
    </div>

    <div class="viewfinder">
        <video id="videoElement" autoplay playsinline></video>
        <div class="flash-overlay" id="flash"></div>
    </div>

    <div class="bottom-bar">
        <!-- Preview / Download Button -->
        <div class="preview-box" id="previewBox" onclick="downloadPhoto()">
            <img id="previewImage" src="">
            <!-- Download Icon Overlay -->
            <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
        </div>

        <!-- Shutter Button -->
        <button class="btn-shutter" onclick="takePhoto()"></button>

        <!-- Dummy box to balance flex layout -->
        <div style="width: 50px;"></div> 
    </div>

    <canvas id="canvasElement"></canvas>

    <script>
        const video = document.getElementById('videoElement');
        const canvas = document.getElementById('canvasElement');
        const previewImage = document.getElementById('previewImage');
        const previewBox = document.getElementById('previewBox');
        const flash = document.getElementById('flash');

        let currentStream = null;
        let facingMode = "environment"; // "environment" (Back) or "user" (Front)
        let lastPhotoData = null;

        // Initialize Camera
        async function startCamera() {
            if (currentStream) {
                currentStream.getTracks().forEach(track => track.stop()); // Stop old stream
            }
            
            const constraints = {
                video: {
                    facingMode: facingMode,
                    width: { ideal: 1920 },
                    height: { ideal: 1080 }
                }
            };

            try {
                currentStream = await navigator.mediaDevices.getUserMedia(constraints);
                video.srcObject = currentStream;
            } catch (err) {
                alert("Camera Access Denied or Not Supported.");
                console.error(err);
            }
        }

        // Switch Camera (Front / Back)
        function switchCamera() {
            facingMode = facingMode === "environment" ? "user" : "environment";
            startCamera();
            // Optional: Flip video horizontally if it's front camera
            video.style.transform = facingMode === "user" ? "scaleX(-1)" : "scaleX(1)";
        }

        // Take Photo
        function takePhoto() {
            if (!currentStream) return;

            // Flash effect
            flash.classList.add('active');
            setTimeout(() => flash.classList.remove('active'), 50);

            // Set canvas size to video actual size
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            
            const ctx = canvas.getContext('2d');

            // If front camera, flip the canvas context before drawing so saved image isn't mirrored backwards
            if (facingMode === "user") {
                ctx.translate(canvas.width, 0);
                ctx.scale(-1, 1);
            }

            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            // Save to Data URL
            lastPhotoData = canvas.toDataURL('image/png');

            // Update Preview Thumbnail
            previewImage.src = lastPhotoData;
            previewImage.style.display = "block";
            previewBox.classList.add('has-image');
        }

        // Download Captured Photo
        function downloadPhoto() {
            if (!lastPhotoData) return;
            const link = document.createElement('a');
            link.download = `ProCam_Capture_${new Date().getTime()}.png`;
            link.href = lastPhotoData;
            link.click();
        }

        // Start camera on page load
        window.onload = startCamera;
    </script>
</body>
</html>