blob: a5c907d35ad0c1cc3fe119cc91d7956335ea2335 (
plain)
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
40
41
42
|
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="relative w-full h-[125px] overflow-hidden">
// <video ref={ref} className="w-full h-full object-cover" />
// </div>
<div className="relative w-full h-[350px] overflow-hidden">
<video ref={ref} onClick={restartCam} className={styles.video} />
<div className={styles.videoFrame} />
</div>
)
}
export default Scanner
|
