mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
FIXED CLUES! all that needs to be done is manually adding circle buttons and hiding/showing feature through API.. maybe fixing QR scanner
This commit is contained in:
bobbert committed
1 parent
2236dceac9
commit
726121e105
18 files changed
+1504
-1192
No files matched your search
@@ -0,0 +1,317 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Scanner } from "@yudiel/react-qr-scanner";
|
||||
|
||||
export default function EnhancedQRScanner({
|
||||
onScan,
|
||||
width = 300,
|
||||
height = 300,
|
||||
}) {
|
||||
const [error, setError] = useState(null);
|
||||
const [isSecureContext, setIsSecureContext] = useState(true);
|
||||
const [initialized, setInitialized] = useState(false);
|
||||
const [cameraActive, setCameraActive] = useState(false);
|
||||
const [hasCameras, setHasCameras] = useState(true);
|
||||
const [retryCount, setRetryCount] = useState(0);
|
||||
const maxRetries = 3;
|
||||
const scannerRef = useRef(null);
|
||||
|
||||
// Check if we're in a secure context
|
||||
useEffect(() => {
|
||||
// Check if we're in a secure context (https or localhost)
|
||||
const secure = window.isSecureContext;
|
||||
setIsSecureContext(secure);
|
||||
|
||||
// Check if camera can be accessed
|
||||
async function checkCameraAccess() {
|
||||
try {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
const videoDevices = devices.filter(
|
||||
(device) => device.kind === "videoinput"
|
||||
);
|
||||
|
||||
if (videoDevices.length === 0) {
|
||||
setError(
|
||||
"No camera detected. Please make sure your device has a camera."
|
||||
);
|
||||
setHasCameras(false);
|
||||
} else {
|
||||
setHasCameras(true);
|
||||
}
|
||||
|
||||
setInitialized(true);
|
||||
} catch (err) {
|
||||
console.error("Error checking camera devices:", err);
|
||||
setError(`Camera initialization error: ${err.message}`);
|
||||
setInitialized(true);
|
||||
}
|
||||
}
|
||||
|
||||
checkCameraAccess();
|
||||
}, []);
|
||||
|
||||
// Handle successful scan
|
||||
const handleDecode = (result) => {
|
||||
if (onScan && result) {
|
||||
onScan(result);
|
||||
}
|
||||
};
|
||||
|
||||
// Try to restart the camera
|
||||
const retryCamera = () => {
|
||||
if (retryCount < maxRetries) {
|
||||
setError(null);
|
||||
setRetryCount((prev) => prev + 1);
|
||||
// Force re-render of scanner component
|
||||
setCameraActive(false);
|
||||
setTimeout(() => setCameraActive(true), 500);
|
||||
} else {
|
||||
setError(
|
||||
"Could not access camera after multiple attempts. Please refresh the page or try another device."
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle camera errors
|
||||
const handleError = (error) => {
|
||||
console.error("QR Scanner error:", error);
|
||||
setCameraActive(false);
|
||||
|
||||
// More descriptive error messages
|
||||
let errorMessage = "Camera access error. ";
|
||||
|
||||
if (!isSecureContext) {
|
||||
errorMessage +=
|
||||
"Your browser requires HTTPS for camera access. When running locally, use http://localhost instead of your IP address.";
|
||||
} else if (
|
||||
error.name === "NotAllowedError" ||
|
||||
error.name === "PermissionDeniedError"
|
||||
) {
|
||||
errorMessage +=
|
||||
"Camera permission denied. Please allow camera access in your browser settings.";
|
||||
} else if (
|
||||
error.name === "NotFoundError" ||
|
||||
error.name === "DevicesNotFoundError"
|
||||
) {
|
||||
errorMessage +=
|
||||
"No camera found. Please ensure your device has a working camera.";
|
||||
} else if (
|
||||
error.name === "NotReadableError" ||
|
||||
error.name === "TrackStartError"
|
||||
) {
|
||||
errorMessage +=
|
||||
"Camera is already in use by another application or encountered a hardware error.";
|
||||
} else {
|
||||
errorMessage += `${
|
||||
error.message ||
|
||||
"Please check your camera permissions and refresh the page."
|
||||
}`;
|
||||
}
|
||||
|
||||
setError(errorMessage);
|
||||
};
|
||||
|
||||
// When initialized, activate camera
|
||||
useEffect(() => {
|
||||
if (initialized && hasCameras && isSecureContext && !error) {
|
||||
setCameraActive(true);
|
||||
}
|
||||
}, [initialized, hasCameras, isSecureContext, error]);
|
||||
|
||||
// Handle secure context warning
|
||||
if (!isSecureContext) {
|
||||
return (
|
||||
<div className="enhanced-qr-scanner">
|
||||
<div className="scanner-error">
|
||||
<p>Camera access requires a secure context (HTTPS or localhost).</p>
|
||||
<p>
|
||||
When running locally, use http://localhost:3000 instead of your
|
||||
network IP.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle initialization state
|
||||
if (!initialized) {
|
||||
return (
|
||||
<div className="enhanced-qr-scanner">
|
||||
<div className="scanner-loading">Initializing camera...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="enhanced-qr-scanner">
|
||||
{error && (
|
||||
<div className="scanner-error">
|
||||
<p>{error}</p>
|
||||
{retryCount < maxRetries && (
|
||||
<button className="retry-button" onClick={retryCamera}>
|
||||
Retry Camera Access
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{cameraActive && !error && (
|
||||
<div
|
||||
className="scanner-container"
|
||||
style={{ width, height }}
|
||||
ref={scannerRef}
|
||||
>
|
||||
<Scanner
|
||||
onResult={handleDecode}
|
||||
onError={handleError}
|
||||
constraints={{
|
||||
facingMode: "environment",
|
||||
width: { min: 640, ideal: 1280, max: 1920 },
|
||||
height: { min: 480, ideal: 720, max: 1080 },
|
||||
aspectRatio: { ideal: 1 },
|
||||
}}
|
||||
containerStyle={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
borderRadius: "8px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
videoStyle={{
|
||||
objectFit: "cover",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
scanDelay={500}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Text input fallback when camera fails */}
|
||||
{(!cameraActive || error) && (
|
||||
<div className="manual-input-container">
|
||||
<p className="fallback-text">
|
||||
Having trouble with the camera? Try entering a code manually:
|
||||
</p>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter QR code (e.g. QR1)"
|
||||
className="manual-input"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && e.target.value) {
|
||||
onScan(e.target.value);
|
||||
e.target.value = "";
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="submit-button"
|
||||
onClick={(e) => {
|
||||
const input = e.target.previousSibling;
|
||||
if (input.value) {
|
||||
onScan(input.value);
|
||||
input.value = "";
|
||||
}
|
||||
}}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style jsx>{`
|
||||
.enhanced-qr-scanner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scanner-error {
|
||||
color: #d32f2f;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background-color: #ffebee;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 16px;
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
background-color: #1976d2;
|
||||
}
|
||||
|
||||
.scanner-loading {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background-color: #e8f5e9;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.scanner-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: ${width}px;
|
||||
height: ${height}px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 2px solid #ddd;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.manual-input-container {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
max-width: ${width}px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fallback-text {
|
||||
margin-bottom: 10px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.manual-input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px 0 0 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
padding: 10px 15px;
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background-color: #4a3c2a;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user