Video Recorder

Screen Recorder Tool

body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); text-align: center; } h1 { color: #333; } .controls { margin-top: 20px; } button { padding: 10px 20px; font-size: 16px; background-color: #007BFF; color: #fff; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px; } button:disabled { background-color: #ccc; cursor: not-allowed; } video { width: 100%; max-width: 800px; margin-top: 20px; } const startRecordingButton = document.getElementById('startRecording'); const stopRecordingButton = document.getElementById('stopRecording'); const recordingVideo = document.getElementById('recording'); let recorder; startRecordingButton.addEventListener('click', () => { startRecordingButton.disabled = true; stopRecordingButton.disabled = false; const stream = navigator.mediaDevices.getDisplayMedia({ video: true }); recorder = RecordRTC(stream, { type: 'video', mimeType: 'video/webm', }); recorder.startRecording(); recorder.stream = stream; }); stopRecordingButton.addEventListener('click', () => { startRecordingButton.disabled = false; stopRecordingButton.disabled = true; recorder.stopRecording(() => { const blob = recorder.getBlob(); recordingVideo.src = URL.createObjectURL(blob); recorder.stream.getTracks().forEach((track) => track.stop()); }); });