API tools faq
paste
Guest User

Advanced Screen Recorder

a guest
Feb 7th, 2025
54
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Улучшенный экранный рекордер</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             text-align: center;
  11.             margin-top: 50px;
  12.         }
  13.         button {
  14.             padding: 10px 20px;
  15.             font-size: 16px;
  16.             margin: 10px;
  17.         }
  18.         video {
  19.             max-width: 100%;
  20.             margin-top: 20px;
  21.         }
  22.         #status {
  23.             margin-top: 20px;
  24.             font-size: 18px;
  25.             color: green;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <h1>Улучшенный экранный рекордер</h1>
  31.     <button id="startBtn">Начать запись</button>
  32.     <button id="stopBtn" disabled>Остановить запись</button>
  33.     <button id="downloadBtn" disabled>Скачать видео</button>
  34.     <div id="status"></div>
  35.     <video id="preview" controls></video>
  36.  
  37.     <script>
  38.         let mediaRecorder;
  39.         let recordedChunks = [];
  40.         let previewVideo = document.getElementById('preview');
  41.         let startButton = document.getElementById('startBtn');
  42.         let stopButton = document.getElementById('stopBtn');
  43.         let downloadButton = document.getElementById('downloadBtn');
  44.         let statusText = document.getElementById('status');
  45.  
  46.         // Функция для начала записи
  47.         async function startRecording() {
  48.             try {
  49.                 // Запрос доступа к экрану с возможностью записи звука
  50.                 const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
  51.  
  52.                 // Создаем MediaRecorder с настройками качества
  53.                 const options = { mimeType: 'video/webm', videoBitsPerSecond: 4_000_000 }; // 4 Mbps
  54.                 mediaRecorder = new MediaRecorder(stream, options);
  55.  
  56.                 // Слушатель для получения данных записи
  57.                 mediaRecorder.ondataavailable = (event) => {
  58.                     if (event.data.size > 0) {
  59.                         recordedChunks.push(event.data);
  60.                     }
  61.                 };
  62.  
  63.                 // Слушатель для завершения записи
  64.                 mediaRecorder.onstop = () => {
  65.                     setTimeout(() => { // Добавляем задержку для обеспечения обработки всех данных
  66.                         if (recordedChunks.length === 0) {
  67.                             statusText.textContent = 'Ошибка: запись пустая.';
  68.                             return;
  69.                         }
  70.  
  71.                         const blob = new Blob(recordedChunks, { type: 'video/webm' });
  72.                         recordedChunks = [];
  73.                         const url = URL.createObjectURL(blob);
  74.                         previewVideo.src = url;
  75.                         previewVideo.style.display = 'block';
  76.                         statusText.textContent = 'Запись завершена.';
  77.                         downloadButton.disabled = false;
  78.                         downloadButton.onclick = () => {
  79.                             const a = document.createElement('a');
  80.                             a.href = url;
  81.                             a.download = 'recording.webm';
  82.                             a.click();
  83.                         };
  84.                     }, 500); // Задержка в 500 мс
  85.                 };
  86.  
  87.                 // Обработка ошибок потока
  88.                 mediaRecorder.onerror = (error) => {
  89.                     console.error('Ошибка записи:', error);
  90.                     statusText.textContent = 'Ошибка записи: ' + error.message;
  91.                 };
  92.  
  93.                 // Начинаем запись
  94.                 mediaRecorder.start();
  95.                 startButton.disabled = true;
  96.                 stopButton.disabled = false;
  97.                 statusText.textContent = 'Запись...';
  98.  
  99.                 console.log('Запись началась');
  100.             } catch (error) {
  101.                 console.error('Ошибка при попытке записи экрана:', error);
  102.                 statusText.textContent = 'Ошибка: ' + error.message;
  103.             }
  104.         }
  105.  
  106.         // Функция для остановки записи
  107.         function stopRecording() {
  108.             if (mediaRecorder && mediaRecorder.state !== 'inactive') {
  109.                 mediaRecorder.stop(); // Останавливаем запись
  110.                 startButton.disabled = false;
  111.                 stopButton.disabled = true;
  112.                 statusText.textContent = 'Остановка записи...';
  113.                 console.log('Запись остановлена');
  114.             }
  115.         }
  116.  
  117.         // Обработчики событий кнопок
  118.         startButton.addEventListener('click', startRecording);
  119.         stopButton.addEventListener('click', stopRecording);
  120.     </script>
  121. </body>
  122. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!