trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve QR scanning a bit

Browse source
This commit is contained in:
trafficlunar 2025-07-14 13:59:22 +01:00
parent 8b4842b584
commit ac1e29586f
1 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/submit-form/qr-scanner.tsx
View file

@ -28,7 +28,7 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
const cameraItems = devices.map((device) => ({
value: device.deviceId,
label: device.label || `Camera ${device.deviceId.slice(-5)}`,
label: device.label || `Camera ${devices.indexOf(device) + 1}`,
}));
const {
@ -73,6 +73,7 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
// Cancel animation frame to stop scanning
if (requestRef.current) {
cancelAnimationFrame(requestRef.current);
requestRef.current = null;
}
setQrBytesRaw(code.binaryData!);
@ -115,8 +116,15 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
}, [isOpen, selectedDeviceId]);
useEffect(() => {
if (!isOpen && !permissionGranted) return;
if (!isOpen || !permissionGranted) return;
requestRef.current = requestAnimationFrame(scanQRCode);
return () => {
if (requestRef.current) {
cancelAnimationFrame(requestRef.current);
}
};
}, [isOpen, permissionGranted, scanQRCode]);
if (!isOpen) return null;
@ -191,12 +199,18 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
) : (
<>
<Webcam
key={selectedDeviceId}
ref={webcamRef}
audio={false}
videoConstraints={{
deviceId: selectedDeviceId ? { exact: selectedDeviceId } : undefined,
facingMode: { ideal: "environment" },
}}
onUserMedia={async () => {
const newDevices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = newDevices.filter((d) => d.kind === "videoinput");
setDevices(videoDevices);
}}
className="size-full object-cover rounded-2xl border-2 border-amber-500"
/>
<QrFinder />