Reconhecimento facial em tempo real

PAGANINI NETO, J. R. P.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reconhecimento Facial em Tempo Real</title>
    
    <!-- Importa a biblioteca Face-api.js via CDN -->
    <script defer src="https://jsdelivr.net"></script>
    
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #202124;
            font-family: sans-serif;
            color: white;
        }
        .container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        video {
            border-radius: 10px;
            background-color: #000;
        }
        /* O canvas deve ficar exatamente em cima do vídeo para alinhar os desenhos */
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
        }
        #status {
            position: absolute;
            top: 20px;
            font-size: 1.2rem;
            background: rgba(0,0,0,0.7);
            padding: 10px 20px;
            border-radius: 20px;
        }
    </style>
</head>
<body>

    <div id="status">Carregando Modelos de IA...</div>

    <div class="container">
        <video id="video" width="720" height="560" autoplay muted playsinline></video>
    </div>

    <script>
        const video = document.getElementById('video');
        const statusDiv = document.getElementById('status');

        // URL pública contendo os modelos pré-treinados da face-api.js
        const MODEL_URL = 'https://jsdelivr.net';

        // 1. Carregar todos os modelos de IA necessários
        async function loadModels() {
            try {
                await Promise.all([
                    faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
                    faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
                    faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
                    faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL)
                ]);
                statusDiv.innerText = "Modelos carregados! Iniciando câmera...";
                startVideo();
            } catch (error) {
                statusDiv.innerText = "Erro ao carregar modelos.";
                console.error(error);
            }
        }

        // 2. Solicitar acesso à Webcam
        function startVideo() {
            navigator.mediaDevices.getUserMedia({ video: {} })
                .then(stream => {
                    video.srcObject = stream;
                    statusDiv.style.display = 'none'; // Esconde o status quando o vídeo inicia
                })
                .catch(err => {
                    statusDiv.innerText = "Erro ao acessar a câmera.";
                    console.error(err);
                });
        }

        // 3. Mapear o rosto quando o vídeo começar a rodar
        video.addEventListener('play', () => {
            // Cria a camada de desenho (canvas) sobre o vídeo
            const canvas = faceapi.createCanvasFromMedia(video);
            document.querySelector('.container').append(canvas);

            // Ajusta o tamanho do canvas para bater milimetricamente com o vídeo
            const displaySize = { width: video.width, height: video.height };
            faceapi.matchDimensions(canvas, displaySize);

            // Loop de processamento (roda a cada 100 milissegundos)
            setInterval(async () => {
                // Detecta rostos, traços estruturais (olhos, boca) e expressões
                const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
                    .withFaceLandmarks()
                    .withFaceExpressions();

                // Redimensiona as marcações para o tamanho correto da tela
                const resizedDetections = faceapi.resizeResults(detections, displaySize);

                // Limpa o frame anterior do canvas para não acumular desenhos
                canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

                // Desenha as caixas, pontos estruturais e emoções detectadas na tela
                faceapi.draw.drawDetections(canvas, resizedDetections);
                faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
                faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
                
            }, 100);
        });

        // Iniciar o processo básico
        loadModels();
    </script>
</body>
</html>