HTML实现网页摄像头和拍照功能

Ynchen

发布于 2025-12-21 13:37:34

110

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>摄像头拍照</title>
    <style>
        body {
            font-family: "Segoe UI", Arial, sans-serif;
            background: #f5f7fa;
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 32px;
            font-weight: 600;
        }

        .btn-group {
            margin-bottom: 25px;
        }

        button {
            padding: 10px 20px;
            margin: 0 8px;
            font-size: 15px;
            cursor: pointer;
            border: none;
            border-radius: 6px;
            background: #4a90e2;
            color: #fff;
            transition: 0.25s;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        button:hover:not(:disabled) {
            background: #357ABD;
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0,0,0,0.12);
        }

        button:disabled {
            background: #cfd8e3;
            cursor: not-allowed;
            box-shadow: none;
        }

        .container {
            display: flex;
            gap: 30px;
            margin-top: 20px;
        }

        .card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            text-align: center;
        }

        .card h3 {
            margin-bottom: 15px;
            color: #444;
            font-weight: 500;
        }

        video, canvas {
            width: 480px;
            height: 360px;
            border-radius: 10px;
            border: 1px solid #ddd;
            background: #000;
            object-fit: cover;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
    </style>
</head>
<body>
    <h1>摄像头拍照</h1>

    <div class="btn-group">
        <button id="startBtn">开启摄像头</button>
        <button id="captureBtn" disabled>拍照</button>
        <button id="downloadBtn" disabled>下载照片</button>
    </div>

    <div class="container">
        <div class="card">
            <h3>实时画面</h3>
            <video id="video" autoplay></video>
        </div>

        <div class="card">
            <h3>拍摄照片</h3>
            <canvas id="canvas"></canvas>
        </div>
    </div>

    <script>
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const startBtn = document.getElementById('startBtn');
        const captureBtn = document.getElementById('captureBtn');
        const downloadBtn = document.getElementById('downloadBtn');

        canvas.width = 480;
        canvas.height = 360;

        startBtn.addEventListener('click', async () => {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({
                    video: { width: 480, height: 360 }
                });
                video.srcObject = stream;
                startBtn.disabled = true;
                captureBtn.disabled = false;
            } catch (error) {
                console.error('摄像头启动失败:', error);
                alert('无法访问摄像头');
            }
        });

        captureBtn.addEventListener('click', () => {
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            downloadBtn.disabled = false;
        });

        downloadBtn.addEventListener('click', () => {
            canvas.toBlob(blob => {
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `photo_${Date.now()}.png`;
                a.click();
                URL.revokeObjectURL(url);
            });
        });
    </script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-12-12，如有侵权请联系 cloudcommunity@tencent.com 删除

canvas