Update index.html

index.html

@@ -307,6 +307,10 @@
       <button class="btn" onclick="clearPreview('cardMakerPreview')">Delete this Card <i class="fas fa-trash"></i></button>
       <button class="btn" onclick="downloadCardMakerImage()">Download Image <i class="fas fa-download"></i></button>
       <button class="btn" onclick="downloadCardMakerPDF()">Download PDF <i class="fas fa-file-pdf"></i></button>
+      <!-- Кнопки для записи видео -->
+      <button class="btn" id="startRecordingCard" onclick="startRecording('cardMakerPreview')">Start Recording <i class="fas fa-circle"></i></button>
+      <button class="btn" id="stopRecordingCard" onclick="stopRecording('cardMakerPreview')" disabled>Stop Recording <i class="fas fa-stop"></i></button>
+      <button class="btn" id="downloadRecordedVideoCard" onclick="downloadRecordedVideo('cardMakerPreview')" disabled>Download MP4 <i class="fas fa-download"></i></button>
     </div>
     <div class="card-preview" id="cardMakerPreview"></div>
   </div>
@@ -331,6 +335,10 @@
       <button class="btn" onclick="clearPreview('generatedCardPreview')">Delete this Card <i class="fas fa-trash"></i></button>
       <button class="btn" onclick="downloadGeneratedImage()">Download Image <i class="fas fa-download"></i></button>
       <button class="btn" onclick="downloadGeneratedPDF()">Download PDF <i class="fas fa-file-pdf"></i></button>
+      <!-- Кнопки для записи видео -->
+      <button class="btn" id="startRecordingMedia" onclick="startRecording('generatedCardPreview')">Start Recording <i class="fas fa-circle"></i></button>
+      <button class="btn" id="stopRecordingMedia" onclick="stopRecording('generatedCardPreview')" disabled>Stop Recording <i class="fas fa-stop"></i></button>
+      <button class="btn" id="downloadRecordedVideoMedia" onclick="downloadRecordedVideo('generatedCardPreview')" disabled>Download MP4 <i class="fas fa-download"></i></button>
     </div>
     <div class="card-preview" id="generatedCardPreview"></div>
   </div>
@@ -350,6 +358,11 @@
     // Массив для хранения истории карточек
     let history = [];
 
+    // Переменные для записи видео
+    let mediaRecorder;
+    let recordedChunks = [];
+    let recordedVideoUrl;
+
     // Функция для переключения между инструментами
     function showTool(toolId) {
       // Скрыть все инструменты
@@ -370,6 +383,61 @@
       }
     }
 
+    // Инициализация видеорекордера
+    async function initVideoRecorder(previewId) {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+        const previewElement = document.getElementById(previewId);
+        previewElement.innerHTML = `<video id="videoPreview" autoplay muted style="max-width: 100%; border-radius: 10px;"></video>`;
+        const videoPreview = document.getElementById('videoPreview');
+        videoPreview.srcObject = stream;
+
+        mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
+
+        mediaRecorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            recordedChunks.push(event.data);
+          }
+        };
+
+        mediaRecorder.onstop = () => {
+          const blob = new Blob(recordedChunks, { type: 'video/webm' });
+          recordedVideoUrl = URL.createObjectURL(blob);
+          previewElement.innerHTML = `<video controls src="${recordedVideoUrl}" style="max-width: 100%; border-radius: 10px;"></video>`;
+          document.getElementById(`downloadRecordedVideo${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false;
+        };
+      } catch (error) {
+        console.error('Error accessing media devices:', error);
+        alert('Error accessing camera or microphone. Please ensure you have granted the necessary permissions.');
+      }
+    }
+
+    // Начать запись
+    function startRecording(previewId) {
+      recordedChunks = [];
+      initVideoRecorder(previewId).then(() => {
+        mediaRecorder.start();
+        document.getElementById(`startRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true;
+        document.getElementById(`stopRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false;
+        document.getElementById(`downloadRecordedVideo${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true;
+      });
+    }
+
+    // Остановить запись
+    function stopRecording(previewId) {
+      mediaRecorder.stop();
+      document.getElementById(`startRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false;
+      document.getElementById(`stopRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true;
+    }
+
+    // Скачать записанное видео
+    function downloadRecordedVideo(previewId) {
+      const link = document.createElement('a');
+      link.href = recordedVideoUrl;
+      link.download = 'recorded-video.mp4';
+      link.click();
+    }
+
     // Сохранить карточку в историю
     function saveCardToHistory(previewId) {
       const cardPreview = document.getElementById(previewId).innerHTML;
@@ -512,4 +580,4 @@
     }
   </script>
 </body>
-</html>
+</html>