src/common/components/Scanner/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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