Skip to content

Commit

Permalink
feat: select camera
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmat224
gmat224 committed Dec 13, 2024
1 parent 8baee77 commit e2f7305
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 65 deletions.
1 change: 0 additions & 1 deletion web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
"react-responsive-masonry": "^2.2.1",
"react-router": "^6.22.0",
"react-router-dom": "^6.22.0",
"react-zxing": "^2.0.2",
"remark-breaks": "^4.0.0",
"remark-gfm": "^4.0.0",
"slick-carousel": "^1.8.1",
Expand Down
108 changes: 70 additions & 38 deletions web/src/screens/AttendanceScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { useAttendanceList } from "../hooks/api/useAttendanceList";
import { AttendanceList } from "../types/types";
import LoadingSpinner from "@components/navigation/LoadingSpinner";
import { useUpdateAttendance } from "../hooks/api/useAttendanceUpdateMutation";
import { IDetectedBarcode, Scanner, useDevices } from '@yudiel/react-qr-scanner';
import {
IDetectedBarcode,
Scanner,
useDevices,
} from "@yudiel/react-qr-scanner";

function filterDataByUserTicketCodeOrName(
data: AttendanceList[],
Expand All @@ -30,9 +34,8 @@ export default function AttendanceScreen({ navbar }: { navbar: JSX.Element }) {
queryId = parseInt(id);
}

// testing

const absc = useDevices()
// get all cameras
const cameraDevices = useDevices();

// useStates
const [scannedQRCode, setScannedQRCode] = useState("");
Expand All @@ -46,7 +49,8 @@ export default function AttendanceScreen({ navbar }: { navbar: JSX.Element }) {
const [statusText, setStatusText] = useState("Scan first ticket");
const [totalAttendees, setTotalAttendees] = useState(0);
const [totalCheckedIn, setTotalCheckedIn] = useState(0);

const [cameraError, setCameraError] = useState(false);
const [cameraId, setCameraId] = useState("");
// Mutation hook
const { data: nameData, mutateAsync, status } = useUpdateAttendance();

Expand Down Expand Up @@ -81,34 +85,25 @@ export default function AttendanceScreen({ navbar }: { navbar: JSX.Element }) {
setStatusText("Update failed");
}
}, [statusText, status]);
// QR decoding
// const { ref } = useZxing({
// onDecodeResult(decodedQRCode) {
// if (scannedQRCode != decodedQRCode.getText()) {
// const filteredData = filterDataByUserTicketCodeOrName(
// originalAttendanceList,
// decodedQRCode.getText()
// );
// setScannedQRCode(decodedQRCode.getText());
// setCurrentSearchField(decodedQRCode.getText());
// setFilteredAttendanceList(filteredData);
// }
// },
// });

function onQRcodeScanned(decodedQRCode: IDetectedBarcode[]){
if (scannedQRCode != decodedQRCode[0].rawValue) {
const filteredData = filterDataByUserTicketCodeOrName(
originalAttendanceList,
decodedQRCode[0].rawValue
);
setScannedQRCode(decodedQRCode[0].rawValue);
setCurrentSearchField(decodedQRCode[0].rawValue);
setFilteredAttendanceList(filteredData);
}
}

// update values once data is fetched
useEffect(() => {
if (cameraDevices.length > 0) {
setCameraId(cameraDevices[0].deviceId);
}
}, [cameraId]);

function onQRcodeScanned(decodedQRCode: IDetectedBarcode[]) {
if (scannedQRCode != decodedQRCode[0].rawValue) {
const filteredData = filterDataByUserTicketCodeOrName(
originalAttendanceList,
decodedQRCode[0].rawValue
);
setScannedQRCode(decodedQRCode[0].rawValue);
setCurrentSearchField(decodedQRCode[0].rawValue);
setFilteredAttendanceList(filteredData);
}
}

// update search
function handleOnSearchChanged(event: React.ChangeEvent<HTMLInputElement>) {
Expand Down Expand Up @@ -143,11 +138,9 @@ export default function AttendanceScreen({ navbar }: { navbar: JSX.Element }) {
return <LoadingSpinner />;
}

console.log(absc)

// const abc : MediaTrackConstraints = {
// deviceId: "98cba60747c2d8c10ee870fae5b7a320aa26180dae4b90a6569ce6e77c6e18a1"
// }
const abc: MediaTrackConstraints = {
deviceId: cameraId,
};

return (
<div className="from-AUIS-dark-teal to-AUIS-teal min-h-[calc(100vh)] bg-gradient-to-b">
Expand All @@ -158,8 +151,21 @@ export default function AttendanceScreen({ navbar }: { navbar: JSX.Element }) {
{/* <div>TESTING</div>
<video className="w-[40rem] py-2" ref={ref} /> */}
<div className="w-[35rem] py-2">
<Scanner onScan={(result) =>onQRcodeScanned(result)} allowMultiple={true} scanDelay={1000}/>

{cameraError ? (
<p className="py-5 text-center text-white">
There was an error loading the camera, please try a different
camera, make sure that you have given access to use the camera and
try to refresh the page
</p>
) : (
<Scanner
onScan={(result) => onQRcodeScanned(result)}
allowMultiple={true}
scanDelay={1000}
constraints={abc}
onError={() => setCameraError(true)}
/>
)}
</div>
</div>
<div className="flex items-center justify-center">
Expand Down Expand Up @@ -224,6 +230,32 @@ export default function AttendanceScreen({ navbar }: { navbar: JSX.Element }) {
<p className="py-2 text-center text-white">
Attendance: {totalCheckedIn} {" / "} {totalAttendees}
</p>
<div className="flex items-center justify-center">
<div className="w-[40rem] pb-10 px-3">
<p className="text-center text-lg text-white">
Select the camera you wish to use
</p>
<select
className="input flex w-full items-center justify-center rounded-xl border px-3 py-2 text-lg leading-tight shadow focus:outline-none"
onChange={(e) => {
setCameraError(false);
setCameraId(e.target.value);
}}
>
{cameraDevices.map((cameraDevice) => {
return (
<option
className="flex w-full items-center justify-center rounded-xl border px-3 py-2 text-lg leading-tight text-gray-400 shadow focus:outline-none"
key={cameraDevice.deviceId}
value={cameraDevice.deviceId}
>
{cameraDevice.label}
</option>
);
})}
</select>
</div>
</div>
</div>
</div>
);
Expand Down
26 changes: 0 additions & 26 deletions web/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1277,20 +1277,6 @@
barcode-detector "^2.2.7"
webrtc-adapter "9.0.1"

"@zxing/library@^0.20.0":
version "0.20.0"
resolved "https://registry.yarnpkg.com/@zxing/library/-/library-0.20.0.tgz#11bc411b87693015389555c589da61532879be7b"
integrity sha512-6Ev6rcqVjMakZFIDvbUf0dtpPGeZMTfyxYg4HkVWioWeN7cRcnUWT3bU6sdohc82O1nPXcjq6WiGfXX2Pnit6A==
dependencies:
ts-custom-error "^3.2.1"
optionalDependencies:
"@zxing/text-encoding" "~0.9.0"

"@zxing/text-encoding@~0.9.0":
version "0.9.0"
resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==

acorn-jsx@^5.3.2:
version "5.3.2"
resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
Expand Down Expand Up @@ -3796,13 +3782,6 @@ [email protected], react-router@^6.22.0:
dependencies:
"@remix-run/router" "1.15.0"

react-zxing@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/react-zxing/-/react-zxing-2.0.2.tgz#6f67d20fa41f1af390c7735fcacaeabcfb6d541b"
integrity sha512-6TRXPL+QESjVQOCAZVRT2pUf/Fz3t4nPfbQLvNH42Dy9r/bu1rJq1I/lCUY+fK2Wg3mvLxPxym2AzzOM32mcmg==
dependencies:
"@zxing/library" "^0.20.0"

react@^18.2.0:
version "18.2.0"
resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
Expand Down Expand Up @@ -4373,11 +4352,6 @@ ts-api-utils@^1.0.1:
resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz"
integrity sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==

ts-custom-error@^3.2.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
integrity sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==

ts-interface-checker@^0.1.9:
version "0.1.13"
resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
Expand Down

0 comments on commit e2f7305

Please sign in to comment.