SCREEN RECORDER TOOL

Here's a complete code for a screen recorder tool using RecordRTC library. This example includes basic features like start/stop recording, video preview, and download recorded video. *HTML:* ```

Screen Recorder

``` CSS (in style.css file): ``` body { font-family: Arial, sans-serif; background-color: #f0f0f0; } .container { max-width: 800px; margin: 40px auto; padding: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } button { padding: 10px 20px; border: none; border-radius: 5px; background-color: #4CAF50; color: #fff; cursor: pointer; } button:disabled { opacity: 0.5; cursor: not-allowed; } #video-preview { margin-top: 20px; border: 1px solid #ddd; border-radius: 5px; } ``` JavaScript (in script.js file): ``` let recorder; let recordedBlobs; let videoPreview = document.getElementById('video-preview'); let startRecordingButton = document.getElementById('start-recording'); let stopRecordingButton = document.getElementById('stop-recording'); let downloadVideoButton = document.getElementById('download-video'); startRecordingButton.addEventListener('click', startRecording); stopRecordingButton.addEventListener('click', stopRecording); async function startRecording() { try { let stream = await navigator.mediaDevices.getDisplayMedia({ video: { cursor: 'always' }, audio: true }); videoPreview.srcObject = stream; videoPreview.play(); recordedBlobs = []; recorder = new RecordRTC(stream, { type: 'video' }); recorder.startRecording(); startRecordingButton.disabled = true; stopRecordingButton.disabled = false; } catch (error) { console.error(error); } } function stopRecording() { recorder.stopRecording(() => { let blob = recorder.getBlob(); recordedBlobs.push(blob); videoPreview.srcObject = null; videoPreview.src = URL.createObjectURL(blob); videoPreview.play(); startRecordingButton.disabled = false; stopRecordingButton.disabled = true; downloadVideoButton.disabled = false; }); } downloadVideoButton.addEventListener('click', () => { let blob = new Blob(recordedBlobs, { type: 'video/webm' }); let url = URL.createObjectURL(blob); let a = document.createElement('a'); a.href = url; a.download = 'recorded-video.webm'; a.click(); URL.revokeObjectURL(url); }); ``` This code creates a basic screen recorder tool with start/stop recording and download video features. You can customize the styling and add more features as per your requirements. Note that this code uses the `getDisplayMedia` API to capture the screen, which requires permission from the user. Also, the recorded video is in WebM format, which might not be compatible with all media players. You can modify the code to support other formats if needed.