Scribd
Upload
23 views

Arfat

This document describes a screen recording tool that uses the browser's media capabilities to record the user's screen and audio. It includes HTML and JavaScript code to build a simple interface with start and stop buttons. When start is clicked, it uses the media devices API to get the user's media stream and starts recording with the RecordRTC library. When stop is clicked, it stops recording and saves the video blob, displaying it in the preview video element.

Uploaded by

Arfat Shaikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
23 views

Arfat

This document describes a screen recording tool that uses the browser's media capabilities to record the user's screen and audio. It includes HTML and JavaScript code to build a simple interface with start and stop buttons. When start is clicked, it uses the media devices API to get the user's media stream and starts recording with the RecordRTC library. When stop is clicked, it stops recording and saves the video blob, displaying it in the preview video element.

Uploaded by

Arfat Shaikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Recorder Tool</title>
<start>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
color: #2196F3;
}

.controls {
margin-top: 20px;
}

button {
padding: 10px 20px;
font-size: 16px;
background-color: #2196F3;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}

button:disabled {
background-color: #dcdcdc;
cursor: not-allowed;
}

</start>
</head>
<body>
<div class="container">
<h1>Screen Recorder Tool</h1>
<div class="controls">
<button id="startButton">Start Recording</button>
<button id="stopButton" disabled>Stop Recording</button>
</div>
<video id="previewVideo" controls></video>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/recordrtc/5.6.0/RecordRTC.min.js"></
script>
<script>
// Global variables
let recorder;
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const previewVideo = document.getElementById('previewVideo');

// Attach event listeners


startButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

// Function to start recording


function startRecording() {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function (stream) {
previewVideo.srcObject = stream;
recorder = RecordRTC(stream, {
type: 'video',
mimeType: 'video/webm',
});
recorder.startRecording();
startButton.disabled = true;
stopButton.disabled = false;
})
.catch(function (error) {
console.error('Error accessing media devices:', error);
});
}

// Function to stop recording


function stopRecording() {
recorder.stopRecording(function () {
let blob = recorder.getBlob();
previewVideo.src = URL.createObjectURL(blob);
recorder.destroy();
recorder = null;
startButton.disabled = false;
stopButton.disabled = true;
});
}

</script>
</body>
</html>

You might also like