Read more

Screen Recorder

Screen Recorder

body { font-family: Arial, sans-serif; background-color: #f0f0f0; } .container { text-align: center; padding: 20px; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); border-radius: 10px; max-width: 600px; margin: 0 auto; } h1 { color: #333; } video { width: 100%; max-width: 500px; margin: 20px auto; } button { padding: 10px 20px; font-size: 16px; background-color: #0074cc; color: #fff; border: none; border-radius: 5px; cursor: pointer; margin: 10px; } button:disabled { background-color: #ccc; cursor: not-allowed; } document.addEventListener('DOMContentLoaded', function () { const startRecordButton = document.getElementById('startRecord'); const stopRecordButton = document.getElementById('stopRecord'); const recordedVideo = document.getElementById('recordedVideo'); let recorder; startRecordButton.addEventListener('click', async () => { const stream = await navigator.mediaDevices.getDisplayMedia({ video: true }); recorder = new RecordRTC(stream, { type: 'video', mimeType: 'video/webm', bitsPerSecond: 128000, }); recorder.startRecording(); startRecordButton.disabled = true; stopRecordButton.disabled = false; }); stopRecordButton.addEventListener('click', () => { recorder.stopRecording(() => { const blob = recorder.getBlob(); recordedVideo.src = URL.createObjectURL(blob); }); startRecordButton.disabled = false; stopRecordButton.disabled = true; }); });