ChatGPT Image prompt: <!DOCTYPE html> <html lang="en"> <head> <meta...
225views
0favorites
Model used
ChatGPT ImageGPT-4Category
nsfwGeneration parameters
Image2048x2048
Prompt
<!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 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#video-preview {
max-width: 100%;
border: 2px solid #ccc;
border-radius: 8px;
}
#controls {
margin-top: 20px;
display: flex;
justify-content: space-around;
width: 100%;
}
#download-btn {
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<video id="video-preview" autoplay muted playsinline></video>
<div id="controls">
<button id="start-btn">Start Recording</button>
<button id="pause-btn" disabled>Pause</button>
<button id="stop-btn" disabled>Stop Recording</button>
<button id="download-btn" disabled>Download</button>
</div>
<script>
let mediaRecorder;
let recordedChunks = [];
let isRecording = false;
const videoPreview = document.getElementById('video-preview');
const startBtn = document.getElementById('start-btn');
const pauseBtn = document.getElementById('pause-btn');
const stopBtn = document.getElementById('stop-btn');
const downloadBtn = document.getElementById('download-btn');
startBtn.addEventListener('click', startRecording);
pauseBtn.addEventListener('click', pauseRecording);
stopBtn.addEventListener('click', stopRecording);
downloadBtn.addEventListener('click', downloadRecording);
async function startRecording() {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
mediaRecorder = new MediaRecorder(stream);
recordedChunks = [];
mediaRecorder.ondataavailable = (e) => {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
videoPreview.src = URL.createObjectURL(blob);
downloadBtn.href = videoPreview.src;
};
mediaRecorder.start();
isRecording = true;
startBtn.disabled = true;
pauseBtn.disabled = false;
stopBtn.disabled = false;
downloadBtn.disabled = true;
} catch (error) {
console.error('Error accessing media devices:', error);
}
}
function pauseRecording() {
if (isRecording) {
mediaRecorder.pause();
pauseBtn.innerText = 'Resume';
} else {
mediaRecorder.resume();
pauseBtn.innerText = 'Pause';
}
isRecording = !isRecording;
}
function stopRecording() {
if (isRecording) {
mediaRecorder.stop();
startBtn.disabled = false;
pauseBtn.disabled = true;
stopBtn.disabled = true;
downloadBtn.disabled = false;
}
}
function downloadRecording() {
if (!isRecording) {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'recorded-video.webm';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
}
</script>
</body>
</html>
More by @55023b143fc
Comments (0)
Please sign in to comment