body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #8e44ad, #3498db); color: #fff; } .container { text-align: center; background: rgba(0, 0, 0, 0.7); padding: 20px; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } h1 { margin-bottom: 20px; font-size: 2em; } .controls { margin-bottom: 20px; } button { padding: 10px 20px; margin: 5px; font-size: 1em; border: none; border-radius: 5px; cursor: pointer; transition: 0.3s ease-in-out; } #start-btn { background: #2ecc71; color: white; } #stop-btn { background: #e74c3c; color: white; } #download-btn { background: #3498db; color: white; } button:disabled { background: #7f8c8d; cursor: not-allowed; } button:hover:not(:disabled) { opacity: 0.8; } .video-preview { margin-top: 20px; border: 2px solid #fff; border-radius: 10px; overflow: hidden; } video { width: 100%; border-radius: 10px; } let recorder; // RecordRTC instance let stream; // Screen stream const startBtn = document.getElementById('start-btn'); const stopBtn = document.getElementById('stop-btn'); const downloadBtn = document.getElementById('download-btn'); const preview = document.getElementById('preview'); startBtn.addEventListener('click', async () => { try { stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }); preview.srcObject = stream; preview.play(); recorder = new RecordRTC(stream, { type: 'video' }); recorder.startRecording(); startBtn.disabled = true; stopBtn.disabled = false; downloadBtn.disabled = true; } catch (error) { alert('Error accessing screen: ' + error.message); } }); stopBtn.addEventListener('click', () => { recorder.stopRecording(() => { const blob = recorder.getBlob(); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'screen-recording.webm'; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); a.remove(); stream.getTracks().forEach(track => track.stop()); preview.srcObject = null; startBtn.disabled = false; stopBtn.disabled = true; downloadBtn.disabled = true; })} );