Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/absurdprofit/zxing-qr-reader
QR code reader based on ZXing C++ port by @nu-book compiled to wasm.
https://github.com/absurdprofit/zxing-qr-reader
qrcode typescript wasm webrtc zxing
Last synced: 10 days ago
JSON representation
QR code reader based on ZXing C++ port by @nu-book compiled to wasm.
- Host: GitHub
- URL: https://github.com/absurdprofit/zxing-qr-reader
- Owner: absurdprofit
- License: apache-2.0
- Created: 2021-02-02T03:05:11.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-30T18:45:38.000Z (over 2 years ago)
- Last Synced: 2024-11-14T08:47:00.204Z (about 1 month ago)
- Topics: qrcode, typescript, wasm, webrtc, zxing
- Language: TypeScript
- Homepage:
- Size: 4.86 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ZXing QR Reader
A QR code reader based on a wasm port of Zebra Crossing library by [@nu-book](https://github.com/nu-book).
## Installation
```
npm install zxing-qr-reader
```
## Demo
You can find the demo [here](https://qr.nxtetechnologies.com)
## Usage
Instantiate the QrReader class by passing a canvas context to the constructor.
The way this was designed means you shouldn't need a react to use it :D.
NOTE: The resolution of the camera feed is the same as the size of the canvas.
```
import React from 'react';
import { QrReader } from 'zxing-qr-reader';
class App extends React.Component {
componentDidMount() {
const canvas = document.getElementById('canvas');//get canvas
const context = canvas.getContext('2d');//get canvas context
this.qr_reader = new QrReader(context);//instantiate qr reader
this.qr_reader.scan();//start scan
this.qr_reader.on('found', (result) => {
console.log(result.text); //called when qr code was found
});
}
componentWillUnmount() {
this.qr_reader.stop();
}
render() {
return (
//480p resolution in portrait on mobile
);
}
}
```
A cover calculation is done when the image is drawn to the canvas meaning supplying one resolution for mobile devices and one other for desktop devices should suffice.
Typically a 600x600 resolution for desktop and 480x852 resolution for mobile does the trick. This gives fullscreen image on mobile and a large enough image on most desktop monitors.
#### QR Code From File
```
const file = e.target.files[0];
const result = this.qr_reader.readBarCodeFromFile(file);
```
#### Error Handling
```
this.qr_reader.on('error', (e) => {
console.log(e);
});
```
##### Errors
```Stream already initialised.``` Occurs when ```scan()``` method is called contiguously.
```DOM Exception. Permission denied.``` Occurs when the user has not given your site permission. ```Error. Permission denied. Please update browser permissions to access camera.``` is written to the canvas in this event. Notifying the user.
```Browser does not support getUserMedia``` Occurs when a browser does not support webRTC. ```Error. Your browser does not support camera access. Use a modern browser or update your browser.``` is written to the canvas in this event. Notifying the user.
```Stream was not initialised``` Occurs when ```stop()``` method is called before ```scan()``` method.
```Reader isn't initialised``` Occurs when readBarCodeFile is called before wasm module is loaded. (Uncommon)
## Known Issues
Trying to set a canvas size that is of a higher resolution than the device camera can deliver, undefined behaviour occurs.
Calling ```stop()``` before the reader could fully initialise causes a bug where the last stream is always on. Meaning the user camera stays on and calling ```stop()``` changes nothing.