Update index.html

index.html

@@ -130,7 +130,8 @@
     }
 
     .card-preview img,
-    .card-preview audio {
+    .card-preview audio,
+    .card-preview video {
       max-width: 100%;
       border-radius: 10px;
     }
@@ -286,6 +287,7 @@
     <button class="btn glow" onclick="showTool('cardMaker')">Card Maker <i class="fas fa-paint-brush"></i></button>
     <button class="btn glow" onclick="showTool('imageVideoToCard')">Image/Video to Card <i class="fas fa-image"></i></button>
     <button class="btn glow" onclick="showTool('history')">History <i class="fas fa-history"></i></button>
+    <button class="btn glow" onclick="showTool('videoRecorder')">Video Recorder <i class="fas fa-video"></i></button>
   </div>
 
   <!-- Card Maker Section -->
@@ -334,6 +336,18 @@
     <button class="btn" onclick="downloadGeneratedPDF()">Download PDF <i class="fas fa-file-pdf"></i></button>
   </div>
 
+  <!-- Video Recorder Section -->
+  <div id="videoRecorder" class="container hidden fade-in">
+    <h1>Video Recorder</h1>
+    <div class="card">
+      <video id="videoPreview" autoplay muted style="max-width: 100%; border-radius: 10px;"></video>
+      <div class="card-preview" id="recordedVideoPreview"></div>
+      <button class="btn" id="startRecording" onclick="startRecording()">Start Recording <i class="fas fa-circle"></i></button>
+      <button class="btn" id="stopRecording" onclick="stopRecording()" disabled>Stop Recording <i class="fas fa-stop"></i></button>
+      <button class="btn" onclick="downloadRecordedVideo()" id="downloadRecordedVideo" disabled>Download Video <i class="fas fa-download"></i></button>
+    </div>
+  </div>
+
   <!-- History Section -->
   <div id="history" class="container hidden fade-in">
     <h1>History</h1>
@@ -349,6 +363,11 @@
     // Массив для хранения истории карточек
     let history = [];
 
+    // Переменные для записи видео
+    let mediaRecorder;
+    let recordedChunks = [];
+    let recordedVideoUrl;
+
     // Функция для переключения между инструментами
     function showTool(toolId) {
       // Скрыть все инструменты
@@ -367,6 +386,63 @@
       if (toolId === 'history') {
         updateHistory();
       }
+
+      // Если открыт видеорекордер, инициализировать камеру
+      if (toolId === 'videoRecorder') {
+        initVideoRecorder();
+      }
+    }
+
+    // Инициализация видеорекордера
+    async function initVideoRecorder() {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+        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);
+          const recordedVideoPreview = document.getElementById('recordedVideoPreview');
+          recordedVideoPreview.innerHTML = `<video controls src="${recordedVideoUrl}" style="max-width: 100%; border-radius: 10px;"></video>`;
+          document.getElementById('downloadRecordedVideo').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() {
+      recordedChunks = [];
+      mediaRecorder.start();
+      document.getElementById('startRecording').disabled = true;
+      document.getElementById('stopRecording').disabled = false;
+      document.getElementById('downloadRecordedVideo').disabled = true;
+    }
+
+    // Остановить запись
+    function stopRecording() {
+      mediaRecorder.stop();
+      document.getElementById('startRecording').disabled = false;
+      document.getElementById('stopRecording').disabled = true;
+    }
+
+    // Скачать записанное видео
+    function downloadRecordedVideo() {
+      const link = document.createElement('a');
+      link.href = recordedVideoUrl;
+      link.download = 'recorded-video.mp4';
+      link.click();
     }
 
     // Сохранить карточку в историю