我创建了教育网站和一个系统,当我注册时,我会保存注册者的脸部照片。然后,当你想做一个系统问题时,你必须确保这个人确实在做。然而,在验证页面却出现错误:
Box.ts:35 Uncaught (in promise)
错误:Box.constructor - 预期框为 IBoundingBox | IRect,改为 {"x":null,"y":null,"width":null,"height":null}`
这是我的完整代码,这是我的目录
我多次尝试调试它,并尝试调整画布或视频的大小。接下来我可以尝试什么?
<?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);