Skip to content

Commit

Permalink
updated browser details + updated supported formats
Browse files Browse the repository at this point in the history
  • Loading branch information
@odahcam
odahcam authored Feb 11, 2021
1 parent e7d0678 commit 164f057
Showing 1 changed file with 18 additions and 258 deletions.
276 changes: 18 additions & 258 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
| 1D product | 1D industrial | 2D |
| ---------- | ------------------- | -------------- |
| ~~UPC-A~~ | Code 39 | QR Code |
| ~~UPC-E~~ | ~~Code 93~~ | Data Matrix |
| EAN-8 | Code 128 | ~~Aztec~~ \* |
| UPC-A | Code 39 | QR Code |
| UPC-E | ~~Code 93~~ | Data Matrix |
| EAN-8 | Code 128 | Aztec |
| EAN-13 | ~~Codabar~~ | PDF 417 |
| | ITF | ~~MaxiCode~~ |
| | RSS-14 |
Expand Down Expand Up @@ -56,92 +56,33 @@ or

`yarn add @zxing/library`

## Usage

### Use on browser with ES6 modules:

```html
<script type="module">
import { BrowserQRCodeReader } from '@zxing/library';
const codeReader = new BrowserQRCodeReader();
const img = document.getElementById('img');
try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
console.log(result);
</script>
```
## Limitations

#### Or asynchronously:

```html
<script type="module">
import('@zxing/library').then({ BrowserQRCodeReader } => {
const codeReader = new BrowserQRCodeReader();
const img = document.getElementById('img');
try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
console.log(result);
});
</script>
```
On iOS-Devices **with iOS < 14.3** camera access works only in native Safari and not in other Browsers (Chrome,...) or Apps that use an UIWebView or WKWebView. This is not a restriction of this library but of the limited WebRTC support by Apple. The behavior might change in iOS 11.3 (Apr 2018?, not tested) as stated [here](https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html#//apple_ref/doc/uid/TP40014305-CH14-SW1)

### Use on browser with AMD:
> iOS 14.3 (released in december 2020) now supports WebRTC in 3rd party browsers as well 🎉
```html
<script type="text/javascript" src="https://unpkg.com/requirejs"></script>
<script type="text/javascript">
require(['@zxing/library'], ZXing => {
const codeReader = new ZXing.BrowserQRCodeReader();
const img = document.getElementById('img');
### Browser Support

try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
The browser layer is using the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) web API which is not supported by older browsers.

console.log(result);
});
</script>
```
_You can use external polyfills like [WebRTC adapter](https://github.com/webrtc/adapter) to increase browser compatibility._

### Use on browser with UMD:
Also, note that the library is using the [`TypedArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) (`Int32Array`, `Uint8ClampedArray`, etc.) which are not available in older browsers (e.g. Android 4 default browser).

```html
<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
<script type="text/javascript">
window.addEventListener('load', () => {
const codeReader = new ZXing.BrowserQRCodeReader();
const img = document.getElementById('img');
_You can use [core-js](https://github.com/zloirock/core-js) to add support to these browsers._

try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
In the PDF 417 decoder recent addition, the library now makes use of the new `BigInt` type, which [is not supported by all browsers][2] as well. There's no way to polyfill that and ponyfill libraries are **way to big**, but even if PDF 417 decoding relies on `BigInt` the rest of the library shall work ok in browsers that doesn't support it.

console.log(result);
});
</script>
```
_There's no polyfills for `BigInt` in the way it's coded in here._

### Use outside the browser with CommonJS:
## Usage

```javascript
const { MultiFormatReader, BarcodeFormat } = require('@zxing/library/esm5'); // use this path since v0.5.1
// use with commonJS
const { MultiFormatReader, BarcodeFormat } = require('@zxing/library');
// or with ES6 modules
import { MultiFormatReader, BarcodeFormat } from '@zxing/library';

const hints = new Map();
const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX/*, ...*/];
Expand All @@ -158,187 +99,6 @@ const binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));
reader.decode(binaryBitmap);
```

## Browser Support

The browser layer is using the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) web API which is not supported by older browsers.

_You can use external polyfills like [WebRTC adapter](https://github.com/webrtc/adapter) to increase browser compatibility._

Also, note that the library is using the [`TypedArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) (`Int32Array`, `Uint8ClampedArray`, etc.) which are not available in older browsers (e.g. Android 4 default browser).

_You can use [core-js](https://github.com/zloirock/core-js) to add support to these browsers._

In the PDF 417 decoder recent addition, the library now makes use of the new `BigInt` type, which [is not supported by all browsers][2] as well. There's no way to polyfill that and ponyfill libraries are **way to big**, but even if PDF 417 decoding relies on `BigInt` the rest of the library shall work ok in browsers that doesn't support it.

_There's no polyfills for `BigInt` in the way it's coded in here._

### Scanning from Video Camera

To display the input from the video camera you will need to add a video element in the HTML page:

```html
<video
id="video"
width="300"
height="200"
style="border: 1px solid gray"
></video>
```

To start decoding, first obtain a list of video input devices with:

```javascript
const codeReader = new ZXing.BrowserQRCodeReader();

codeReader
.listVideoInputDevices()
.then(videoInputDevices => {
videoInputDevices.forEach(device =>
console.log(`${device.label}, ${device.deviceId}`)
);
})
.catch(err => console.error(err));
```

If there is just one input device you can use the first `deviceId` and the video element id (in the example below is also 'video') to decode:

```javascript
const firstDeviceId = videoInputDevices[0].deviceId;

codeReader
.decodeOnceFromVideoDevice(firstDeviceId, 'video')
.then(result => console.log(result.text))
.catch(err => console.error(err));
```

If there are more input devices then you will need to chose one for `codeReader.decodeOnceFromVideoDevice` device id parameter.

You can also provide `undefined` for the device id parameter in which case the library will automatically choose the camera, preferring the main (environment facing) camera if more are available:

```javascript
codeReader
.decodeOnceFromVideoDevice(undefined, 'video')
.then(result => console.log(result.text))
.catch(err => console.error(err));
```

### Scanning from Video File

Similar as above you can use a video element in the HTML page:

```html
<video
id="video"
width="300"
height="200"
style="border: 1px solid gray"
></video>
```

And to decode the video from an url:

```javascript
const codeReader = new ZXing.BrowserQRCodeReader();
const videoSrc = 'your url to a video';

codeReader
.decodeFromVideo('video', videoSrc)
.then(result => console.log(result.text))
.catch(err => console.error(err));
```

You can also decode the video url without showing it in the page, in this case no `video` element is needed in HTML.

```javascript
codeReader
.decodeFromVideoUrl(videoUrl)
.then(result => console.log(result.text))
.catch(err => console.error(err));

// or alternatively

codeReader
.decodeFromVideo(null, videoUrl)
.then(result => console.log(result.text))
.catch(err => console.error(err));
```

### Scanning from Image

Similar as above you can use a img element in the HTML page (with src attribute set):

```html
<img
id="img"
src="qrcode-image.png"
width="200"
height="300"
style="border: 1px solid gray"
/>
```

And to decode the image:

```javascript
const codeReader = new ZXing.BrowserQRCodeReader();
const img = document.getElementById('img');

codeReader
.decodeFromImage(img)
.then(result => console.log(result.text))
.catch(err => console.error(err));
```

You can also decode the image url without showing it in the page, in this case no `img` element is needed in HTML:

```javascript
const imgSrc = 'url to image';

codeReader
.decodeFromImage(undefined, imgSrc)
.then(result => console.log(result.text))
.catch(err => console.error(err));
```

Or decode the image url directly from an url, with an `img` element in page (notice no `src` attribute is set for `img` element):

```html
<img
id="img-to-decode"
width="200"
height="300"
style="border: 1px solid gray"
/>
```

```javascript
const imgSrc = 'url to image';
const imgDomId = 'img-to-decode';

codeReader
.decodeFromImage(imgDomId, imgSrc)
.then(result => console.log(result.text))
.catch(err => console.error(err));
```

## Barcode generation

To generate a QR Code SVG image include 'zxing.qrcodewriter.min.js' from `build/vanillajs`. You will need to include an element where the SVG element will be appended:

```html
<div id="result"></div>
```

And then:

```javascript
const codeWriter = new ZXing.BrowserQRCodeSvgWriter();
// you can get a SVG element.
const svgElement = codeWriter.write(input, 300, 300);
// or render it directly to DOM.
codeWriter.writeToDom('#result', input, 300, 300);
```

## Contributing

See [Contributing Guide](https://github.com/zxing-js/library/blob/master/CONTRIBUTING.md) for information regarding porting approach and reasoning behind some of the approaches taken.
Expand Down

0 comments on commit 164f057

Please sign in to comment.