screen recorder

Screen Recorder Tool

body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { text-align: center; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); max-width: 600px; width: 100%; } h1 { color: #007bff; } .controls { margin-top: 20px; } .btn { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; margin: 5px; border-radius: 5px; cursor: pointer; } .btn:disabled { background-color: #ccc; cursor: not-allowed; } const startRecordingButton = document.getElementById("startRecording"); const stopRecordingButton = document.getElementById("stopRecording"); const recordedVideo = document.getElementById("recordedVideo"); let recorder; startRecordingButton.addEventListener("click", () => { navigator.mediaDevices .getDisplayMedia({ video: true, audio: true }) .then((stream) => { recorder = new RecordRTC(stream, { type: "video", mimeType: "video/webm", bitsPerSecond: 128000, }); recorder.startRecording(); startRecordingButton.disabled = true; stopRecordingButton.disabled = false; }) .catch((error) => console.error("Error accessing screen:", error)); }); stopRecordingButton.addEventListener("click", () => { recorder.stopRecording(() => { const blob = recorder.getBlob(); recordedVideo.src = URL.createObjectURL(blob); recordedVideo.controls = true; startRecordingButton.disabled = false; stopRecordingButton.disabled = true; }); });