Skip to content

Commit

Permalink
preparing for publish
Browse files Browse the repository at this point in the history
  • Loading branch information
@odahcam
odahcam committed Dec 19, 2017
1 parent a3f29c7 commit e292a01
Showing 1 changed file with 67 additions and 67 deletions.
134 changes: 67 additions & 67 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
ZXing TypeScript
================

[![Build Status](https://travis-ci.org/aleris/zxing-typescript.svg?branch=master)](https://travis-ci.org/aleris/zxing-typescript)
[![Build Status](https://travis-ci.org/odahcam/zxing-ts.svg?branch=master)](https://travis-ci.org/odahcam/zxing-ts)

ZXing ("zebra crossing") TypeScript is an open-source, multi-format 1D/2D barcode image processing library ported to TypeScript from Java.

See https://github.com/zxing/zxing for original Java project.

Difference from base-repo
=========================

- Fixed all `tslint` errors.
- Created build with ES5 and Universal Module definition.
- Compatibility with anguar and other frameworks.
- Applyied some best practices and organization.

Work In Progress
================

Expand All @@ -27,21 +35,13 @@ Browser Usage

Examples below are for QR barcode, all other supported barcodes work similary.

`npm install zxing-typescript --save`

To use from javascript you need to build the browser distribution package:

`npm run build.browser.dist`
`npm i @odahcam/zxing-ts --save`

And then include what you need from `build/vanillajs` folder (for example `zxing.qrcodereader.min.js` for qr barcode reader).
To use from JS you need to include what you need from `build/umd` folder (for example `zxing.min.js`).

Or just grab the minified files that are available in [examples](https://github.com/aleris/zxing-typescript/tree/master/docs/examples).
See [some demo examples](https://github.com/odahcam/zxing-ts/tree/master/docs/examples) for browser code examples with javascript.

See [some demo examples](https://github.com/aleris/zxing-typescript/tree/master/docs/examples) for browser code examples with javascript.

All the examples are using es6, be sure is supported in your browser or modify as needed (eg. var instead of const etc.).

The builded library itself is targeting es5 (see `.babelrc`). If you want to target es6 change to `"presets": ["es2016"]` and add babel-preset-es2016 to dependencies (but be aware that webpack uglify does not yet support es6 as of this writing).
All the examples are using ES6, be sure is supported in your browser or modify as needed (eg. var instead of const etc.).

The browser library is using the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) web api which is marked as experimental as of this writing. You can use external polyfills like [webrtc-adapter](https://github.com/webrtc/adapter) to increase browser compatiblity.

Expand All @@ -58,27 +58,29 @@ To display the input from the video camera you will need to add a video element
To start decoding, first obtain a list of video input devices with:

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

codeReader.getVideoInputDevices()
.then((videoInputDevices) => {
videoInputDevices.forEach((element) => {
console.log(`${element.label}, ${element.deviceId}`)
})
console.log(`${element.label}, ${element.deviceId}`);
});
.catch((err) => {
console.error(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
const firstDeviceId = videoInputDevices[0].deviceId;

codeReader.decodeFromInputVideoDevice(firstDeviceId, 'video')
.then((result) => {
console.log(result.text)
console.log(result.text);
}).catch((err) => {
console.error(err)
})
console.error(err);
});
```
If there are more input devices then you will need to chose one for `codeReader.decodeFromInputVideoDevice` device id parameter.
Expand All @@ -88,13 +90,13 @@ You can also provide `undefined` for the device id parameter in which case the l
```javascript
codeReader.decodeFromInputVideoDevice(undefined, 'video')
.then((result) => {
console.log(result.text)
console.log(result.text);
}).catch((err) => {
console.error(err)
})
console.error(err);
});
```
A full working example for [QR Code from Video Camera](https://github.com/aleris/zxing-typescript/tree/master/docs/examples/qr-camera/) is provided in the [examples](https://github.com/aleris/zxing-typescript/tree/master/docs/examples/).
A full working example for [QR Code from Video Camera](https://github.com/odahcam/zxing-ts/tree/master/docs/examples/qr-camera/) is provided in the [examples](https://github.com/odahcam/zxing-ts/tree/master/docs/examples/).
### Scanning from Video File
Similar as above you can use a video element in the html page:
Expand All @@ -106,28 +108,29 @@ Similar as above you can use a video element in the html page:
And to decode the video from an url:
```javascript
const codeReader = new ZXing.BrowserQRCodeReader()
const videoSrc = 'your url to a video'
const codeReader = new ZXing.BrowserQRCodeReader();
const videoSrc = 'your url to a video';

codeReader.decodeFromVideoSource(videoSrc, 'video')
.then((result) => {
console.log(result.text)
console.log(result.text);
}).catch((err) => {
console.error(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.decodeFromVideoSource(videoSrc)
.then((result) => {
console.log(result.text)
console.log(result.text);
}).catch((err) => {
console.error(err)
})
console.error(err);
});
```
A full working example for [QR Code from Video File](https://github.com/aleris/zxing-typescript/tree/master/docs/examples/qr-video/) is provided in the [examples](https://github.com/aleris/zxing-typescript/tree/master/docs/examples/).
A full working example for [QR Code from Video File](https://github.com/odahcam/zxing-ts/tree/master/docs/examples/qr-video/) is provided in the [examples](https://github.com/odahcam/zxing-ts/tree/master/docs/examples/).
### Scanning from Image
Expand All @@ -140,26 +143,28 @@ Similar as above you can use a img element in the html page (with src attribute
And to decode the image:
```javascript
const codeReader = new ZXing.BrowserQRCodeReader()
const img = document.getElementById('img')
const codeReader = new ZXing.BrowserQRCodeReader();
const img = document.getElementById('img');

codeReader.decodeFromImage(img)
.then((result) => {
console.log(result.text)
console.log(result.text);
}).catch((err) => {
console.error(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'
const imgSrc = 'url to image';

codeReader.decodeFromImage(undefined, imgSrc)
.then((result) => {
console.log(result.text)
console.log(result.text);
}).catch((err) => {
console.error(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):
Expand All @@ -169,16 +174,17 @@ Or decode the image url directly from an url, with an `img` element in page (not
```
```javascript
const imgSrc = 'url to image'
codeReader.decodeFromImage('img', imgSrc)//here img is the image id from html, in our case 'img'
const imgSrc = 'url to image';

codeReader.decodeFromImage('img', imgSrc); // here img is the image id from html, in our case 'img'
.then((result) => {
console.log(result.text)
console.log(result.text);
}).catch((err) => {
console.error(err)
})
console.error(err);
});
```
A full working example for [QR Code from Image](https://github.com/aleris/zxing-typescript/tree/master/docs/examples/qr-image/) is provided in the [examples](https://github.com/aleris/zxing-typescript/tree/master/docs/examples/).
A full working example for [QR Code from Image](https://github.com/odahcam/zxing-ts/tree/master/docs/examples/qr-image/) is provided in the [examples](https://github.com/odahcam/zxing-ts/tree/master/docs/examples/).
### Barcode generation
Expand All @@ -191,50 +197,44 @@ To generate a QR Code SVG image include 'zxing.qrcodewriter.min.js' from `build/
And then:
```javascript
const codeWriter = new ZXing.BrowserQRCodeSvgWriter('result')
svgElement = codeWriter.write(input, 300, 300)
const codeWriter = new ZXing.BrowserQRCodeSvgWriter('result');
var svgElement = codeWriter.write(input, 300, 300);
```
A full working example for [QR Code write to SVG](https://github.com/aleris/zxing-typescript/tree/master/docs/examples/qr-svg-writer/) is provided in the [examples](https://github.com/aleris/zxing-typescript/tree/master/docs/examples/).
A full working example for [QR Code write to SVG](https://github.com/odahcam/zxing-ts/tree/master/docs/examples/qr-svg-writer/) is provided in the [examples](https://github.com/odahcam/zxing-ts/tree/master/docs/examples/).
Using from TypeScript
---------------------
Install the package:
`npm install zxing-typescript --save`
`npm i @odahcam/zxing-ts --save`
And then include directly `.ts` files you need, for example:
And then include directly the classes files you need, for example:
```javascript
import { BrowserQRCodeReader, VideoInputDevice } from 'zxing-typescript/src/browser/BrowserQRCodeReader'
import { BrowserQRCodeReader, VideoInputDevice } from '@odahcam/zxing-ts';
```
The usage is identical with the above.
Node Usage
----------
`npm install zxing-typescript --save`
If you want to use plain js (build to es5, see tsconfig.js):
`npm run build.node`
And the files will be available in `build/commonjs` folder.
`npm i @odahcam/zxing-ts --save`
To use in node you will need to provide an implementation of [`LuminanceSource`](https://github.com/aleris/zxing-typescript/blob/master/src/core/LuminanceSource.ts) for an image. A starting point is [`SharpImageLuminanceSource`](https://github.com/aleris/zxing-typescript/blob/master/src/test/core/SharpImageLuminanceSource.ts) from tests that is using [sharp image processing](https://github.com/lovell/sharp) node library.
To use in node you will need to provide an implementation of [`LuminanceSource`](https://github.com/odahcam/zxing-ts/blob/master/src/core/LuminanceSource.ts) for an image. A starting point is [`SharpImageLuminanceSource`](https://github.com/odahcam/zxing-ts/blob/master/src/test/core/SharpImageLuminanceSource.ts) from tests that is using [sharp image processing](https://github.com/lovell/sharp) node library.
No examples are availabe for now, however you can have a look at the extensive [tests cases](https://github.com/aleris/zxing-typescript/tree/master/src/test/core/qrcode).
No examples are availabe for now, however you can have a look at the extensive [tests cases](https://github.com/odahcam/zxing-ts/tree/master/src/test/core/qrcode).
Text Encoding and Decoding
==========================
To decode a barcode, the library needs at some point to decode from bits to text. Also, to generate a barcode it needs to encode text to bits. Unfortunately, the state of encoding and decoding text in javascript/browser is somehow messy at the moment.
To have full support for all encodings in [CharacterSetECI](https://github.com/aleris/zxing-typescript/blob/master/src/core/common/CharacterSetECI.ts) *except Cp437* use [text-encoding](https://github.com/inexorabletash/text-encoding) library. The library is used implicitly for node (and tests), but is an optional dependency for browser because is rather large (> 600k). You will need to include it yourself if you want/need to use it.
To have full support for all encodings in [CharacterSetECI](https://github.com/odahcam/zxing-ts/blob/master/src/core/common/CharacterSetECI.ts) *except Cp437* use [text-encoding](https://github.com/inexorabletash/text-encoding) library. The library is used implicitly for node (and tests), but is an optional dependency for browser because is rather large (> 600k). You will need to include it yourself if you want/need to use it.
By default, in browser, [TextDecoder](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder)/[TextEncoder](https://developer.mozilla.org/ro/docs/Web/API/TextEncoder) web api are used if available (take care as these are labeled as experimental as of this writing). Also, be aware that TextEncoder encodes only to UTF-8 as per spec. If these are not available the library falls back to a minimal implementation that only encodes and decodes to/from UTF-8 (see [`StringEncoding`](https://github.com/aleris/zxing-typescript/blob/master/src/core/util/StringEncoding.ts)).
By default, in browser, [TextDecoder](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder)/[TextEncoder](https://developer.mozilla.org/ro/docs/Web/API/TextEncoder) web api are used if available (take care as these are labeled as experimental as of this writing). Also, be aware that TextEncoder encodes only to UTF-8 as per spec. If these are not available the library falls back to a minimal implementation that only encodes and decodes to/from UTF-8 (see [`StringEncoding`](https://github.com/odahcam/zxing-ts/blob/master/src/core/util/StringEncoding.ts)).
Porting Information
===================
Expand Down

0 comments on commit e292a01

Please sign in to comment.