H5 js 识别二维码信息

quaggaJS ======== [](https://gitter.im/quaggaJS/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) - [Changelog](#changelog) (2017-06-07) - [Browser Support](#browser-support) - [Installing](#installing) - [Getting Started](#gettingstarted) - [API](#api) - [Configuration](#configobject) - [Tips & Tricks](#tipsandtricks) - [Sponsors](#sponsors) ## What is QuaggaJS? QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real- time localization and decoding of various types of barcodes such as __EAN__, __CODE 128__, __CODE 39__, __EAN 8__, __UPC-A__, __UPC-C__, __I2of5__, __2of5__, __CODE 93__ and __CODABAR__. The library is also capable of using `getUserMedia` to get direct access to the user's camera stream. Although the code relies on heavy image-processing even recent smartphones are capable of locating and decoding barcodes in real-time. Try some [examples](https://serratus.github.io/quaggaJS/examples) and check out the blog post ([How barcode-localization works in QuaggaJS][oberhofer_co_how]) if you want to dive deeper into this topic. ![teaser][teaser_left]![teaser][teaser_right] ## Yet another barcode library? This is not yet another port of the great [zxing][zxing_github] library, but more of an extension to it. This implementation features a barcode locator which is capable of finding a barcode-like pattern in an image resulting in an estimated bounding box including the rotation. Simply speaking, this reader is invariant to scale and rotation, whereas other libraries require the barcode to be aligned with the viewport. ## <a name="browser-support">Browser Support</a> Quagga makes use of many modern Web-APIs which are not implemented by all browsers yet. There are two modes in which Quagga operates: 1. analyzing static images and 2. using a camera to decode the images from a live-stream. The latter requires the presence of the MediaDevices API. You can track the compatibility of the used Web-APIs for each mode: - [Static Images](http://caniuse.com/#feat=webworkers,canvas,typedarrays,bloburls,blobbuilder) - [Live Stream](http://caniuse.com/#feat=webworkers,canvas,typedarrays,bloburls,blobbuilder,stream) ### Static Images The following APIs need to be implemented in your browser: - [webworkers](http://caniuse.com/#feat=webworkers) - [canvas](http://caniuse.com/#feat=canvas) - [typedarrays](http://caniuse.com/#feat=typedarrays) - [bloburls](http://caniuse.com/#feat=bloburls) - [blobbuilder](http://caniuse.com/#feat=blobbuilder) ### Live Stream In addition to the APIs mentioned above: - [MediaDevices](http://caniuse.com/#feat=stream) __Important:__ Accessing `getUserMedia` requires a secure origin in most browsers, meaning that `http://` can only be used on `localhost`. All other hostnames need to be served via `https://`. You can find more information in the [Chrome M47 WebRTC Release Notes](https://groups.google.com/forum/#!topic/discuss-webrtc/sq5CVmY69sc). ### Feature-detection of getUserMedia Every browser seems to differently implement the `mediaDevices.getUserMedia` API. Therefore it's highly recommended to include [webrtc-adapter](https://github.com/webrtc/adapter) in your project. Here's how you can test your browser's capabilities: ```javascript if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') { // safely access `navigator.mediaDevices.getUserMedia` } ``` The above condition evaluates to: | Browser | result | | ------------- |:-------:| | Edge | `true` | | Chrome | `true` | | Firefox | `true` | | IE 11 | `false` | | Safari iOS | `false` | ## <a name="installing">Installing</a> QuaggaJS can be installed using __npm__, __bower__, or by including it with the __script__ tag. ### NPM ```console > npm install quagga ``` And then import it as dependency in your project: ```javascript import Quagga from 'quagga'; // ES6 const Quagga = require('quagga').default; // Common JS (important: default) ``` Currently, the full functionality is only available through the browser. When using QuaggaJS within __node__, only file-based decoding is available. See the example for [node_examples](#node-example). ### Bower You can also install QuaggaJS through __bower__: ```console > bower install quagga ``` ### Script-Tag Anno 1998 You can simply include `dist/quagga.min.js` in your project and you are ready to go. The script exposes the library on the global namespace under `Quagga`. ## <a name="gettingstarted">Getting Started</a> For starters, have a look at the [examples][github_examples] to get an idea where to go from here. ## <a name="Building">Building</a> You can build the library yourself by simply cloning the repo and typing: ```console > npm install > npm run build ``` This npm script builds a non optimized version `quagga.js` and a minified version `quagga.min.js` and places both files in the `dist` folder. Additionally, a `quagga.map` source-map is placed alongside these files. This file is only valid for the non-uglified version `quagga.js` because the minified version is altered after compression and does not align with the map file any more. ### Node The code in the `dist` folder is only targeted to the browser and won't work in node due to the dependency on the DOM. For the use in node, the `build` command also creates a `quagga.js` file in the `lib` folder. ## <a name="api">API</a> You can check out the [examples][github_examples] to get an idea of how to use QuaggaJS. Basically the library exposes the following API: ### <a name="quaggainit">Quagga.init(config, callback)</a> This method initializes the library for a given configuration `config` (see below) and invokes the `callback(err)` when Quagga has finished its bootstrapping phase. The initialization process also requests for camera access if real-time detection is configured. In case of an error, the `err` parameter is set and contains information about the cause. A potential cause may be the `inputStream.type` is set to `LiveStream`, but the browser does not support this API, or simply if the user denies the permission to use the camera. If you do not specify a target, QuaggaJS would look for an element that matches the CSS selector `#interactive.viewport` (for backwards compatibility). `target` can be a string (CSS selector matching one of your DOM node) or a DOM node. ```javascript Quagga.init({ inputStream : { name : "Live", type : "LiveStream", target: document.querySelector('#yourElement') // Or '#yourElement' (optional) }, decoder : { readers : ["code_128_reader"] } }, function(err) { if (err) { console.log(err); return } console.log("Initialization finished. Ready to start"); Quagga.start(); }); ``` ### Quagga.start() When the library is initialized, the `start()` method starts the video-stream and begins locating and decoding the images. ### Quagga.stop() If the decoder is currently running, after calling `stop()` the decoder does not process any more images. Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the camera. ### Quagga.onProcessed(callback) This method registers a `callback(data)` function that is called for each frame after the processing is done. The `data` object contains detailed information about the success/failure of the operation. The output varies, depending whether the detection and/or decoding were successful or not. ### Quagga.onDetected(callback) Registers a `callback(data)` function which is triggered whenever a barcode- pattern has been located and decoded successfully. The passed `data` object contains information about the decoding process including the detected code which can be obtained by calling `data.codeResult.code`. ###