# @zxing/browser

> ZXing for JS's browser layer.

Latest version **0.2.1** (published 2026-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zxing/browser
pnpm add @zxing/browser
yarn add @zxing/browser
bun add @zxing/browser
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2026-07-06 |
| First published | 2020-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 309 |
| Maintainers | odahcam, werthd |
| Keywords | reader, writer, decode, encode, scanner, generator, barcode, qr-code, barcode 1d, barcode 2d, typescript, zxing |

## Links

- npm: https://www.npmjs.com/package/@zxing/browser
- Repository: https://github.com/zxing-js/browser
- Homepage: https://github.com/zxing-js/browser#readme
- Issues: https://github.com/zxing-js/browser/issues/new
- npm.io page: https://npm.io/package/@zxing/browser

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2026-07-06
- 0.0.1-dev.5228f6d (dev) — 2020-10-24
- 0.0.1-beta.2 (beta) — 2020-10-24
- 0.0.1-preview.1 (preview) — 2020-10-21
- 0.2.0 — 2026-04-27
- 0.1.5 — 2024-05-22
- 0.1.4 — 2023-06-09
- 0.1.3 — 2023-04-19
- 0.1.1 — 2022-02-06
- 0.0.10 — 2021-11-15
- 0.0.9 — 2021-04-16
- 0.0.8 — 2021-02-25
- 0.0.7 — 2021-01-27
- 0.0.6 — 2021-01-27
- 0.0.5 — 2020-10-29
- … 5 more at https://npm.io/package/@zxing/browser/versions

## README

[<img align="right" src="https://raw.github.com/wiki/zxing/zxing/zxing-logo.png"/>][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 `<img>` element, as well as `<video>`, 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
<!-- loading ZXingBrowser via UNPKG -->
<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
```

### How to import into your app

#### ES6 modules

```html
<script type="module">
  import { BrowserQRCodeReader } from '@zxing/browser';

  const codeReader = new BrowserQRCodeReader();

  // do something with codeReader...

</script>
```

##### Or asynchronously

```html
<script type="module">
  import('@zxing/browser').then(({ BrowserQRCodeReader }) => {

    const codeReader = new BrowserQRCodeReader();

    // do something with codeReader...

  });
</script>
```

#### With AMD

```html
<script type="text/javascript" src="https://unpkg.com/requirejs"></script>
<script type="text/javascript">
  require(['@zxing/browser'], ZXingBrowser => {

    const codeReader = new ZXingBrowser.BrowserQRCodeReader();

    // do something with codeReader...

  });
</script>
```

#### With UMD

```html
<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
<script type="text/javascript">
  window.addEventListener('load', () => {

    const codeReader = new ZXingBrowser.BrowserQRCodeReader();

    // do something with codeReader...

  });
</script>
```

### 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` (base class, requires a `Reader` instance — use a subclass for convenience)
- `BrowserDatamatrixCodeReader`
- `BrowserMultiFormatOneDReader`
- `BrowserMultiFormatReader` (2D + 1D)
- `BrowserPDF417Reader`
- `BrowserQRCodeReader`

### Customize `BrowserCodeReader` options

You can also customize some options on the code reader at instantiation time. More docs comming soon.

---


[0]: https://www.npmjs.com/package/@zxing/browser
[1]: https://github.com/zxing/zxing

---
_Source: https://npm.io/package/@zxing/browser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._