<!DOCTYPE html>
<html>
<head>
<title>Save Video Stream to Local File</title>
</head>
<body>
<video id="videoPlayer" autoplay width="640" height="360" controls></video>
<button onclick="startRecording()">Start Recording</button>
<button onclick="stopRecording()">Stop Recording</button>
<script>
let mediaRecorder;
let recordedChunks = [];
async function startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoPlayer.srcObject = stream;
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
saveVideo();
};
mediaRecorder.start();
console.log('Recording started...');
} catch (err) {
console.error('Error accessing media devices:', err);
}
}
function stopRecording() {
mediaRecorder.stop();
console.log('Recording stopped.');
}
function saveVideo() {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'recorded_video.webm';
a.click();
console.log('Video saved to local file.');
}
</script>
</body>
</html>
