Screen Recorder
Screen Recorder
Start Recording
Stop Recording
body {
font-family: 'Arial', sans-serif;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
text-align: center;
}
h1 {
color: #333;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
button:disabled {
background-color: #aaa;
cursor: not-allowed;
}
video {
width: 100%;
max-width: 600px;
margin-top: 20px;
}document.addEventListener('DOMContentLoaded', function () {
const startRecordingButton = document.getElementById('startRecording');
const stopRecordingButton = document.getElementById('stopRecording');
const recordedVideo = document.getElementById('recordedVideo');
let recorder;
startRecordingButton.addEventListener('click', startRecording);
stopRecordingButton.addEventListener('click', stopRecording);
function startRecording() {
navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
.then((stream) => {
recorder = RecordRTC(stream, {
type: 'video',
mimeType: 'video/webm',
bitsPerSecond: 128000
});
recorder.startRecording();
startRecordingButton.disabled = true;
stopRecordingButton.disabled = false;
})
.catch((error) => console.error('Error accessing media devices:', error));
}
function stopRecording() {
recorder.stopRecording(() => {
const blob = recorder.getBlob();
recordedVideo.src = URL.createObjectURL(blob);
startRecordingButton.disabled = false;
stopRecordingButton.disabled = true;
});
}
});
