Created
May 14, 2025 07:17
-
-
Save jdmichaud/f7f1cf351d9c4cd32fb842ab2f2375bf to your computer and use it in GitHub Desktop.
Screen recorder
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Screen Recorder</title> | |
| <script src="main.js"></script> | |
| </head> | |
| <body> | |
| <button id="start">Record Screen</button> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function getFormattedDate(date) { | |
| const year = date.getFullYear(); | |
| const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed | |
| const day = String(date.getDate()).padStart(2, '0'); | |
| const hours = String(date.getHours()).padStart(2, '0'); | |
| const minutes = String(date.getMinutes()).padStart(2, '0'); | |
| const seconds = String(date.getSeconds()).padStart(2, '0'); | |
| return `${year}${month}${day}-${hours}${minutes}${seconds}`; | |
| } | |
| function main() { | |
| const startBtn = document.getElementById('start'); | |
| startBtn.addEventListener('click', async e => { | |
| const captureStream = await navigator.mediaDevices.getDisplayMedia({ | |
| video: true, | |
| audio: false, | |
| // Keep the recording on the current tab, do not let the user choose the | |
| // tab or window | |
| preferCurrentTab: true, | |
| }); | |
| const recorder = new MediaRecorder(captureStream); | |
| const chunks = []; | |
| recorder.addEventListener('dataavailable', e => { | |
| chunks.push(e.data); | |
| }); | |
| recorder.addEventListener('stop', stopEvent => { | |
| // Create a blob from the chunks | |
| const blob = new Blob(chunks, { type: 'video/webm' }); | |
| const url = URL.createObjectURL(blob); | |
| // Create a link to download the recorded video | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `screen-recording-${getFormattedDate(new Date())}.webm`; | |
| a.click(); | |
| // Clean up | |
| URL.revokeObjectURL(url); | |
| }); | |
| recorder.start(); | |
| }); | |
| console.log('ready'); | |
| } | |
| window.onload = main; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment