The HTML code is a registration form with input fields for registration number and password and a video element to capture the user's photo. The JavaScript code uses the getUserMedia API to access the user's camera and display the video stream in the video element. When the upload button is clicked, the video frame is drawn to a canvas, the image data is retrieved from the canvas and added to a FormData object along with the registration number and password. The registration button has a retake and upload file button displaying when the regno of the user is found in the mysql database, using php pdo. The FormData object is then sent to the server via an XMLHttpRequest to the "upload_image.php" file for processing. The first PHP file "upload_image.php" connects to a MySQL database using PDO, retrieves the image data and registration number from the POST request, checks if the registration number exists in the database, if it does, it updates the image data in the table, if the registration number does not exist in the database, it returns an error message. The second PHP file "verify_user.php" is called via a fetch call to verify the user by checking registration number and password, if the user is verified, it will show the video container and allow user to take a photo. Here is my scripts: front-end page:members.php
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form id="registration-form" enctype="multipart/form-data">
<div>
<label for="regno">Registration Number:</label>
<input type="text" id="regno">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password">
</div>
<div>
<video id="video" width="400" height="300"></video>
</div>
<div>
<button type="button" id="verify">Verify</button>
<button type="button" id="upload">Upload Image</button>
<button type="button" id="retake">Retake</button>
<button type="button" id="uploadFile">Upload File</button>
</div>
</form>
<script>
// Get user media and display video stream
let video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream;
video.play();
});
// Capture image from video stream
let uploadButton = document.querySelector('#upload');
uploadButton.addEventListener('click', e => {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
let imageData = canvas.toDataURL('image/jpeg');
// Encrypt the parameters
let encryptedParams = CryptoJS.AES.encrypt(JSON.stringify({
imageData: imageData,
regno: document.querySelector('#regno').value,
password: document.querySelector('#password').value
}), 'secret key');
// Send encrypted parameters to server
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = () => {
if (xhttp.readyState == 4 && xhttp.status == 200) {
let response = JSON.parse(xhttp.response);
if (response.status == 'success') {
document.querySelector('#retake').style.display = 'none';
document.querySelector('#uploadFile').style.display = 'none';
} else {
alert('Error: ' + response.message);
}
}
};
xhttp.open("POST", "upload_image.php", true);
xhttp.send(encryptedParams);
});
// Verify_use.php
let verifyButton = document.querySelector('#verify');
verifyButton.addEventListener('click', e => {
let regno = document.querySelector('#regno').value;
let password = document.querySelector('#password').value;
// Encrypt the parameters
let encryptedParams = CryptoJS.AES.encrypt(JSON.stringify({
regno: regno,
password: password
}), 'secret key');
// Send encrypted parameters to server
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = () => {
if (xhttp.readyState == 4 && xhttp.status == 200) {
let response = JSON.parse(xhttp.response);
if (response.status == 'success') {
document.querySelector('#videoContainer').style.display = 'block';
} else {
alert('Error: ' + response.message);
}
}
};
xhttp.open("POST", "verify_user.php", true);
xhttp.send(encryptedParams);
});
</script>
</body>
</html>
upload_image.php script:
<?php
// upload_image.php
// Connect to MySQL database
$host = 'localhost';
$dbname = 'school';
$username = 'root';
$password = '';
try {
$conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Retrieve image data from POST request
$imageData = $_POST['imageData'];
$regno = $_POST['regno'];
// Check if registration number exists in database
$stmt = $conn->prepare('SELECT * FROM users WHERE regno = :regno');
$stmt->execute(['regno' => $regno]);
$result = $stmt->fetch();
// If registration number exists, update image data
if ($result) {
$stmt = $conn->prepare('UPDATE users SET image = :imageData WHERE regno = :regno');
$stmt->execute(['imageData' => $imageData, 'regno' => $regno]);
// Return success response
echo json_encode(['status' => 'success']);
} else {
// Return error response
echo json_encode(['status' => 'error', 'message' => 'Registration number does not exist in database']);
}
} catch(PDOException $e) {
echo json_encode(['status' => 'error', 'message' => $e->getMessage()]);
}
?>
verify_user.php:
<?php
// verify_user.php
// Connect to MySQL database
$host = 'localhost';
$dbname = 'school';
$username = 'root';
$password = '';
try {
$conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Retrieve registration number and password from GET request
$regno = $_GET['regno'];
$password = $_GET['password'];
// Check if registration number and password match in database
$stmt = $conn->prepare('SELECT image FROM users WHERE regno = :regno');
$stmt->execute(['regno' => $regno]);
$imageData = $stmt->fetchColumn();
// Convert image data to varchar
$imageString = base64_encode($imageData);
// Update image data in database
$stmt = $conn->prepare('UPDATE users SET image = :imageString WHERE regno = :regno');
$stmt->execute(['imageString' => $imageString, 'regno' => $regno]);
// Check if update was successful
if ($stmt->rowCount() > 0) {
echo 'Image data successfully updated to varchar in database.';
} else {
echo 'Error: Image data could not be updated to varchar in database.';
}
// Close database connection
$conn = null;
} catch(PDOException $e) {
echo json_encode(['status' => 'error', 'message' => $e->getMessage()]);
}
?>
