From be0f537dc4fe384eef09436833c6407e6482c16d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 9 Nov 2023 15:40:16 +0700
Subject: Initial commit

---
 src/common/components/Scanner/index.tsx | 39 +++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/common/components/Scanner/index.tsx

(limited to 'src/common/components/Scanner/index.tsx')

diff --git a/src/common/components/Scanner/index.tsx b/src/common/components/Scanner/index.tsx
new file mode 100644
index 0000000..56d2495
--- /dev/null
+++ b/src/common/components/Scanner/index.tsx
@@ -0,0 +1,39 @@
+import { useZxing } from "react-zxing";
+import styles from "./scanner.module.css"
+
+type Props = {
+  paused: boolean,
+  onScan: (string: string) => void
+}
+
+const Scanner = (props: Props) => {
+  const { ref } = useZxing({
+    constraints: {
+      video: {
+        facingMode: 'environment',
+        width: { ideal: 1280 },
+        height: { ideal: 720 },
+        frameRate: { ideal: 30, max: 60 }
+      }
+    },
+    timeBetweenDecodingAttempts: 100,
+    paused: props.paused,
+    onDecodeResult(result) {
+      props.onScan(result.getText());
+    },
+  })
+
+  const restartCam = () => {
+    ref.current?.pause()
+    ref.current?.play()
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <video ref={ref} onClick={restartCam} className={styles.video} />
+      <div className={styles.videoFrame} />
+    </div>
+  )
+}
+
+export default Scanner
\ No newline at end of file
-- 
cgit v1.2.3