https://github.com/beenotung/react-webcam-qr-scanner.ts
Typescript React components using pure javascript to detect QR Code from webcam continuously.
https://github.com/beenotung/react-webcam-qr-scanner.ts
qrscanner react typescript-library webcam
Last synced: 29 days ago
JSON representation
Typescript React components using pure javascript to detect QR Code from webcam continuously.
- Host: GitHub
- URL: https://github.com/beenotung/react-webcam-qr-scanner.ts
- Owner: beenotung
- License: bsd-2-clause
- Created: 2021-06-04T14:08:49.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-06T18:51:52.000Z (over 3 years ago)
- Last Synced: 2025-08-12T21:05:49.565Z (about 2 months ago)
- Topics: qrscanner, react, typescript-library, webcam
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-webcam-qr-scanner.ts
- Size: 33.2 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-webcam-qr-scanner.ts
Typescript React components using pure javascript to detect QR Code from webcam continuously.
[](https://www.npmjs.com/package/react-webcam-qr-scanner.ts)
[Demo](https://react-webcam-qr-scanner-demo.surge.sh) hosted on surge.sh
## Features
- [x] Typescript Support
- [x] Auto-stop WebCam when component un-mount
- [x] Use back camera by default (configurable)
- [x] Support continuous/one-off scanning
- [x] Support custom video filter
## Installation
Step 1: Download the npm package
```bash
## using npm
npm install react-webcam-qr-scanner.ts qr-scanner
## or using yarn
yarn add react-webcam-qr-scanner.ts qr-scanner
## or using pnpm
pnpm install react-webcam-qr-scanner.ts qr-scanner
```
Step 2: Setup symbolic link to `qr-scanner-worker.min.js` and `qr-scanner-worker.min.js.map` under `public/`
You can obtain these files from `node_modules/qr-scanner/`
```bash
cd public
ln -s ../node_modules/qr-scanner/qr-scanner-worker.min.js
ln -s ../node_modules/qr-scanner/qr-scanner-worker.min.js.map
```
## Typescript Signature
```typescript
import { HTMLProps } from 'react'
export type CameraProps = HTMLProps & {
onVideo: (video: HTMLVideoElement) => void
constraints?: MediaStreamConstraints
}
export function Camera(props: CameraProps): JSX.Element
export type VideoQrScannerProps = {
onQrCode: (qrCode: string) => void
video: HTMLVideoElement
}
export function VideoQrScanner(props: VideoQrScannerProps): JSX.Element
export function ContinuousQrScanner(props: QrScannerProps): JSX.Element
export function OneOffQrScanner(props: QrScannerProps): JSX.Element
export type QrScannerProps = Omit &
Pick
export default OneOffQrScanner
```
## Usage Example
More examples refer to [Demo.tsx](./src/Demo.tsx)
### Demo One-Off Scanning
```typescript jsx
import React, { useState } from 'react'
import { OneOffQrScanner } from 'react-webcam-qr-scanner.ts'
function DemoOneOffScanning() {
const [qrCode, setQrCode] = useState('')
return (
<>
QR Code: {qrCode}
{/* auto close the webcam once detected QR code */}
>
)
}
export default DemoOneOffScanning
```
Details refer to [DemoOneOffScanning.tsx](src/DemoOneOffScanning.tsx)
### Demo Continuous Scanning
```typescript jsx
import React, { useState } from 'react'
import { ContinuousQrScanner } from 'react-webcam-qr-scanner.ts'
function DemoContinuousScanning() {
const [qrCode, setQrCode] = useState('')
return (
<>
QR Code: {qrCode}
{/* onQrCode can be fired multiple times */}
>
)
}
export default DemoContinuousScanning
```
Details refer to [DemoContinuousScanning.tsx](src/DemoContinuousScanning.tsx):
### Demo Scanning with Custom Video Filter
```typescript jsx
import React, { useEffect, useState } from 'react'
import { Camera, VideoQrScanner } from 'react-webcam-qr-scanner.ts'
function DemoCustomVideoFilter() {
const [qrCode, setQrCode] = useState('')
const [video, setVideo] = useState(null)
const [hueRotate, setHueRotate] = useState(0)
useEffect(() => {
const timer = requestAnimationFrame(() => {
setHueRotate(hueRotate => (hueRotate + 1) % 360)
})
return () => cancelAnimationFrame(timer)
}, [hueRotate])
return (
<>
QR Code: {qrCode}
{video && }
>
)
}
export default DemoCustomVideoFilter
```
Details refer to [DemoCustomVideoFilter.tsx](src/DemoCustomVideoFilter.tsx):
## License
This is free and open-source software (FOSS) with
[BSD-2-Clause License](./LICENSE)