Screen Recorder

body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .container { text-align: center; } h1 { color: #333; } #controls { margin-bottom: 20px; } button { padding: 10px 20px; font-size: 16px; background-color: #007bff; color: #fff; border: none; cursor: pointer; margin-right: 10px; } button:disabled { background-color: #ccc; cursor: not-allowed; } video { width: 100%; max-width: 600px; border: 1px solid #ddd; } const startButton = document.getElementById('startButton'); const stopButton = document.getElementById('stopButton'); const videoElement = document.getElementById('videoElement'); let recorder; let stream; startButton.addEventListener('click', async () => { try { stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }); recorder = new RecordRTC(stream, { type: 'video', mimeType: 'video/webm' }); recorder.startRecording(); videoElement.srcObject = stream; startButton.disabled = true; stopButton.disabled = false; } catch (error) { console.error('Error accessing media devices:', error); } }); stopButton.addEventListener('click', () => { recorder.stopRecording(() => { let blob = recorder.getBlob(); videoElement.src = URL.createObjectURL(blob); stream.getTracks().forEach(track => track.stop()); startButton.disabled = false; stopButton.disabled = true; }); });