<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secret Camera</title>
    <!-- Add any additional stylesheets or scripts here -->
</head>
<body>
    <video id="video" width="100%" height="100%" autoplay></video>
    <!-- Add control buttons (Start/Stop) if needed -->
</body>
</html>

#video {
    border: 2px solid #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

const video = document.getElementById('video');

async function startCamera() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        video.srcObject = stream;
    } catch (error) {
        console.log('Error accessing camera:', error);
    }
}

// Call startCamera() to begin streaming
startCamera();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.