人脸美妆新年活动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人脸美妆示例</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/face-api.js"></script>
</head>
<body>
    <video id="video" width="640" height="480" autoplay muted></video>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
        async function startVideo() {
            const video = document.getElementById('video');
            const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false });
            video.srcObject = stream;
        }

        async function loadModels() {
            await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
            await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
        }

        async function detectFaces() {
            const video = document.getElementById('video');
            const canvas = document.getElementById('canvas');
            const displaySize = { width: video.width, height: video.height };
            faceapi.matchDimensions(canvas, displaySize);

            setInterval(async () => {
                const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks();
                const resizedDetections = faceapi.resizeResults(detections, displaySize);
                canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
                faceapi.draw.drawDetections(canvas, resizedDetections);
                // 在这里添加美妆效果
            }, 100);
        }

        startVideo();
        loadModels().then(detectFaces);
    </script>
</body>
</html>