diff --git a/src/components/QRCodeScanner/QRCodeScanner.js b/src/components/QRCodeScanner/QRCodeScanner.js index 7ad06c2f..cddd42b7 100644 --- a/src/components/QRCodeScanner/QRCodeScanner.js +++ b/src/components/QRCodeScanner/QRCodeScanner.js @@ -20,6 +20,7 @@ const QRScanner = ({ onClose }) => { const [qrDetected, setQrDetected] = useState(false); const [boxSize, setBoxSize] = useState(null); const [zoomLevel, setZoomLevel] = useState(1); + const [hasCameraPermission, setHasCameraPermission] = useState(false); const { t } = useTranslation(); const handleZoomChange = (event) => { @@ -40,25 +41,40 @@ const QRScanner = ({ onClose }) => { }; useEffect(() => { - navigator.mediaDevices.enumerateDevices() - .then(mediaDevices => { - const videoDevices = mediaDevices.filter(({ kind }) => kind === "videoinput"); - setDevices(videoDevices); - - // Find and prioritize the back camera if it exists - const backCameraIndex = videoDevices.findIndex(device => device.label.toLowerCase().includes('back')); - if (backCameraIndex !== -1) { - setCurrentDeviceIndex(backCameraIndex); - } - - setCameraReady(true); + navigator.mediaDevices.getUserMedia({ video: true }) + .then(stream => { + setHasCameraPermission(true); + stream.getTracks().forEach(track => track.stop()); // Stop using the camera }) .catch(error => { - console.error("Error accessing camera:", error); - setCameraReady(false); + console.error("Camera access denied:", error); }); }, []); + + useEffect(() => { + if (hasCameraPermission) { + // Now enumerate devices after permission has been granted + navigator.mediaDevices.enumerateDevices() + .then(mediaDevices => { + const videoDevices = mediaDevices.filter(({ kind }) => kind === "videoinput"); + setDevices(videoDevices); + + const backCameraIndex = videoDevices.findIndex(device => device.label.toLowerCase().includes('back')); + if (backCameraIndex !== -1) { + setCurrentDeviceIndex(backCameraIndex); + } else { + setCurrentDeviceIndex(0); // Default to the first camera if no back camera is found + } + + setCameraReady(true); + }) + .catch(error => { + console.error("Error enumerating devices:", error); + }); + } + }, [hasCameraPermission]); + const switchCamera = () => { if (devices.length > 1) { const newIndex = (currentDeviceIndex + 1) % devices.length;