initial commit

1 files changed, 79 insertions, 0 deletions

diff --git a/app/lib/camera/component/camera.tsx b/app/lib/camera/component/camera.tsx
new file mode 100644
index 0000000..b398616
--- /dev/null
+++ b/app/lib/camera/component/camera.tsx
@@ -0,0 +1,79 @@
+import { CameraSharp } from "@mui/icons-material";
+import { Button, IconButton } from "@mui/material";
+import Image from "next/image";
+import React, { useRef } from "react";
+import Webcam from "react-webcam";
+
+interface WebcamCaptureProps {
+  image: string | null;
+  setImage: (image: string | null) => void;
+  isWebcamVisible: boolean;
+  setIsWebcamVisible: (isVisible: boolean) => void;
+}
+
+const WebcamCapture: React.FC<WebcamCaptureProps> = ({
+  image,
+  setImage,
+  isWebcamVisible,
+  setIsWebcamVisible,
+}) => {
+  const webcamRef = useRef<Webcam>(null);
+
+  // Mengambil foto dari webcam
+  const capture = () => {
+    const image = webcamRef.current?.getScreenshot();
+    setIsWebcamVisible(false);
+    setImage(image || null);
+  };
+
+  const takePicture = () => {
+    setImage(null);
+    setIsWebcamVisible(true);
+  };
+
+  // Mengatur ukuran webcam
+  const videoConstraints = {
+    width: 500,
+    height: 480,
+    facingMode:  {
+      exact: "environment" // untuk kamera belakang
+    },
+  };
+
+  return (
+    <div className="items-center">
+      {!isWebcamVisible && (
+        <Button variant="text" size="large" onClick={() => takePicture()}>
+          Ambil Foto Surat Jalan
+        </Button>
+      )}
+    
+      {isWebcamVisible && (
+        <div>
+          <Webcam
+            audio={false}
+            ref={webcamRef}
+            screenshotFormat="image/jpeg"
+            videoConstraints={videoConstraints}
+          />
+          <IconButton aria-label="camera" size="large" onClick={() => capture()}>
+            <CameraSharp fontSize="inherit" />
+          </IconButton>
+        </div>
+      )}
+      {image && (
+        <div>
+          <Image
+            src={image}
+            alt="Captured"
+            width={500}
+            height={480}
+            unoptimized 
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WebcamCapture;