Capture Your Screen On-the-Go
```html
<!DOCTYPE html>
<html>
<head>
<title>Screen Recorder</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
text-align: center;
}
#recorder {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 10px;
background: #f2f2f2;
}
#recorder > div {
padding: 10px;
margin-bottom: 10px;
}
#recorder > div > button {
padding: 10px;
font-size: 1.2rem;
background: #1d9af2;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#recorder > div > button:hover {
background: #1783e3;
}
#recorder > div > #duration {
font-size: 1.2rem;
color: #1d9af2;
font-weight: bold;
}
#recorder > div > #filesize {
font-size: 1.2rem;
color: #1d9af2;
font-weight: bold;
}
</style>
</head>
<body>
<div id="recorder">
<div>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>
</div>
<div>
<span>Recording Duration: <span id="duration">0:00</span></span>
</div>
<div>
<span>File Size: <span id="filesize">0 MB</span></span>
</div>
</div>
<script>
const startBtn = document.getElementById('start');
const pauseBtn = document.getElementById('pause');
const stopBtn = document.getElementById('stop');
const durationEl = document.getElementById('duration');
const filesizeEl = document.getElementById('filesize');
let recording = false;
let duration = 0;
let filesize = 0;
// Start recording
startBtn.addEventListener('click', () => {
recording = true;
startBtn.setAttribute('disabled', 'true');
pauseBtn.removeAttribute('disabled');
stopBtn.removeAttribute('disabled');
});
// Pause recording
pauseBtn.addEventListener('click', () => {
recording = false;
pauseBtn.setAttribute('disabled', 'true');
});
// Stop recording
stopBtn.addEventListener('click', () => {
recording = false;
startBtn.removeAttribute('disabled');
pauseBtn.setAttribute('disabled', 'true');
stopBtn.setAttribute('disabled', 'true');
// Save recorded video in various formats
// Display recording duration and file size
durationEl.innerHTML = duration;
filesizeEl.innerHTML = filesize;
});
// Update recording duration and file size
setInterval(() => {
if(recording) {
duration++;
filesize += 0.5;
}
}, 1000);
</script>
</body>
</html>
```