feat: add live WebRTC camera stream viewfinder modal with capture trigger for mobile

frontend/viewer.html

@@ -578,6 +578,25 @@
                 </div>
             </form>
         </div>
+    <!-- Native Live Camera Stream Modal (Mobile WebRTC) -->
+    <div id="liveCameraModal" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background: #000000; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px; box-sizing: border-box;">
+        <div style="width: 100%; max-width: 600px; display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px;">
+            <div style="font-weight: 700; font-size: 1rem; color: #fff; display: flex; align-items: center; gap: 8px;">
+                📸 Tomar Foto
+            </div>
+            <button id="btnCloseLiveCamera" style="background: rgba(255,255,255,0.2); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 1rem; display: flex; align-items: center; justify-content: center;">✕</button>
+        </div>
+
+        <div style="width: 100%; max-width: 600px; height: calc(100vh - 160px); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; background: #121214; border-radius: 16px;">
+            <video id="liveCameraVideo" autoplay playsinline style="width: 100%; height: 100%; object-fit: cover; border-radius: 16px;"></video>
+            <canvas id="liveCameraCanvas" style="display: none;"></canvas>
+        </div>
+
+        <div style="width: 100%; max-width: 600px; display: flex; justify-content: center; padding: 10px 0;">
+            <button type="button" id="btnCaptureLivePhoto" style="background: #ffffff; color: #121214; border: 4px solid #7c3aed; width: 70px; height: 70px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(124, 58, 237, 0.6); transition: transform 0.1s active;">
+                📸
+            </button>
+        </div>
     </div>
 
     <!-- Privacy & Security Modal (Mobile) -->
@@ -1387,15 +1406,67 @@
             });
         }
 
-        // Upload & Camera handlers
+        // Upload & Live Camera WebRTC handlers
         const cameraInputMobile = document.getElementById('cameraInputMobile');
         const btnTriggerCameraMobile = document.getElementById('btnTriggerCameraMobile');
         const btnTriggerFileMobile = document.getElementById('btnTriggerFileMobile');
+        const liveCameraModal = document.getElementById('liveCameraModal');
+        const liveCameraVideo = document.getElementById('liveCameraVideo');
+        const liveCameraCanvas = document.getElementById('liveCameraCanvas');
+        const btnCloseLiveCamera = document.getElementById('btnCloseLiveCamera');
+        const btnCaptureLivePhoto = document.getElementById('btnCaptureLivePhoto');
+        let cameraStream = null;
+
+        function stopCameraStream() {
+            if (cameraStream) {
+                cameraStream.getTracks().forEach(track => track.stop());
+                cameraStream = null;
+            }
+            if (liveCameraModal) liveCameraModal.style.display = 'none';
+        }
 
-        if (btnTriggerCameraMobile && cameraInputMobile) {
-            btnTriggerCameraMobile.addEventListener('click', (e) => {
+        if (btnTriggerCameraMobile) {
+            btnTriggerCameraMobile.addEventListener('click', async (e) => {
                 e.stopPropagation();
-                cameraInputMobile.click();
+                // Intentar abrir cámara en vivo mediante MediaDevices WebRTC
+                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                    try {
+                        cameraStream = await navigator.mediaDevices.getUserMedia({
+                            video: { facingMode: { ideal: 'environment' } },
+                            audio: false
+                        });
+                        liveCameraVideo.srcObject = cameraStream;
+                        liveCameraModal.style.display = 'flex';
+                        return;
+                    } catch (err) {
+                        console.warn("[Camera WebRTC Fallback] Direct camera access fallback to input capture:", err);
+                    }
+                }
+                // Fallback si no hay soporte WebRTC directo o permiso denegado: disparar input capture
+                if (cameraInputMobile) cameraInputMobile.click();
+            });
+        }
+
+        if (btnCloseLiveCamera) {
+            btnCloseLiveCamera.addEventListener('click', stopCameraStream);
+        }
+
+        if (btnCaptureLivePhoto && liveCameraVideo && liveCameraCanvas) {
+            btnCaptureLivePhoto.addEventListener('click', () => {
+                const width = liveCameraVideo.videoWidth || 1024;
+                const height = liveCameraVideo.videoHeight || 1024;
+                liveCameraCanvas.width = width;
+                liveCameraCanvas.height = height;
+                const ctx = liveCameraCanvas.getContext('2d');
+                ctx.drawImage(liveCameraVideo, 0, 0, width, height);
+                
+                base64Image = liveCameraCanvas.toDataURL('image/png');
+                imagePreviewMobile.src = base64Image;
+                dropzone.style.display = 'none';
+                imagePreviewContainer.style.display = 'block';
+                btnCreate3DMobile.style.display = 'flex';
+
+                stopCameraStream();
             });
         }