https://github.com/zxing-js/browser
ZXing for JS's browser layer with decoding implementations for browser.
https://github.com/zxing-js/browser
barcode browser hacktoberfest javascript qr-code typescript zxing
Last synced: 3 months ago
JSON representation
ZXing for JS's browser layer with decoding implementations for browser.
- Host: GitHub
- URL: https://github.com/zxing-js/browser
- Owner: zxing-js
- License: mit
- Created: 2018-08-16T04:25:16.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-22T13:55:59.000Z (over 1 year ago)
- Last Synced: 2025-06-20T12:24:19.564Z (4 months ago)
- Topics: barcode, browser, hacktoberfest, javascript, qr-code, typescript, zxing
- Language: TypeScript
- Homepage:
- Size: 4.58 MB
- Stars: 243
- Watchers: 8
- Forks: 43
- Open Issues: 57
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[
][1]
# ZXing
## What is ZXing?
> [ZXing][1] ("zebra crossing") is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.
## Browser layer
This is a library for enabling you to use with ease the ZXing for JS library on the browser. It includes features like scanning an `![]()
` element, as well as ``, images and videos from URLs and also it helps handling webcam use for scanning directly from a hardware connected camera. It does not offers support to any physical barcode readers or things like that.
See @zxing-js/library for the complete API including decoding classes and use outside of the browser.
See @zxing-js/ngx-scanner for using the library in Angular.
See @zxing-js/text-encoding for special character support in barcodes.
## Usage (how to use)
Installation, import into app and usage examples in this section.
### Instalation
Install via yarn, npm, etc:
```bash
yarn add @zxing/browser
```
```bash
npm i @zxing/browser
```
Or just import an script tag from your favorite NPM registry connected CDN:
```html
```
### How to import into your app
#### ES6 modules
```html
import { BrowserQRCodeReader } from '@zxing/browser';
const codeReader = new BrowserQRCodeReader();
// do something with codeReader...
```
##### Or asynchronously
```html
import('@zxing/browser').then({ BrowserQRCodeReader } => {
const codeReader = new BrowserQRCodeReader();
// do something with codeReader...
});
```
#### With AMD
```html
require(['@zxing/browser'], ZXingBrowser => {
const codeReader = new ZXingBrowser.BrowserQRCodeReader();
// do something with codeReader...
});
```
#### With UMD
```html
window.addEventListener('load', () => {
const codeReader = new ZXingBrowser.BrowserQRCodeReader();
// do something with codeReader...
});
```
### Using the API
Examples here will assume you already imported ZXingBrowser into your app.
#### Scan from webcam
Continuous scan (runs and decodes barcodes until you stop it):
```typescript
const codeReader = new BrowserQRCodeReader();
const videoInputDevices = await ZXingBrowser.BrowserCodeReader.listVideoInputDevices();
// choose your media device (webcam, frontal camera, back camera, etc.)
const selectedDeviceId = videoInputDevices[0].deviceId;
console.log(`Started decode from camera with id ${selectedDeviceId}`);
const previewElem = document.querySelector('#test-area-qr-code-webcam > video');
// you can use the controls to stop() the scan or switchTorch() if available
const controls = await codeReader.decodeFromVideoDevice(selectedDeviceId, previewElem, (result, error, controls) => {
// use the result and error values to choose your actions
// you can also use controls API in this scope like the controls
// returned from the method.
});
// stops scanning after 20 seconds
setTimeout(() => controls.stop(), 20000);
```
You can also use `decodeFromConstraints` instead of `decodeFromVideoDevice` to pass your own constraints for the method choose the device you want directly from your constraints.
Also, `decodeOnceFromVideoDevice` is available too so you can `await` the method until it detects the first barcode.
### Scan from video or image URL
```javascript
const codeReader = new ZXingBrowser.BrowserQRCodeReader();
const source = 'https://my-image-or-video/01.png';
const resultImage = await codeReader.decodeFromImageUrl(source);
// or use decodeFromVideoUrl for videos
const resultVideo = await codeReader.decodeFromVideoUrl(source);
```
### Scan from video or image HTML element
```javascript
const codeReader = new ZXingBrowser.BrowserQRCodeReader();
const sourceElem = document.querySelector('#my-image-id');
const resultImage = await codeReader.decodeFromImageElement(sourceElem);
// or use decodeFromVideoElement for videos
const resultVideo = await codeReader.decodeFromVideoElement(sourceElem);
```
### Other scan methods
There's still other scan methods you can use for decoding barcodes in the browser with `BrowserCodeReader` family, all of those and previous listed in here:
- `decodeFromCanvas`
- `decodeFromImageElement`
- `decodeFromImageUrl`
- `decodeFromConstraints`
- `decodeFromStream`
- `decodeFromVideoDevice`
- `decodeFromVideoElement`
- `decodeFromVideoUrl`
- `decodeOnceFromConstraints`
- `decodeOnceFromStream`
- `decodeOnceFromVideoDevice`
- `decodeOnceFromVideoElement`
- `decodeOnceFromVideoUrl`
That's it for now.
### List of browser readers
- `BrowserAztecCodeReader`
- `BrowserCodeReader` (abstract, needs to be extend for use)
- `BrowserDatamatrixCodeReader`
- `BrowserMultiFormatOneDReader`
- `BrowserMultiFormatReader` (2D + 1D)
- `BrowserPDF417CodeReader`
- `BrowserQRCodeReader`
### Customize `BrowserCodeReader` options
You can also customize some options on the code reader at instantiation time. More docs comming soon.
---
[](http://lunagao.github.io/BlessYourCodeTag/)
[0]: https://www.npmjs.com/package/@zxing/browser
[1]: https://github.com/zxing/zxing