我的人脸验证出错:预期框为 IBoundingBox |矩形

问题描述 投票:0回答:1

我创建了教育网站和一个系统,当我注册时,我会保存注册者的脸部照片。然后,当你想做一个系统问题时,你必须确保这个人确实在做。然而,在验证页面却出现错误:

Box.ts:35 Uncaught (in promise)
错误:Box.constructor - 预期框为 IBoundingBox | IRect,改为 {"x":null,"y":null,"width":null,"height":null}`

这是我的完整代码,这是我的目录

enter image description here

我多次尝试调试它,并尝试调整画布或视频的大小。接下来我可以尝试什么?

javascript codeigniter error-handling face-recognition face-api
1个回答
0
投票
<?php
session_start();
include 'fungsiPHP/connection.php';
error_log("Koneksi database berhasil");
error_log("Sesi username di EvaluasiSoal.php awal: " . 
(isset($_SESSION['username']) ? $_SESSION['username'] : 'tidak ada'));

// Cek jika pengguna tidak login
if (!isset($_SESSION['username'])) {
error_log("Pengguna tidak login, mengarahkan ke loginRegist.php");
header("Location: loginRegist.php");
exit;
}

$username = $_SESSION['username'];
error_log("Username dari session: " . $username);

// Ambil jalur file gambar wajah dari database
$sql = "SELECT face_image_path FROM users WHERE username = ?";
$stmt = $conn->prepare($sql);

if ($stmt === false) {
     error_log("Persiapan statement gagal: " . $conn->error);
} else {
     error_log("Persiapan statement berhasil");
}

$stmt->bind_param("s", $username);

if ($stmt->execute() === false) {
    error_log("Eksekusi statement gagal: " . $stmt->error);
} else {
    error_log("Eksekusi statement berhasil");
}

$stmt->bind_result($face_image_path);
$stmt->fetch();
$stmt->close();
$conn->close();

error_log("Jalur gambar di EvaluasiSoal.php: " . $face_image_path);

if (empty($face_image_path)) {
    error_log("face_image_path kosong atau tidak ditemukan!");
} else {
    error_log("face_image_path: " . $face_image_path);
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Soal & Evaluasi</title>
<link rel="stylesheet" href="CSS/menu.css" />
</head>
<body style="background-image: url('img/background.png'); background-size: 
cover; background-repeat: no-repeat; background-attachment:fixed;">
<!-- NAVBAR -->
<header>
    <nav class="navbar">
        <div class="logo">
            <img src="img/logo.png" alt="Logo" />
        </div>
        <ul class="menu">
            <li><a href="dashboard.php">Dashboard</a></li>
            <li><a href="pilihanMatkul.php">Mata Kuliah</a></li>
            <li><a href="paring.php">Papan Peringkat</a></li>
            <li><a href="aboutUs.php">Tentang Kami</a></li>
            <li>
                <?php
                if (isset($_SESSION["username"])) {
                    echo "Hi! $username";
                } else {
                    echo "Hi!";
                }
                ?>
            </li>
            <li><a href="profil.php"><img src="img/avatar.png" alt="User" class="user-icon"></a></li>
        </ul>
        <div class="menu-toggle">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </nav>
</header>

<!-- Verifikasi Wajah -->
<div id="face-verification">
    <h3>Verifikasi Wajah</h3>
    <video id="video" width="320" height="240" autoplay></video><br>
    <button id="verify">Verifikasi Wajah</button>
</div>

<script src="models/face-api.js"></script>
<!-- <script src="models/face-api.js.map"></script>
<script src="models/face-api.min.js"></script>
 -->
<script>
async function loadModels() {
    await faceapi.nets.tinyFaceDetector.loadFromUri('/ExaTrain2.0/models');
    await faceapi.nets.faceLandmark68Net.loadFromUri('/ExaTrain2.0/models');
    await faceapi.nets.faceRecognitionNet.loadFromUri('/ExaTrain2.0/models');
    await faceapi.nets.ssdMobilenetv1.loadFromUri('/ExaTrain2.0/models');
    console.log("Semua model telah dimuat");
}

async function startVideo() {
    const video = document.getElementById('video');
    navigator.mediaDevices.getUserMedia({ video: {} })
        .then(stream => video.srcObject = stream)
        .catch(err => console.error("Gagal memulai video:", err));
}

document.getElementById('verify').addEventListener('click', async () => {
    const video = document.getElementById('video');
    await loadModels(); // Pastikan semua model dimuat sebelum deteksi

    const faceMatcher = new faceapi.FaceMatcher(await loadReferenceImage(), 0.6);
    const detection = await faceapi.detectSingleFace(video, new faceapi.SsdMobilenetv1Options()).withFaceLandmarks().withFaceDescriptor();

    if (detection) {
        const box = detection.detection.box;
        console.log("Deteksi bounding box dari video:", box);
        if (isValidBox(box)) {
            console.log("Deteksi wajah:", detection);
            console.log("Bounding Box:", box);
            const result = faceMatcher.findBestMatch(detection.descriptor);
            if (result.label === 'user') {
                alert('Verifikasi wajah berhasil!');
                window.location.href = 'index.php';
            } else {
                alert('Verifikasi wajah gagal!');
            }
        } else {
            console.error('Bounding box deteksi tidak valid:', box);
        }
    } else {
        console.error('Tidak ada wajah yang terdeteksi!');
        alert('Tidak ada wajah yang terdeteksi!');
    }
});

function isValidBox(box) {
    return box && typeof box.x === 'number' && typeof box.y === 'number' && typeof box.width === 'number' && typeof box.height === 'number';
}

async function loadReferenceImage() {
    const imgPath = "<?php echo $face_image_path; ?>";
    const imgUrl = `http://localhost:8888/ExaTrain2.0/fungsiPHP/${imgPath}`;
    console.log("URL gambar:", imgUrl); // Debugging tambahan
    if (!imgPath) {
        console.error("Jalur gambar tidak valid");
        return;
    }
    try {
        const img = await faceapi.fetchImage(imgUrl);
        console.log("Gambar referensi dimuat:", img);
        const detections = await faceapi.detectSingleFace(img, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceDescriptor();
        console.log("Deteksi wajah referensi:", detections);
        if (detections) {
            const box = detections.detection.box;
            console.log("Deteksi bounding box dari gambar referensi:", box);
            if (isValidBox(box)) {
                console.log("Bounding Box Referensi:", box); // Logging tambahan
                return new faceapi.LabeledFaceDescriptors('user', [detections.descriptor]);
            } else {
                console.error("Bounding box deteksi tidak valid:", box);
            }
        } else {
            console.error("Deteksi wajah pada gambar referensi gagal");
        }
    } catch (error) {
        console.error("Gagal memuat gambar referensi:", error);
    }
}

loadModels().then(startVideo);
© www.soinside.com 2019 - 2024. All rights reserved.