quaggaJS
========
[![Join the chat at https://gitter.im/quaggaJS/Lobby](https://badges.gitter.im/quaggaJS/Lobby.svg)](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 | `true` |
## <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`.
### Q
没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript条形码扫描库QuaggaJS.zip
共232个文件
jpg:122个
js:73个
png:14个
5星 · 超过95%的资源 需积分: 49 40 下载量 186 浏览量
2019-07-18
19:40:56
上传
评论 1
收藏 17.62MB ZIP 举报
温馨提示
QuaggaJS 是一个完全用 JavaScript 编写的条形码扫描库,支持实时的各种类型的条形码扫描,例如 EAN 和 CODE128. 该工具同时使用 getUserMedia 来直接访问用户的摄像头。代码重度依赖智能手机的图像处理。 你可以通过这里尝试一些 实例 或者阅读文章 (How barcode-localization works in QuaggaJS) 来了解更新啊关系的内容。 示例代码: Quagga.decodeSingle({ readers: ['code_128_reader'], locate: true, // try to locate the barcode in the image src: '/test/fixtures/code_128/image-001.jpg' // or 'data:image/jpg;base64,' data }, function(result){ console.log(result); }); 标签:QuaggaJS
资源推荐
资源详情
资源评论
收起资源包目录
JavaScript条形码扫描库QuaggaJS.zip (232个子文件)
.babelrc 1KB
styles.css 8KB
colors.css 527B
fonts.css 95B
.eslintrc 2KB
start.frag 360B
end.frag 34B
.gitignore 69B
live_w_locator.html 5KB
file_input.html 4KB
camera_example.html 3KB
static_images.html 3KB
image-012.jpg 714KB
image-013.jpg 633KB
image-002.jpg 615KB
image-005.jpg 548KB
image-006.jpg 513KB
image-003.jpg 500KB
image-004.jpg 483KB
image-009.jpg 387KB
image-001.jpg 381KB
image-010.jpg 375KB
image-008.jpg 356KB
image-007.jpg 312KB
image-017.jpg 187KB
image-010.jpg 183KB
image-002.jpg 178KB
image-001.jpg 174KB
image-012.jpg 173KB
image-003.jpg 171KB
image-015.jpg 169KB
image-008.jpg 168KB
image-005.jpg 164KB
image-004.jpg 162KB
image-002.jpg 160KB
image-009.jpg 156KB
image-005.jpg 154KB
image-003.jpg 151KB
image-016.jpg 147KB
image-006.jpg 145KB
image-009.jpg 144KB
image-001.jpg 143KB
image-005.jpg 140KB
image-010.jpg 140KB
image-011.jpg 137KB
image-004.jpg 128KB
image-007.jpg 125KB
image-007.jpg 122KB
image-008.jpg 121KB
image-004.jpg 118KB
image-002.jpg 117KB
image-007.jpg 117KB
image-008.jpg 116KB
image-010.jpg 115KB
image-006.jpg 111KB
image-006.jpg 111KB
image-005.jpg 111KB
image-009.jpg 109KB
image-004.jpg 107KB
image-008.jpg 106KB
image-002.jpg 104KB
image-010.jpg 98KB
image-005.jpg 98KB
image-003.jpg 97KB
image-007.jpg 96KB
image-001.jpg 94KB
image-003.jpg 93KB
image-004.jpg 93KB
image-007.jpg 91KB
image-010.jpg 91KB
image-006.jpg 89KB
image-006.jpg 88KB
image-006.jpg 88KB
image-001.jpg 86KB
image-009.jpg 85KB
image-002.jpg 84KB
image-001.jpg 84KB
image-003.jpg 84KB
image-002.jpg 84KB
image-010.jpg 83KB
image-006.jpg 83KB
image-004.jpg 83KB
image-002.jpg 82KB
image-007.jpg 82KB
image-009.jpg 82KB
image-002.jpg 82KB
image-004.jpg 82KB
image-007.jpg 80KB
image-001.jpg 80KB
image-008.jpg 80KB
image-003.jpg 80KB
image-009.jpg 79KB
image-010.jpg 79KB
image-006.jpg 78KB
image-005.jpg 78KB
image-006.jpg 77KB
image-009.jpg 76KB
image-005.jpg 76KB
image-005.jpg 73KB
image-001.jpg 73KB
共 232 条
- 1
- 2
- 3
资源评论
- dutulin2023-07-23#完美解决问题
weixin_39840387
- 粉丝: 784
- 资源: 3万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功