Prompt Details
Model
(r1)
Token size
42
Example input
[Tool name]: Screen Recorder
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Recorder</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#preview {
width: 100%;
height: auto;
max-height: 500px;
background-color: black;
border-radius: 5px;
margin-bottom: 20px;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
#startBtn {
background-color: #4CAF50;
color: white;
}
#stopBtn {
background-color: #f44336;
color: white;
display: none;
}
button:hover {
opacity: 0.9;
}
.toggle-container {
display: flex;
align-items: center;
gap: 5px;
}
#timer {
font-size: 18px;
font-weight: bold;
margin-left: auto;
}
@media (max-width: 600px) {
.controls {
flex-direction: column;
align-items: stretch;
}
#timer {
margin-left: 0;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">
<video id="preview" muted playsinline></video>
<div class="controls">
<button id="startBtn">Start Recording</button>
<button id="stopBtn">Stop Recording</button>
<div class="toggle-container">
<input type="checkbox" id="audioToggle">
<label for="audioToggle">Include Audio</label>
</div>
<select id="formatSelect">
<option value="mp4">MP4</option>
<option value="gif">GIF</option>
</select>
<div id="timer">00:00:00</div>
</div>
</div>
<script>
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const audioToggle = document.getElementById('audioToggle');
const formatSelect = document.getElementById('formatSelect');
const timerDisplay = document.getElementById('timer');
const preview = document.getElementById('preview');
let mediaRecorder;
let recordedChunks = [];
let timerInterval;
let startTime;
async function startRecording() {
try {
const screenStream = await navigator.mediaDevices.getDisplayMedia({
video: { mediaSource: 'screen' },
audio: false
});
let combinedStream = screenStream;
if (audioToggle.checked) {
const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
combinedStream = new MediaStream([
...screenStream.getVideoTracks(),
...audioStream.getAudioTracks()
]);
}
preview.srcObject = combinedStream;
preview.play();
const mimeType = formatSelect.value === 'gif' ? 'video/webm' : 'video/webm;codecs=vp9';
mediaRecorder = new MediaRecorder(combinedStream, { mimeType });
mediaRecorder.ondataavailable = event => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = handleStop;
mediaRecorder.start(100);
startBtn.style.display = 'none';
stopBtn.style.display = 'inline-block';
startTimer();
} catch (err) {
console.error('Error starting recording:', err);
alert('Error starting recording: ' + err.message);
}
}
function handleStop() {
const blob = new Blob(recordedChunks, {
type: mediaRecorder.mimeType
});
const url = URL.createObjectURL(blob);
const extension = formatSelect.value;
const filename = `recording_${new Date().toISOString()}.${extension}`;
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(() => {
URL.revokeObjectURL(url);
document.body.removeChild(a);
}, 100);
recordedChunks = [];
preview.srcObject = null;
stopTimer();
}
function startTimer() {
startTime = Date.now();
timerInterval = setInterval(() => {
const elapsed = Date.now() - startTime;
const hours = Math.floor(elapsed / 3600000).toString().padStart(2, '0');
const minutes = Math.floor((elapsed % 3600000) / 60000).toString().padStart(2, '0');
const seconds = Math.floor((elapsed % 60000) / 1000).toString().padStart(2, '0');
timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}, 1000);
}
function stopTimer() {
clearInterval(timerInterval);
timerDisplay.textContent = '00:00:00';
}
startBtn.addEventListener('click', startRecording);
stopBtn.addEventListener('click', () => {
mediaRecorder.stop();
startBtn.style.display = 'inline-block';
stopBtn.style.display = 'none';
});
// Stop all tracks when window closes
window.addEventListener('beforeunload', () => {
if (mediaRecorder && mediaRecorder.state === 'recording') {
mediaRecorder.stop();
}
});
</script>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
1
Favorites
19
Views
R1
Record your screen with audio in one click using this free browser-based tool. Features format selection (MP4/GIF), live timer, and instant downloads. Ideal for creators, educators, and remote teams. Cross-platform, no signup, and completely client-side privacy.
...more
Added over 1 month ago
