Here is a complete responsive code for a screen recorder tool using the recordRTC library and colorful styling:
HTML code:
```html
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Screen Recorder Tool</h1>
<button id="startRecording">Start Recording</button>
<button id="stopRecording" disabled>Stop Recording</button>
<video id="recordingVideo" controls></video>
</div>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="scripts.js"></script>
</body>
</html>
```
CSS code (styles.css):
```css
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
video {
width: 100%;
border-radius: 5px;
margin-top: 20px;
}
```
JavaScript code (scripts.js):
```javascript
const startRecordingBtn = document.getElementById('startRecording');
const stopRecordingBtn = document.getElementById('stopRecording');
const recordingVideo = document.getElementById('recordingVideo');
let recorder;
startRecordingBtn.addEventListener('click', () => {
startRecordingBtn.disabled = true;
stopRecordingBtn.disabled = false;
navigator.mediaDevices.getDisplayMedia({
video: { mediaSource: 'screen' },
audio: true
}).then(stream => {
recorder = RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
recordingVideo.srcObject = stream;
recordingVideo.play();
}).catch(err => {
console.error('Error accessing screen recording:', err);
});
});
stopRecordingBtn.addEventListener('click', () => {
startRecordingBtn.disabled = false;
stopRecordingBtn.disabled = true;
recorder.stopRecording(() => {
const blob = recorder.getBlob();
recordingVideo.src = URL.createObjectURL(blob);
});
});
```
This code provides a simple and colorful screen recorder tool using the recordRTC library in the browser. Users can start and stop recording their screen with audio, and the recorded video will be displayed for playback. The tool is responsive and can be used on different device screens.
HTML code:
html
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Screen Recorder Tool</h1>
<button id="startRecording">Start Recording</button>
<button id="stopRecording" disabled>Stop Recording</button>
<video id="recordingVideo" controls></video>
</div>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="scripts.js"></script>
</body>
</html>
CSS code (styles.css):
css
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
video {
width: 100%;
border-radius: 5px;
margin-top: 20px;
}
JavaScript code (scripts.js):
javascript
const startRecordingBtn = document.getElementById('startRecording');
const stopRecordingBtn = document.getElementById('stopRecording');
const recordingVideo = document.getElementById('recordingVideo');
let recorder;
startRecordingBtn.addEventListener('click', () => {
startRecordingBtn.disabled = true;
stopRecordingBtn.disabled = false;
navigator.mediaDevices.getDisplayMedia({
video: { mediaSource: 'screen' },
audio: true
}).then(stream => {
recorder = RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
recordingVideo.srcObject = stream;
recordingVideo.play();
}).catch(err => {
console.error('Error accessing screen recording:', err);
});
});
stopRecordingBtn.addEventListener('click', () => {
startRecordingBtn.disabled = false;
stopRecordingBtn.disabled = true;
recorder.stopRecording(() => {
const blob = recorder.getBlob();
recordingVideo.src = URL.createObjectURL(blob);
});
});
This code provides a simple and colorful screen recorder tool using the recordRTC library in the browser. Users can start and stop recording their screen with audio, and the recorded video will be displayed for playback. The tool is responsive and can be used on different device screens.
This code creates a basic screen recording tool that allows users to record their screen along with audio and play back the recording within the browser. Here's a breakdown of how it works:
HTML (Structure)
The HTML provides the basic structure of the web page:
A container div houses the entire tool.
The page includes a title, two buttons for starting and stopping the recording, and a video element for playing back the recorded content.
External JavaScript libraries and the custom script are linked at the bottom of the body for functionality.
CSS (Styling)
The CSS styles the page to have a clean, simple look:
The body is styled with a light background and a standard font.
The container is centered on the page with some padding, a white background, and a subtle shadow to make it stand out.
Buttons are styled to look modern, with rounded corners, a blue background, and hover effects.
The video element is styled to take up the full width of the container, ensuring a good viewing experience.
JavaScript (Functionality)
The JavaScript adds interactivity and functionality to the tool:
It uses the navigator.mediaDevices.getDisplayMedia API to capture the screen and audio.
The RecordRTC library is used to handle the recording of the video stream.
The start button triggers the screen capture and recording process, and it disables itself while enabling the stop button.
The stop button stops the recording, enables the start button, and plays back the recorded video in the video element.
How It Works:
Start Recording:
When the user clicks "Start Recording," the browser asks for permission to capture the screen.
If the user grants permission, the screen is recorded along with audio, and the live video feed is shown in the video element.
Stop Recording:
When the user clicks "Stop Recording," the recording stops, and the recorded video is saved as a blob.
The video element's source is updated to play the recorded content.
Usage:
This tool is designed to be user-friendly, making it easy to record screen activities with just a few clicks. The design ensures it works well on various devices, and the video recording is immediately available for playback within the browser.
This code can be extended or modified to add additional features such as downloading the video, selecting different recording options, or customizing the recording duration.
कोई टिप्पणी नहीं:
एक टिप्पणी भेजें