html
Copy code
Screen Recorder Tool
Screen Recorder Tool
CSS (styles.css)
css
Copy code
body {
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #f3ec78, #af4261);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h1 {
margin-bottom: 20px;
}
video {
width: 100%;
max-width: 600px;
margin-bottom: 20px;
border-radius: 10px;
}
.buttons {
display: flex;
justify-content: center;
gap: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:disabled {
background: #555;
cursor: not-allowed;
}
#startBtn {
background: #28a745;
}
#startBtn:hover {
background: #218838;
}
#stopBtn {
background: #dc3545;
}
#stopBtn:hover {
background: #c82333;
}
#downloadBtn {
background: #007bff;
}
#downloadBtn:hover {
background: #0056b3;
}
JavaScript (script.js)
javascript
Copy code
document.addEventListener('DOMContentLoaded', () => {
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const downloadBtn = document.getElementById('downloadBtn');
const preview = document.getElementById('preview');
let recorder;
let stream;
startBtn.addEventListener('click', async () => {
try {
stream = await navigator.mediaDevices.getDisplayMedia({
video: { cursor: 'always' },
audio: true
});
recorder = RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
preview.srcObject = stream;
preview.play();
startBtn.disabled = true;
stopBtn.disabled = false;
} catch (error) {
console.error('Error accessing display media.', error);
}
});
stopBtn.addEventListener('click', () => {
recorder.stopRecording(() => {
const blob = recorder.getBlob();
preview.src = URL.createObjectURL(blob);
preview.play();
downloadBtn.href = URL.createObjectURL(blob);
downloadBtn.download = 'recording.webm';
startBtn.disabled = false;
stopBtn.disabled = true;
downloadBtn.disabled = false;
});
stream.getTracks().forEach(track => track.stop());
});
downloadBtn.addEventListener('click', () => {
downloadBtn.disabled = true;
});
});
'format' : 'iframe',
'height' : 60,
'width' : 468,
'params' : {}
};
