Free Tools

Screen Recorder

body { font-family: 'Arial', sans-serif; background-color: #f2f2f2; margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; } .container { text-align: center; background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; } #controls { margin-bottom: 20px; } button { background-color: #4CAF50; color: #fff; padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px; } button:disabled { background-color: #ccc; cursor: not-allowed; }document.addEventListener('DOMContentLoaded', function () { let recordRTC; const startRecordingBtn = document.getElementById('startRecording'); const stopRecordingBtn = document.getElementById('stopRecording'); const previewVideo = document.getElementById('preview'); startRecordingBtn.addEventListener('click', startRecording); stopRecordingBtn.addEventListener('click', stopRecording); function startRecording() { navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }) .then(function (stream) { recordRTC = RecordRTC(stream, { type: 'video', mimeType: 'video/webm', bitsPerSecond: 128000, }); previewVideo.srcObject = stream; previewVideo.play(); startRecordingBtn.disabled = true; stopRecordingBtn.disabled = false; recordRTC.startRecording(); }) .catch(function (error) { console.error('Error accessing media devices:', error); }); } function stopRecording() { recordRTC.stopRecording(function (videoURL) { previewVideo.src = videoURL; startRecordingBtn.disabled = false; stopRecordingBtn.disabled = true; // You can save the recorded video or do other things with the URL // For example, you can use an AJAX request to send the video data to the server. // Uncomment the following lines if you want to download the recorded video // const a = document.createElement('a'); // a.href = videoURL; // a.download = 'recorded-video.webm'; // a.click(); }); } });