@zxing/library - npm Package Compare versions

Comparing version 0.9.4 to 0.10.0

esm5/browser/BrowserCodeReader.d.ts

@@ -12,13 +12,40 @@ import { VideoInputDevice } from './VideoInputDevice';
 export declare class BrowserCodeReader {
-    private reader;
+    protected readonly reader: Reader;
     private timeBetweenScansMillis;
     private hints?;
+    /**
+     * The HTML video element, used to display the camera stream.
+     */
     private videoElement;
+    /**
+     * The HTML image element, used as a fallback for the video element when decoding.
+     */
     private imageElement;
+    /**
+     * The HTML canvas element, used to draw the video or image's frame for decoding.
+     */
     private canvasElement;
+    /**
+     * The HTML canvas element context.
+     */
     private canvasElementContext;
     private timeoutHandler;
+    /**
+     * The stream output from camera.
+     */
     private stream;
+    /**
+     * Should contain the current registered listener for video play-ended,
+     * used to unregister that listener when needed.
+     */
     private videoPlayEndedEventListener;
+    /**
+     * Should contain the current registered listener for video playing,
+     * used to unregister that listener when needed.
+     */
     private videoPlayingEventListener;
+    /**
+     * Should contain the current registered listener for image loading,
+     * used to unregister that listener when needed.
+     */
     private imageLoadedEventListener;
@@ -25,0 +52,0 @@ /**

esm5/browser/BrowserQRCodeSvgWriter.d.ts

@@ -12,11 +12,3 @@ import EncodeHintType from '../core/EncodeHintType';
     /**
-     * A HTML container element for the image.
-     */
-    private containerElement?;
-    /**
-     * Constructs. 😉
-     */
-    constructor(containerElement?: string | HTMLElement);
-    /**
-     * Writes and renders a QRCode to the DOM.
+     * Writes and renders a QRCode SVG element.
      *
@@ -32,3 +24,3 @@ * @param contents
      */
-    private renderResultToDOM;
+    writeToDom(containerElement: string | HTMLElement, contents: string, width: number, height: number, hints?: Map<EncodeHintType, any>): void;
     /**
@@ -35,0 +27,0 @@ * Note that the input matrix uses 0 == white, 1 == black.

esm5/browser/BrowserQRCodeSvgWriter.js

@@ -12,15 +12,6 @@ "use strict";
 var BrowserQRCodeSvgWriter = /** @class */ (function () {
-    /**
-     * Constructs. 😉
-     */
-    function BrowserQRCodeSvgWriter(containerElement) {
-        if (typeof containerElement === 'string') {
-            this.containerElement = document.getElementById(containerElement);
-        }
-        else {
-            this.containerElement = containerElement;
-        }
+    function BrowserQRCodeSvgWriter() {
     }
     /**
-     * Writes and renders a QRCode to the DOM.
+     * Writes and renders a QRCode SVG element.
      *
@@ -54,3 +45,3 @@ * @param contents
         var code = Encoder_1.default.encode(contents, errorCorrectionLevel, hints);
-        return this.renderResultToDOM(code, width, height, quietZone);
+        return this.renderResult(code, width, height, quietZone);
     };
@@ -60,7 +51,10 @@ /**
      */
-    BrowserQRCodeSvgWriter.prototype.renderResultToDOM = function (code, width /*int*/, height /*int*/, quietZone /*int*/) {
-        var svgElement = this.renderResult(code, width, height, quietZone);
-        if (this.containerElement)
-            this.containerElement.appendChild(svgElement);
-        return svgElement;
+    BrowserQRCodeSvgWriter.prototype.writeToDom = function (containerElement, contents, width, height, hints) {
+        if (hints === void 0) { hints = null; }
+        if (typeof containerElement === 'string') {
+            containerElement = document.querySelector(containerElement);
+        }
+        var svgElement = this.write(contents, width, height, hints);
+        if (containerElement)
+            containerElement.appendChild(svgElement);
     };
@@ -67,0 +61,0 @@ /**

package.json

 {
     "name": "@zxing/library",
-    "version": "0.9.4",
+    "version": "0.10.0",
     "description": "TypeScript port of ZXing multi-format 1D/2D barcode image processing library.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -17,12 +17,14 @@ [<img align="right" src="https://raw.github.com/wiki/zxing/zxing/zxing-logo.png"/>][1]
 
-| 1D product | 1D industrial  | 2D
-| ---------- | -------------- | --------------
-| ~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         |
-|            | ~RSS-Expanded~ |
+| 1D product | 1D industrial       | 2D             |
+| ---------- | ------------------- | -------------- |
+| ~~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              |
+|            | ~~RSS-Expanded~~ \* |
 
+**\*** In progress, may have open PR.
+
 ## Status
@@ -39,4 +41,3 @@
 
-
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/39d86bc5d5f04bc8953cc68d729807b0)](https://www.codacy.com/app/zxing-js/library?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=zxing-js/library&amp;utm_campaign=Badge_Grade)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/39d86bc5d5f04bc8953cc68d729807b0)](https://www.codacy.com/app/zxing-js/library?utm_source=github.com&utm_medium=referral&utm_content=zxing-js/library&utm_campaign=Badge_Grade)
 [![Maintainability](https://api.codeclimate.com/v1/badges/2b9c6ae92412ee8e15a9/maintainability)](https://codeclimate.com/github/zxing-js/library/maintainability)
@@ -52,6 +53,4 @@ [![Test Coverage](https://api.codeclimate.com/v1/badges/2b9c6ae92412ee8e15a9/test_coverage)](https://codeclimate.com/github/zxing-js/library/test_coverage)
 
-## Usage
+## Installation
 
-### Installation
-
 `npm i @zxing/library --save`
@@ -63,34 +62,91 @@
 
-### Environments
+## Usage
 
-Examples below are for QR barcode, all other supported barcodes work similarly.
+Use on browser with ES6 modules:
 
-#### Browser
+```javascript
+import { BrowserQRCodeReader } from '@zxing/library';
 
-To use from JS you need to include what you need from `build/umd` folder (for example `zxing.min.js`).
+const codeReader = new 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);
+```
 
-_You can use external polyfills like [WebRTC adapter](https://github.com/webrtc/adapter) to increase browser compatibility._
+Use on browser with AMD:
 
-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).
+```javascript
+require(['@zxing/library'], ZXing => {
+    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);
+    }
 
-#### TypeScript
+    console.log(result);
+});
+```
 
-You can include directly the classes you need, for example:
+Use on browser with UMD:
 
-```typescript
-import { BrowserQRCodeReader, VideoInputDevice } from '@zxing/library';
+```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');
+
+        try {
+            const result = await codeReader.decodeFromImage(img);
+        } catch (err) {
+            console.error(err);
+        }
+
+        console.log(result);
+    });
+</script>
 ```
 
-#### Node
+Use outside the browser with vanilaJS:
 
-To use in node you will need to provide an implementation of [`LuminanceSource`](https://github.com/zxing-js/library/blob/master/src/core/LuminanceSource.ts) for an image. A starting point is [`SharpImageLuminanceSource`](https://github.com/zxing-js/library/blob/master/src/test/core/SharpImageLuminanceSource.ts) from tests that is using [sharp image processing](https://github.com/lovell/sharp) Node library.
+```javascript
+const { MultiFormatReader, BarcodeFormat } = require('@zxing/library';);
 
-No examples are availabe for now, however you can have a look at the extensive [tests cases](https://github.com/zxing-js/library/tree/master/src/test/core/qrcode).
+const hints = new Map();
+const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX/*, ...*/];
 
+hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
+
+const reader = new MultiFormatReader();
+
+reader.setHints(hints);
+
+const luminanceSource = new RGBLuminanceSource(imgWidth, imgHeight, imgByteArray);
+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._
+
 ### Scanning from Video Camera
@@ -101,3 +157,8 @@
 ```html
-<video id="video" width="300" height="200" style="border: 1px solid gray"></video>
+<video
+    id="video"
+    width="300"
+    height="200"
+    style="border: 1px solid gray"
+></video>
 ```
@@ -110,6 +171,7 @@
 
-codeReader.getVideoInputDevices()
+codeReader
+    .getVideoInputDevices()
     .then(videoInputDevices => {
-        videoInputDevices.forEach(
-            device => console.log(`${device.label}, ${device.deviceId}`)
+        videoInputDevices.forEach(device =>
+            console.log(`${device.label}, ${device.deviceId}`)
         );
@@ -125,3 +187,4 @@ })
 
-codeReader.decodeFromInputVideoDevice(firstDeviceId, 'video')
+codeReader
+    .decodeFromInputVideoDevice(firstDeviceId, 'video')
     .then(result => console.log(result.text))
@@ -136,3 +199,4 @@ .catch(err => console.error(err));
 ```javascript
-codeReader.decodeFromInputVideoDevice(undefined, 'video')
+codeReader
+    .decodeFromInputVideoDevice(undefined, 'video')
     .then(result => console.log(result.text))
@@ -147,3 +211,8 @@ .catch(err => console.error(err));
 ```html
-<video id="video" width="300" height="200" style="border: 1px solid gray"></video>
+<video
+    id="video"
+    width="300"
+    height="200"
+    style="border: 1px solid gray"
+></video>
 ```
@@ -157,3 +226,4 @@
 
-codeReader.decodeFromVideoSource(videoSrc, 'video')
+codeReader
+    .decodeFromVideoSource(videoSrc, 'video')
     .then(result => console.log(result.text))
@@ -166,3 +236,4 @@ .catch(err => console.error(err));
 ```javascript
-codeReader.decodeFromVideoSource(videoSrc)
+codeReader
+    .decodeFromVideoSource(videoSrc)
     .then(result => console.log(result.text))
@@ -177,3 +248,9 @@ .catch(err => console.error(err));
 ```html
-<img id="img" src="qrcode-image.png" width="200" height="300" style="border: 1px solid gray">
+<img
+    id="img"
+    src="qrcode-image.png"
+    width="200"
+    height="300"
+    style="border: 1px solid gray"
+/>
 ```
@@ -187,3 +264,4 @@
 
-codeReader.decodeFromImage(img)
+codeReader
+    .decodeFromImage(img)
     .then(result => console.log(result.text))
@@ -198,3 +276,4 @@ .catch(err => console.error(err));
 
-codeReader.decodeFromImage(undefined, imgSrc)
+codeReader
+    .decodeFromImage(undefined, imgSrc)
     .then(result => console.log(result.text))
@@ -207,3 +286,8 @@ .catch(err => console.error(err));
 ```html
-<img id="img-to-decode" width="200" height="300" style="border: 1px solid gray">
+<img
+    id="img-to-decode"
+    width="200"
+    height="300"
+    style="border: 1px solid gray"
+/>
 ```
@@ -215,3 +299,4 @@
 
-codeReader.decodeFromImage(imgDomId, imgSrc)
+codeReader
+    .decodeFromImage(imgDomId, imgSrc)
     .then(result => console.log(result.text))
@@ -232,4 +317,7 @@ .catch(err => console.error(err));
 ```javascript
-const codeWriter = new ZXing.BrowserQRCodeSvgWriter('result');
+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);
 ```
@@ -251,5 +339,5 @@
 
-[![Bless](https://cdn.rawgit.com/LunaGao/BlessYourCodeTag/master/tags/alpaca.svg)](http://lunagao.github.io/BlessYourCodeTag/) 
+[![Bless](https://cdn.rawgit.com/LunaGao/BlessYourCodeTag/master/tags/alpaca.svg)](http://lunagao.github.io/BlessYourCodeTag/)
 
 [0]: https://www.npmjs.com/package/@zxing/library
 [1]: https://github.com/zxing/zxing

No alert changes

Improved metrics

Total package byte prevSize

2603799

increased by0.21%

Number of package files

354

increased by0.85%

Lines of code

21301

increased by0.3%

Number of lines in readme file

326

increased by36.97%

No dependency changes