Stable Virtual Camera
Stable Virtual Camera
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(135deg, #16A085, #2E86C1);
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
max-width: 600px;
width: 100%;
}
h1 {
margin-bottom: 15px;
}
video, canvas {
width: 100%;
max-height: 300px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
button {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
background: #E74C3C;
color: white;
}
button:hover {
opacity: 0.8;
}
let video = document.getElementById("webcam");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let stream = null;
let isStabilizationOn = false;
let recorder, recordedChunks = [];
async function toggleCamera() {
if (stream) {
stream.getTracks().forEach(track => track.stop());
video.srcObject = null;
stream = null;
} else {
stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
}
}
function toggleStabilization() {
isStabilizationOn = !isStabilizationOn;
if (isStabilizationOn) {
startStabilization();
}
}
function startStabilization() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
function stabilizeFrame() {
if (!isStabilizationOn) return;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
requestAnimationFrame(stabilizeFrame);
}
stabilizeFrame();
}
function startRecording() {
recordedChunks = [];
let mediaRecorder = new MediaRecorder(canvas.captureStream(), { mimeType: "video/webm" });
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
let blob = new Blob(recordedChunks, { type: "video/webm" });
let url = URL.createObjectURL(blob);
let downloadBtn = document.getElementById("downloadBtn");
downloadBtn.style.display = "block";
downloadBtn.onclick = () => {
let link = document.createElement("a");
link.href = url;
link.download = "stabilized-video.webm";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
};
mediaRecorder.start();
setTimeout(() => mediaRecorder.stop(), 5000); // Record for 5 seconds
}
