Screen Recorder Tool
Creating a complete responsive screen recorder tool using the RecordRTC library involves setting up HTML, CSS, and JavaScript. Below is a simple example that showcases how to implement a basic screen recorder with colorful styling.
### HTML (index.html)
```html
Screen Recorder Tool
```
### CSS (styles.css)
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #4a90e2;
margin-bottom: 20px;
}
.controls {
margin-bottom: 20px;
}
button {
background-color: #4a90e2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 0 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #357ab8;
}
video {
width: 100%;
height: auto;
border: 2px solid #4a90e2;
border-radius: 5px;
}
```
### JavaScript (script.js)
```javascript
let recorder;
let videoElement = document.getElementById('video');
document.getElementById('start').onclick = async () => {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true
});
recorder = RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
document.getElementById('start').disabled = true;
document.getElementById('stop').disabled = false;
recorder.stream = stream; // Store the stream for stopping later
};
document.getElementById('stop').onclick = () => {
recorder.stopRecording(() => {
const blob = recorder.getBlob();
videoElement.src = URL.createObjectURL(blob);
videoElement.play();
// Stop the stream
recorder.stream.getTracks().forEach(track => track.stop());
document.getElementById('start').disabled = false;
document.getElementById('stop').disabled = true;
});
};
```
Explanation:
1. **HTML**: Sets up the structure of the screen recorder, including buttons for starting and stopping the recording, and a video element for playback.
2. **CSS**: Provides colorful styling to make the UI visually appealing and responsive.
3. **JavaScript**: Handles the screen recording using the RecordRTC library. It starts recording when the "Start Recording" button is clicked, and stops recording when the "Stop Recording" button is clicked, displaying the recorded video in the video element.
### Usage:
1. Save the code in three separate files (`index.html`, `styles.css`, and `script.js`).
2. Open `index.html` in a browser that supports `getDisplayMedia` (like Chrome or Firefox).
3. Click "Start Recording" to capture your screen and "Stop Recording" to view the recorded video.
### Note:
Make sure your browser allows screen recording and has the appropriate permissions set. You may need to run this over HTTPS for full functionality.
Comments
Post a Comment