8 months ago
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Screen Recorder</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } #video-preview { max-width: 100%; border: 2px solid #ccc; border-radius: 8px; } #controls { margin-top: 20px; display: flex; justify-content: space-around; width: 100%; } #download-btn { padding: 10px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <video id="video-preview" autoplay muted playsinline></video> <div id="controls"> <button id="start-btn">Start Recording</button> <button id="pause-btn" disabled>Pause</button> <button id="stop-btn" disabled>Stop Recording</button> <button id="download-btn" disabled>Download</button> </div> <script> let mediaRecorder; let recordedChunks = []; let isRecording = false; const videoPreview = document.getElementById('video-preview'); const startBtn = document.getElementById('start-btn'); const pauseBtn = document.getElementById('pause-btn'); const stopBtn = document.getElementById('stop-btn'); const downloadBtn = document.getElementById('download-btn'); startBtn.addEventListener('click', startRecording); pauseBtn.addEventListener('click', pauseRecording); stopBtn.addEventListener('click', stopRecording); downloadBtn.addEventListener('click', downloadRecording); async function startRecording() { try { const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }); mediaRecorder = new MediaRecorder(stream); recordedChunks = []; mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) { recordedChunks.push(e.data); } }; mediaRecorder.onstop = () => { const blob = new Blob(recordedChunks, { type: 'video/webm' }); videoPreview.src = URL.createObjectURL(blob); downloadBtn.href = videoPreview.src; }; mediaRecorder.start(); isRecording = true; startBtn.disabled = true; pauseBtn.disabled = false; stopBtn.disabled = false; downloadBtn.disabled = true; } catch (error) { console.error('Error accessing media devices:', error); } } function pauseRecording() { if (isRecording) { mediaRecorder.pause(); pauseBtn.innerText = 'Resume'; } else { mediaRecorder.resume(); pauseBtn.innerText = 'Pause'; } isRecording = !isRecording; } function stopRecording() { if (isRecording) { mediaRecorder.stop(); startBtn.disabled = false; pauseBtn.disabled = true; stopBtn.disabled = true; downloadBtn.disabled = false; } } function downloadRecording() { if (!isRecording) { const blob = new Blob(recordedChunks, { type: 'video/webm' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'recorded-video.webm'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } } </script> </body> </html>
