I would like to redirect after successfully scanning and decoding a QR code. Current behavior the video stops/hangs and doesn't redirect. I would like avoid using Javascript unless it small script that assists in the redirect. I did previously attempt to embed a javascript function in the html, but was unseccessful. It called back to another endpoint that would that responded with json and if the qr was successfully read. There is no error when this happens the browser just hangs.
app.py
import cv2
from flask import Flask, render_template, redirect, Response
from pyzbar.pyzbar import decode
app = Flask(__name__, template_folder='templates')
DECODED_QR_CODE = "PLACEHOLDER"
@app.route('/')
def index():
global DECODED_QR_CODE
return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<h1>{ DECODED_QR_CODE }</h1>
<a href="/scanner">
<button type="button">Go to QR Code Scanner</button>
</a>
</body>
</html>"""
@app.route('/scanner')
def second():
return render_template('scan.html')
@app.route('/video_feed')
def video_feed():
return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
def gen_frames():
camera = cv2.VideoCapture(0) # Use 0 for the default camera
global DECODED_QR_CODE
while True:
success, frame = camera.read() # Read the camera frame
if not success:
break
else:
# Detect and decode QR codes in the frame
decoded_objects = decode(frame)
for obj in decoded_objects:
# Print decoded data
print(obj.data.decode('utf-8'))
# if valid QR code detected, redirect to the index page
if obj.data.decode('utf-8'):
DECODED_QR_CODE = obj.data.decode('utf-8')
cv2.destroyAllWindows()
camera.release()
return redirect("/")
ret, buffer = cv2.imencode('.jpg', frame)
frame = buffer.tobytes()
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n') # Concat frame one by one and show result
scan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scan QR Code</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
color: #fff;
}
.form-container {
text-align: center;
width: 90%; /* Adjust based on preference */
max-width: 600px; /* Adjust based on preference */
}
.input-group label {
color: #B967FF; /* Purple color for the synthwave effect */
text-shadow: 0 0 5px #FF00FF, 0 0 10px #FF00FF; /* Glow effect */
}
.button-container button {
background-color: #7200A8; /* Dark purple */
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
box-shadow: 0 0 5px #FF00FF, 0 0 15px #FF00FF; /* Glow effect */
transition: background-color 0.3s ease;
}
.button-container button:hover {
background-color: #B967FF; /* Lighter purple */
}
* {
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div class="form-container">
<img src="{{ url_for('video_feed') }}" height="50%">
<div class="input-group">
<label for="cameraInput"><b>Scan QR Code</b></label>
</div>
<a href="/">
<div class="button-container">
<button name="click">Done</button>
</div>
</a>
</div>
</body>
</html>
script attempt
<script>
function redirectListener() {
function scan() {
const url = "/connectionStatus";
fetch(url, { method: "GET" })
.then(response => response.json()) // Parsing the JSON response body
.then(data => {
console.log(data.status); // Logging the status
// Checking if the status is 'connected'
if(data.status === "connected") {
window.location.href = "/";
} else {
requestAnimationFrame(scan);
}
})
}
scan();
};
</script>