this is my code
# Define a global variable to track whether the video feed has finished
def detect_faces(username):
global video_feed_finished
video_capture = cv2.VideoCapture(2) # Access the webcam (change to the appropriate device index if necessary)
start_time = time.time() # Record the start time
while True:
_, frame = video_capture.read() # Read a frame from the webcam
# Check if 5 seconds have elapsed
if time.time() - start_time > 5:
# Set the flag to indicate that the video feed is finished
video_feed_finished = True
# Stop processing frames after 5 seconds
break
# Perform face recognition using FaceNet model of DeepFace
result = DeepFace.analyze(frame, detector_backend='mtcnn')
# Insert the result into the MySQL database
insert_result_into_database(username, result)
calculate_age_difference(username)
# Save the image to the database
save_image_to_database(username, cv2.imencode('.jpg', frame)[1].tobytes())
# Process the result as needed
# For example, you can print the result to the console
print(result)
# Encode the analyzed frame as JPEG
ret, jpeg = cv2.imencode('.jpg', frame)
frame_bytes = jpeg.tobytes()
# Yield the frame bytes as a response
yield (b'--framern'
b'Content-Type: image/jpegrnrn' + frame_bytes + b'rn')
video_capture.release()
# Route for video feed here where it redirect to the index.html
@app.route('/video_feed')
def video_feed():
global video_feed_finished
# Check if the video feed is finished
if video_feed_finished:
# If finished, redirect to the login page
return redirect(url_for('login'))
# Start the face detection process
return render_template('index.html')
@app.route('/video_feed_data', methods=['POST'])
def video_feed_data():
if request.method == 'POST':
username = request.form['username']
return generate_video_feed(username)
else:
return "Method not allowed"
@app.route('/generate_video_feed')
def generate_video_feed(username):
return Response(detect_faces(username), mimetype='multipart/x-mixed-replace; boundary=frame')
in this code the video feed go to the the index.html where the result in video feed data must be shown in the index.html which is the result photo, instead of doing that it post the photo result in separate page because of the mimetype it leave the index.html.
this one is from my html code
<body>
<div class="art-container">
<div class="art-shape" style="background: skyblue; width: 100px; height: 100px; top: 20%; left: 10%;"></div>
<div class="art-shape" style="background: skyblue; width: 80px; height: 80px; top: 70%; left: 80%;"></div>
<div class="art-shape" style="background: skyblue; width: 120px; height: 120px; top: 40%; left: 50%;"></div>
</div>
<h1>Real-time Face Recognition</h1>
<form id="username-form" method="post" action="{{ url_for('video_feed_data') }}">
<!-- Other form fields -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<!-- Submit button -->
<button type="submit">Submit</button>
<div class="video-container">
<img id="video-feed" src="{{ url_for('video_feed_data') }}" alt="Video Feed">
</div>
<!-- Add a button that appears after the video feed is done -->
<div id="refresh-button-container">
<button onclick="refreshPage()">Log In</button>
</div>
<div id="error-message" style="display: none;">
<p>Face could not be detected. Please refresh the page.</p>
</div>
<!-- Include the JavaScript file -->
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
and my JavaScript
// script.js
// JavaScript function to refresh the page
function refreshPage() {
location.reload();
}
// Function to display the error message
function showError() {
// Show the error message div
document.getElementById('error-message').style.display = 'block';
}
// Function to hide the error message
function hideError() {
// Hide the error message div
document.getElementById('error-message').style.display = 'none';
}
// Function to handle face detection success or failure
function detectFaceFailure() {
// Check if there was an error loading the video feed
const videoFeedError = document.getElementById('video-feed').naturalWidth === 0;
if (videoFeedError) {
// Show the error message if there was an error loading the video feed
showError();
} else {
// Hide the error message if face detection was successful
hideError();
}
}
// Call the detectFaceFailure() function when the page loads (or at the appropriate time)
window.onload = detectFaceFailure;
// Check if the video feed has loaded successfully
document.getElementById('video-feed').onload = () => {
console.log('Video feed loaded');
// Show the refresh button
document.getElementById('refresh-button-container').style.display = 'block';
};
// Handle error if face detection fails
document.getElementById('video-feed').onerror = () => {
console.error('Error loading video feed');
// Show the error message
document.getElementById('error-message').style.display = 'block';
};
function toggleRefreshButton() {
const username = document.getElementById('username').value;
const refreshButtonContainer = document.getElementById('refresh-button-container');
const errorMessage = document.getElementById('error-message');
// Check if username is not empty
if (username.trim() !== '') {
refreshButtonContainer.style.display = 'block';
errorMessage.style.display = 'none'; // Hide error message if shown
} else {
refreshButtonContainer.style.display = 'none';
}
}
function refreshPage() {
location.reload();
}