124 lines
3.0 KiB
TypeScript
124 lines
3.0 KiB
TypeScript
import LayoutPage from "@/components/templates/LayoutPage";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { FaCircleCheck } from "react-icons/fa6";
|
|
import useNavbarStore from "@/stores/NavbarStore";
|
|
import MediapipeHelper from "@/helper/MediapipeHelper";
|
|
import DetectionHelper from "@/helper/DetectionHelper";
|
|
|
|
type PredictResult = {
|
|
abjad: String;
|
|
acc: String;
|
|
};
|
|
|
|
const Home = () => {
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
const [loadCamera, setLoadCamera] = useState(false);
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
const [resultPredict, setResultPredict] = useState<PredictResult>({
|
|
abjad: "",
|
|
acc: "",
|
|
});
|
|
|
|
const [handPresence, setHandPresence] = useState(false);
|
|
|
|
const onHandDetected = async () => {
|
|
const result = mediapipeHelper.getResult();
|
|
if (result.handPresence) {
|
|
// console.log("Hand Detected");
|
|
setHandPresence(true);
|
|
|
|
const predict = await detectionHelper.makePrediction(result.finalResult);
|
|
console.log(predict);
|
|
|
|
if (predict) {
|
|
setResultPredict((prevState) => ({
|
|
...prevState,
|
|
...predict,
|
|
}));
|
|
}
|
|
|
|
} else {
|
|
setHandPresence(false);
|
|
}
|
|
|
|
requestAnimationFrame(onHandDetected);
|
|
};
|
|
|
|
const startWebcam = async () => {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
video: true,
|
|
});
|
|
|
|
if (videoRef.current) {
|
|
videoRef.current.srcObject = stream;
|
|
}
|
|
|
|
mediapipeHelper = new MediapipeHelper(videoRef);
|
|
detectionHelper = new DetectionHelper();
|
|
|
|
onHandDetected();
|
|
|
|
|
|
|
|
} catch (error) {
|
|
console.error("Error accessing webcam:", error);
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
const store = useNavbarStore();
|
|
let mediapipeHelper: MediapipeHelper;
|
|
let detectionHelper: DetectionHelper;
|
|
|
|
useEffect(() => {
|
|
store.setNavSelected("home");
|
|
|
|
startWebcam();
|
|
|
|
setLoadCamera(true);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<LayoutPage>
|
|
<div className="flex flex-col flex-1 py-4">
|
|
{loadCamera ? (
|
|
<div className="rounded-md overflow-hidden relative">
|
|
{handPresence && (
|
|
<div className="top-6 left-6 absolute flex gap-2 items-center bg-white text-black rounded-md drop-shadow px-3 py-2">
|
|
<FaCircleCheck className="text-green-500" />
|
|
<h1 className="text-2xl font-semibold text-center">
|
|
{resultPredict.abjad} ({resultPredict.acc})
|
|
</h1>
|
|
</div>
|
|
)}
|
|
<canvas
|
|
ref={canvasRef}
|
|
className="absolute top-0 left-0 w-full h-full z-20"
|
|
/>
|
|
<video
|
|
ref={videoRef}
|
|
className="w-full max-h-[80svh] object-cover"
|
|
autoPlay
|
|
playsInline
|
|
></video>
|
|
</div>
|
|
) : (
|
|
<div>Loading...</div>
|
|
)}
|
|
</div>
|
|
</LayoutPage>
|
|
);
|
|
};
|
|
|
|
export default Home;
|