Update templates/index.html

templates/index.html

@@ -74,8 +74,8 @@
             transition: background 0.2s, border-color 0.2s;
             text-align: center;
         }
-        .btn-upload:hover { background: var(--color-hover); }
 
+        .btn-upload:hover { background: var(--color-hover); }
         .btn-upload.active-pink { background: var(--color-pink); border-color: var(--color-pink); color: #000; }
         .btn-upload.active-lime { background: var(--color-lime); border-color: var(--color-lime); color: #000; }
 
@@ -110,11 +110,12 @@
         input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,0.2); border-radius: 0; }
 
         /* --- Action Buttons --- */
-        .action-buttons { display: flex; gap: 15px; margin-top: auto; }
+        .action-buttons { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }
         .btn-action { flex: 1; padding: 16px 0; font-family: var(--font-mono); font-size: 12px; border: none; cursor: pointer; transition: opacity 0.2s; text-align: center; }
         .btn-action:hover { opacity: 0.8; }
         .btn-download-svg { background: #000000; color: #ffffff; }
         .btn-download-mp4 { background: var(--color-btn-gray); color: #ffffff; }
+        .btn-record { background: #FF0000; color: #ffffff; }
         .btn-action:disabled { opacity: 0.4; cursor: not-allowed; }
 
         /* --- Preview Area --- */
@@ -126,14 +127,14 @@
             justify-content: center;
             padding: 20px;
             height: 100vh;
-            overflow: hidden; /* Запрет скролла */
+            overflow: hidden;
         }
         
         #main-canvas {
-            box-shadow: 0 10px 40px rgba(0,0,0,0.05); 
+            box-shadow: 0 10px 40px rgba(0,0,0,0.05);
             max-width: 100%;
             max-height: 100%;
-            object-fit: contain; /* Пропорциональное вписывание */
+            object-fit: contain; 
             background: #fff;
         }
 
@@ -154,6 +155,7 @@
         <span class="section-title">02 / CONTENT</span>
         <input type="file" id="content_file" accept=".png, .jpg, .jpeg, .mp4, .mov">
         <label for="content_file" class="btn-upload" id="lbl-content">Select Content</label>
+        <button class="btn-upload" id="btn-webcam">Use Webcam 📷</button>
     </div>
 
     <div class="section">
@@ -187,8 +189,9 @@
     </div>
 
     <div class="action-buttons">
-        <button class="btn-action btn-download-svg" id="btn-dl-svg">Download SVG</button>
-        <button class="btn-action btn-download-mp4" id="btn-dl-video" disabled>Download MP4</button>
+        <button class="btn-action btn-download-svg" id="btn-dl-svg">SVG</button>
+        <button class="btn-action btn-download-mp4" id="btn-dl-video" disabled>MP4</button>
+        <button class="btn-action btn-record" id="btn-record">Record 🔴</button>
     </div>
     <div id="status-msg" style="font-size:10px; font-family:var(--font-mono); text-align:center;"></div>
 </div>
@@ -197,7 +200,7 @@
     <canvas id="main-canvas" width="1400" height="900"></canvas>
     
     <img id="source-image" src="" crossorigin="anonymous">
-    <video id="source-video" src="" playsinline loop muted crossorigin="anonymous"></video>
+    <video id="source-video" playsinline autoplay loop muted crossorigin="anonymous"></video>
     <canvas id="helper-canvas" style="display:none;"></canvas>
 </div>
 
@@ -207,6 +210,12 @@
     let currentFile = null;    
     let animationId = null;
     
+    // Переменные для вебкамеры и записи
+    let webcamStream = null;
+    let mediaRecorder = null;
+    let recordedChunks = [];
+    let isRecording = false;
+
     const canvas = document.getElementById('main-canvas');
     const ctx = canvas.getContext('2d', { alpha: false });
     const helperCanvas = document.getElementById('helper-canvas');
@@ -218,9 +227,11 @@
 
     const btnShape = document.getElementById('lbl-shape');
     const btnContent = document.getElementById('lbl-content');
+    const btnWebcam = document.getElementById('btn-webcam');
     const patternsContainer = document.getElementById('patterns-list');
     const btnDlSvg = document.getElementById('btn-dl-svg');
     const btnDlVideo = document.getElementById('btn-dl-video');
+    const btnRecord = document.getElementById('btn-record');
 
     // --- Авто-размер холста по пропорциям контента ---
     function updateCanvasSize() {
@@ -301,11 +312,50 @@
         p.cache = off;
     }
 
+    // --- Сброс вебкамеры ---
+    function stopWebcam() {
+        if (webcamStream) {
+            webcamStream.getTracks().forEach(track => track.stop());
+            webcamStream = null;
+        }
+        btnWebcam.classList.remove('active-lime');
+        btnWebcam.innerText = "Use Webcam 📷";
+    }
+
+    // --- Управление вебкамерой ---
+    btnWebcam.addEventListener('click', async () => {
+        try {
+            stopWebcam();
+            
+            webcamStream = await navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 } });
+            
+            sourceVideo.srcObject = webcamStream;
+            sourceVideo.play();
+            
+            currentMode = 'video';
+            currentFile = null;
+            
+            // Настройка кнопок
+            btnContent.classList.remove('active-lime');
+            btnContent.innerText = "Select Content";
+            btnWebcam.classList.add('active-lime');
+            btnWebcam.innerText = "Webcam Active 🟢";
+            btnDlVideo.disabled = true; // Экспорт через бэкенд не нужен для вебкамеры
+            
+            requestRender();
+        } catch (err) {
+            alert("Не удалось получить доступ к камере: " + err.message);
+        }
+    });
+
     // --- Content ---
     document.getElementById('content_file').addEventListener('change', (e) => {
         const file = e.target.files[0];
         if(!file) return;
         
+        stopWebcam(); // Выключаем камеру, если она была включена
+        sourceVideo.srcObject = null; // Убираем стрим из тега video
+
         currentFile = file; 
         const url = URL.createObjectURL(file);
         
@@ -360,7 +410,7 @@
 
     // --- Engine ---
     function requestRender() {
-        if (currentMode === 'video' && !sourceVideo.paused) {
+        if (currentMode === 'video' && (!sourceVideo.paused || webcamStream)) {
             if (!animationId) renderLoop();
         } else {
             drawFrame();
@@ -369,7 +419,7 @@
     
     function renderLoop() {
         drawFrame();
-        if (currentMode === 'video' && !sourceVideo.paused) {
+        if (currentMode === 'video' && (!sourceVideo.paused || webcamStream)) {
             animationId = requestAnimationFrame(renderLoop);
         } else {
             animationId = null;
@@ -393,7 +443,12 @@
         let sourceData = null;
         let activeSource = currentMode === 'video' ? sourceVideo : sourceImage;
         
-        if (activeSource.src && (activeSource.readyState >= 2 || activeSource.complete)) {
+        // Проверка готовности для видео-файлов или веб-камеры
+        const isReady = activeSource.srcObject 
+            ? activeSource.readyState >= 2 // Для стрима веб-камеры
+            : activeSource.src && (activeSource.readyState >= 2 || activeSource.complete); // Для файлов
+
+        if (isReady) {
             const step = w / density;
             const rows = Math.ceil(h / step);
             helperCanvas.width = density;
@@ -417,6 +472,7 @@
                     const idx = (r * density + c) * 4;
                     bright = (sourceData[idx] + sourceData[idx+1] + sourceData[idx+2]) / 3 / 255.0;
                 }
+                
                 if (invert) bright = 1.0 - bright;
                 if (bright > 0.96) continue;
 
@@ -438,6 +494,43 @@
         }
     }
 
+    // --- Запись видео в реальном времени (Webcam или Canvas) ---
+    btnRecord.addEventListener('click', () => {
+        if (!isRecording) {
+            // Начинаем запись
+            const stream = canvas.captureStream(30); // Захват холста 30 кадров в секунду
+            mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
+            recordedChunks = [];
+            
+            mediaRecorder.ondataavailable = e => {
+                if (e.data.size > 0) recordedChunks.push(e.data);
+            };
+            
+            mediaRecorder.onstop = () => {
+                const blob = new Blob(recordedChunks, { type: 'video/webm' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'cell_clipper_record.webm';
+                a.click();
+                URL.revokeObjectURL(url);
+            };
+            
+            mediaRecorder.start();
+            isRecording = true;
+            btnRecord.innerText = "Stop ⏹";
+            btnRecord.style.background = "#000";
+            document.getElementById('status-msg').innerText = "RECORDING IN PROGRESS...";
+        } else {
+            // Останавливаем запись
+            mediaRecorder.stop();
+            isRecording = false;
+            btnRecord.innerText = "Record 🔴";
+            btnRecord.style.background = "#FF0000";
+            document.getElementById('status-msg').innerText = "RECORDING SAVED";
+        }
+    });
+
     // --- Helpers for Blob ---
     async function getPatternBlobs() {
         const blobs = [];
@@ -466,7 +559,6 @@
         form.append('invert', document.getElementById('invert').checked);
         form.append('bg_color', bgColorInput.value);
         
-        // Передаем исходные размеры
         form.append('canvas_w', canvas.width);
         form.append('canvas_h', canvas.height);
 
@@ -491,7 +583,6 @@
         btnDlVideo.disabled = true;
         const form = new FormData();
         
-        // Отправляем закэшированные цветные PNG паттерны для видео
         const pBlobs = await getPatternBlobs();
         pBlobs.forEach((b, i) => {
             form.append('pattern_pngs', b, `pattern_${i}.png`);