Hugging Face's logo

Spaces:
Felguk
/
Picture-crrrd
Running

App Files Community
Felguk commited on
Commit
88bdb8b
·
verified ·
1 Parent(s): b4e9f55

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +25 -42
index.html CHANGED
@@ -263,6 +263,7 @@
263
  </style>
264
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
265
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 
266
  </head>
267
  <body>
268
  <!-- Navbar с ссылкой -->
@@ -359,7 +360,7 @@
359
  let history = [];
360
 
361
  // Переменные для записи видео
362
- let mediaRecorder;
363
  let recordedChunks = [];
364
  let recordedVideoUrl;
365
 
@@ -383,58 +384,40 @@
383
  }
384
  }
385
 
386
- // Инициализация видеорекордера
387
- async function initVideoRecorder(previewId) {
388
- try {
389
- const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
390
- const previewElement = document.getElementById(previewId);
391
- previewElement.innerHTML = `<video id="videoPreview" autoplay muted style="max-width: 100%; border-radius: 10px;"></video>`;
392
- const videoPreview = document.getElementById('videoPreview');
393
- videoPreview.srcObject = stream;
394
-
395
- mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
396
-
397
- mediaRecorder.ondataavailable = (event) => {
398
- if (event.data.size > 0) {
399
- recordedChunks.push(event.data);
400
- }
401
- };
402
-
403
- mediaRecorder.onstop = () => {
404
- const blob = new Blob(recordedChunks, { type: 'video/webm' });
405
- recordedVideoUrl = URL.createObjectURL(blob);
406
- previewElement.innerHTML = `<video controls src="${recordedVideoUrl}" style="max-width: 100%; border-radius: 10px;"></video>`;
407
- document.getElementById(`downloadRecordedVideo${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false;
408
- };
409
- } catch (error) {
410
- console.error('Error accessing media devices:', error);
411
- alert('Error accessing camera or microphone. Please ensure you have granted the necessary permissions.');
412
- }
413
- }
414
 
415
- // Начать запись
416
- function startRecording(previewId) {
417
- recordedChunks = [];
418
- initVideoRecorder(previewId).then(() => {
419
- mediaRecorder.start();
420
- document.getElementById(`startRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true;
421
- document.getElementById(`stopRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false;
422
- document.getElementById(`downloadRecordedVideo${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true;
423
  });
 
 
 
 
 
424
  }
425
 
426
  // Остановить запись
427
  function stopRecording(previewId) {
428
- mediaRecorder.stop();
429
- document.getElementById(`startRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false;
430
- document.getElementById(`stopRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true;
 
 
 
 
 
431
  }
432
 
433
  // Скачать записанное видео
434
  function downloadRecordedVideo(previewId) {
435
  const link = document.createElement('a');
436
  link.href = recordedVideoUrl;
437
- link.download = 'recorded-video.mp4';
438
  link.click();
439
  }
440
 
@@ -580,4 +563,4 @@
580
  }
581
  </script>
582
  </body>
583
- </html>
 
263
  </style>
264
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
265
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
266
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.js"></script>
267
  </head>
268
  <body>
269
  <!-- Navbar с ссылкой -->
 
360
  let history = [];
361
 
362
  // Переменные для записи видео
363
+ let recorder;
364
  let recordedChunks = [];
365
  let recordedVideoUrl;
366
 
 
384
  }
385
  }
386
 
387
+ // Начать запись карточки
388
+ async function startRecording(previewId) {
389
+ const previewElement = document.getElementById(previewId);
390
+ const canvas = await html2canvas(previewElement);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
391
 
392
+ const stream = canvas.captureStream(25); // 25 FPS
393
+ recorder = new RecordRTC(stream, {
394
+ type: 'video',
395
+ mimeType: 'video/webm',
 
 
 
 
396
  });
397
+
398
+ recorder.startRecording();
399
+ document.getElementById(`startRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true;
400
+ document.getElementById(`stopRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false;
401
+ document.getElementById(`downloadRecordedVideo${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true;
402
  }
403
 
404
  // Остановить запись
405
  function stopRecording(previewId) {
406
+ recorder.stopRecording(() => {
407
+ const blob = recorder.getBlob();
408
+ recordedVideoUrl = URL.createObjectURL(blob);
409
+
410
+ document.getElementById(`startRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false;
411
+ document.getElementById(`stopRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true;
412
+ document.getElementById(`downloadRecordedVideo${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false;
413
+ });
414
  }
415
 
416
  // Скачать записанное видео
417
  function downloadRecordedVideo(previewId) {
418
  const link = document.createElement('a');
419
  link.href = recordedVideoUrl;
420
+ link.download = 'recorded-card.mp4';
421
  link.click();
422
  }
423
 
 
563
  }
564
  </script>
565
  </body>
566
+ </html>