Sujay's Free Tools(responsive screen recorder tool)
Creating a complete responsive screen recorder tool with colorful styling involves a substantial amount of code, and providing the entire code here might be impractical. However, I can provide you with a simplified example using HTML, CSS, and JavaScript, utilizing the RecordRTC library. Please note that this example won't cover all possible features, but it will give you a starting point:
HTML (index.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Screen Recorder</title>
</head>
<body>
<div id="app">
<button id="startRecording">Start Recording</button>
<button id="stopRecording" disabled>Stop Recording</button>
<video id="recordedVideo" controls></video>
</div>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS (styles.css):
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#app {
text-align: center;
}
button {
font-size: 16px;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
video {
margin-top: 20px;
width: 100%;
max-width: 600px;
}
```
JavaScript (script.js):
```javascript
document.addEventListener('DOMContentLoaded', () => {
const startRecordingBtn = document.getElementById('startRecording');
const stopRecordingBtn = document.getElementById('stopRecording');
const recordedVideo = document.getElementById('recordedVideo');
let recorder;
startRecordingBtn.addEventListener('click', () => {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then((stream) => {
recorder = RecordRTC(stream, {
type: 'video',
mimeType: 'video/webm',
});
recorder.startRecording();
startRecordingBtn.disabled = true;
stopRecordingBtn.disabled = false;
})
.catch((error) => console.error('Error accessing media devices:', error));
});
stopRecordingBtn.addEventListener('click', () => {
recorder.stopRecording(() => {
recordedVideo.src = recorder.toURL();
});
startRecordingBtn.disabled = false;
stopRecordingBtn.disabled = true;
});
});
```
Make sure to include the necessary RecordRTC library via CDN in the HTML file. This example provides a basic structure with start and stop recording buttons, and a video element to preview the recorded content. Feel free to customize it further based on your requirements.
Comments
Post a Comment