Screen Recorder Screen Recorder Start Recording Stop Recording Download 00:00 Here’s a complete responsive screen recorder implementation with HTML, CSS, and JavaScript. It includes features like start/stop recording, display of recording time, and the ability to save the recorded video. You can use it... HTML Code Screen Recorder Screen Recorder Start Recording Stop Recording Download 00:00 CSS (styles.css): * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { text-align: center; width: 90%; max-width: 600px; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 20px; } h1 { margin-bottom: 20px; font-size: 24px; } #recordingControls button { padding: 10px 20px; font-size: 16px; margin: 10px; cursor: pointer; border: none; border-radius: 5px; background-color: #4CAF50; color: white; transition: background-color 0.3s; } #recordingControls button:disabled { background-color: #ccc; cursor: not-allowed; } #recordingControls button:hover:not(:disabled) { background-color: #45a049; } #timer { font-size: 24px; margin-top: 20px; font-weight: bold; } video { width: 100%; max-height: 300px; margin-top: 20px; border-radius: 8px; } JavaScript (script.js): let startButton = document.getElementById('startButton'); let stopButton = document.getElementById('stopButton'); let downloadButton = document.getElementById('downloadButton'); let timerDisplay = document.getElementById('time'); let preview = document.getElementById('preview'); let mediaRecorder; let recordedChunks = []; let recordingInterval; let timeElapsed = 0; startButton.addEventListener('click', startRecording); stopButton.addEventListener('click', stopRecording); downloadButton.addEventListener('click', downloadVideo); async function startRecording() { try { // Request access to screen const stream = await navigator.mediaDevices.getDisplayMedia({ video: true }); // Initialize the media recorder with the stream mediaRecorder = new MediaRecorder(stream); // Collect chunks of video during recording mediaRecorder.ondataavailable = event => { recordedChunks.push(event.data); }; // Stop recording and save the video mediaRecorder.onstop = () => { const blob = new Blob(recordedChunks, { type: 'video/webm' }); const videoURL = URL.createObjectURL(blob); preview.src = videoURL; preview.style.display = 'block'; downloadButton.disabled = false; }; // Start the media recorder mediaRecorder.start(); // Enable the stop button and disable start button startButton.disabled = true; stopButton.disabled = false; // Start the timer startTimer(); } catch (err) { console.error("Error accessing screen: ", err); } } function startTimer() { recordingInterval = setInterval(() => { timeElapsed++; let minutes = Math.floor(timeElapsed / 60); let seconds = timeElapsed % 60; timerDisplay.textContent = `${formatTime(minutes)}:${formatTime(seconds)}`; }, 1000); } function stopTimer() { clearInterval(recordingInterval); } function formatTime(time) { return time < 10 ? `0${time}` : time; } function stopRecording() { mediaRecorder.stop(); stopTimer(); // Disable stop button and enable start button startButton.disabled = false; stopButton.disabled = true; } function downloadVideo() { const blob = new Blob(recordedChunks, { type: 'video/webm' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'screen-recording.webm'; link.click(); downloadButton.disabled = true; }
