Want to learn how to create images like this one?
Check out our crash course in prompt engineering & AI art generation!

55023b143fc posted 6 months ago
67 views 0 comments
<!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>
Create
Copy
Copied!
Share

Generation parameters

Model used

Prompt category