"Discover the Ultimate Resource for Online Tools: GreatOnlineToolsFindAllTypesOfQuickAndFreeTools" is your go-to guide for finding top-notch tools across various categories. From productivity boosters to creative essentials, explore curated lists that save you time and effort. Stay ahead with our handpicked selection of quick, free, and efficient tools!
Screen Recorder
Screen Recorder Tool
Screen Recorder
/* General Styling */
body {
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
}
h1 {
color: #4CAF50;
font-size: 2rem;
margin-bottom: 20px;
}
#controls {
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
.start {
background-color: #4CAF50;
color: white;
}
.start:hover {
background-color: #45a049;
}
.stop {
background-color: #f44336;
color: white;
}
.stop:hover {
background-color: #e53935;
}
.download {
background-color: #FF9800;
color: white;
}
.download:hover {
background-color: #fb8c00;
}
.video-player {
margin-top: 20px;
width: 100%;
max-width: 480px;
border-radius: 8px;
background-color: #000;
}
let recorder; // To hold the recorder instance
let recordedBlob; // To hold the recorded video blob
// DOM elements
const startBtn = document.getElementById("start-recording");
const stopBtn = document.getElementById("stop-recording");
const downloadBtn = document.getElementById("download-video");
const videoElement = document.getElementById("video");
async function startRecording() {
try {
// Request screen capture with audio
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true
});
// Initialize the recorder with the stream
recorder = RecordRTC(stream, {
type: 'video',
mimeType: 'video/webm',
video: { width: 1280, height: 720 },
audio: true
});
// Start the recording
recorder.startRecording();
// Disable the start button and enable the stop button
startBtn.disabled = true;
stopBtn.disabled = false;
// Stop the recording if the user stops sharing the screen
stream.getVideoTracks()[0].onended = () => {
stopBtn.disabled = true;
};
} catch (error) {
console.error("Error accessing the screen: ", error);
alert("Unable to access the screen. Please try again.");
}
}
function stopRecording() {
recorder.stopRecording(() => {
recordedBlob = recorder.getBlob();
// Display the video
videoElement.src = URL.createObjectURL(recordedBlob);
videoElement.style.display = "block";
// Enable download button
downloadBtn.disabled = false;
// Re-enable the start button and disable the stop button
startBtn.disabled = false;
stopBtn.disabled = true;
});
}
function downloadRecording() {
const link = document.createElement('a');
link.href = URL.createObjectURL(recordedBlob);
link.download = "screen-recording.webm"; // Download the video
link.click();
}
// Event listeners for buttons
startBtn.addEventListener('click', startRecording);
stopBtn.addEventListener('click', stopRecording);
downloadBtn.addEventListener('click', downloadRecording);
No comments:
Post a Comment