Creating a complete responsive screen recorder tool with all the mentioned features involves a complex implementation that goes beyond a simple code snippet. However, I can provide you with a basic example to get you started. Please note that building a fully-featured screen recorder involves additional considerations such as browser compatibility, security permissions, and server-side functionality for video format conversion, which are not covered in this example.
Here's a simple example using HTML, CSS, and JavaScript. This example utilizes the `navigator.mediaDevices` API for screen capturing and recording:
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</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#controls {
text-align: center;
}
#videoPreview {
width: 100%;
max-width: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="controls">
<button id="startRecording">Start Recording</button>
<button id="stopRecording" disabled>Stop Recording</button>
<button id="downloadVideo" disabled>Download Video</button>
</div>
<video id="videoPreview" autoplay></video>
<script>
let mediaRecorder;
let recordedChunks = [];
const startRecordingButton = document.getElementById('startRecording');
const stopRecordingButton = document.getElementById('stopRecording');
const downloadVideoButton = document.getElementById('downloadVideo');
const videoPreview = document.getElementById('videoPreview');
startRecordingButton.addEventListener('click', startRecording);
stopRecordingButton.addEventListener('click', stopRecording);
downloadVideoButton.addEventListener('click', downloadVideo);
async function startRecording() {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.onstop = handleStop;
startRecordingButton.disabled = true;
stopRecordingButton.disabled = false;
recordedChunks = [];
videoPreview.srcObject = stream;
videoPreview.captureStream = videoPreview.captureStream || videoPreview.mozCaptureStream;
mediaRecorder.start();
}
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
}
function handleStop() {
startRecordingButton.disabled = false;
stopRecordingButton.disabled = true;
downloadVideoButton.disabled = false;
const blob = new Blob(recordedChunks, { type: 'video/webm' });
videoPreview.src = URL.createObjectURL(blob);
}
function stopRecording() {
mediaRecorder.stop();
}
function downloadVideo() {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'recorded-video.webm';
a.click();
window.URL.revokeObjectURL(url);
}
</script>
</body>
</html>
Please note that this is a basic example and may require adjustments based on your specific requirements. Additionally, support for screen recording and audio capture may vary across browsers, and some browsers may require a secure connection (HTTPS) for certain features to work.
0 Comments