<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&nbs
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Recorder Tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Screen Recorder Tool</h1>
<div class="controls">
<button id="startBtn">Start Recording</button>
<button id="stopBtn" disabled>Stop Recording</button>
<button id="downloadBtn" disabled>Download Recording</button>
</div>
<video id="videoPreview" controls></video>
</div>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #333;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 100%;
max-width: 600px;
}
h1 {
margin-bottom: 20px;
color: #ff7e5f;
}
.controls {
margin-bottom: 20px;
}
button {
background-color: #ff7e5f;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
button:hover:not(:disabled) {
background-color: #eb6d4e;
}
video {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const downloadBtn = document.getElementById('downloadBtn');
const videoPreview = document.getElementById('videoPreview');
let recorder;
let recordedBlobs;
startBtn.addEventListener('click', async () => {
startBtn.disabled = true;
stopBtn.disabled = false;
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true
});
videoPreview.srcObject = stream;
videoPreview.play();
recorder = new RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
});
stopBtn.addEventListener('click', () => {
stopBtn.disabled = true;
downloadBtn.disabled = false;
startBtn.disabled = false;
recorder.stopRecording(() => {
const blob = recorder.getBlob();
recordedBlobs = blob;
videoPreview.src = URL.createObjectURL(blob);
videoPreview.srcObject = null;
videoPreview.play();
});
let tracks = videoPreview.srcObject.getTracks();
tracks.forEach(track => track.stop());
});
downloadBtn.addEventListener('click', () => {
if (recordedBlobs) {
const url = URL.createObjectURL(recordedBlobs);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'recording.webm';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
}
});
No comments:
Post a Comment