├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── dist
    ├── vue-quagga.js
    └── vue-quagga.js.map
├── examples
    └── src
    │   ├── App.vue
    │   ├── index.html
    │   └── index.js
├── package-lock.json
├── package.json
├── src
    ├── Scanner.vue
    └── index.js
├── webpack.dev.js
├── webpack.prod.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | { "presets": ["@babel/preset-env"] }
2 | 
3 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "extends": ["standard",
 3 |     'plugin:vue/recommended',
 4 |     "plugin:prettier/recommended"
 5 |   ],
 6 |   "rules": {
 7 |     "prettier/prettier": [
 8 |       "error",
 9 |       {
10 |         "singleQuote": true,
11 |         "trailingComma": "es5"
12 |       }
13 |     ]
14 |   }
15 | };
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log
 4 | yarn-error.log
 5 | 
 6 | # Editor directories and files
 7 | .idea
 8 | *.suo
 9 | *.ntvs*
10 | *.njsproj
11 | *.sln
12 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | examples
2 | .babelrc
3 | .gitignore
4 | .editorconfig
5 | .eslintrc.js
6 | .idea
7 | webpack.dev.js
8 | webpack.prod.js
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 tanasinn
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![](https://cdn-images-1.medium.com/max/1600/1*u5EN9YE4S2R7QbJ-rHOZpg.gif)
  2 | 
  3 | # vue-quaggajs
  4 | 
  5 | [quaggajs](https://serratus.github.io/quaggaJS/) 's wrapper for Vue.js
  6 | 
  7 | # Installtion
  8 | 
  9 | ## npm
 10 | 
 11 | ``` bash
 12 | npm i vue-quaggajs
 13 | ```
 14 | 
 15 | # Basic Example
 16 | 
 17 | ```
 18 | <template>
 19 |   <div>
 20 |     <v-quagga :onDetected="logIt" :readerSize="readerSize" :readerTypes="['ean_reader']"></v-quagga>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 | import Vue from 'vue'
 26 | import VueQuagga from 'vue-quaggajs';
 27 | 
 28 | // register component 'v-quagga'
 29 | Vue.use(VueQuagga);
 30 | 
 31 | export default {
 32 |   name: 'VueBarcodeTest',
 33 |   data () {
 34 |     return {
 35 |       readerSize: {
 36 |         width: 640,
 37 |         height: 480
 38 |       },
 39 |       detecteds: []
 40 |     }
 41 |   },
 42 |   methods: {
 43 |     logIt (data) {
 44 |       console.log('detected', data)
 45 |     }
 46 | 
 47 |   }
 48 | }
 49 | </script>
 50 | ```
 51 | 
 52 | 
 53 | # Usage
 54 | 
 55 | ### `onDetected` : function(result)
 56 | 
 57 | Reference: [Quagga.onDetected(callback)](https://github.com/serratus/quaggaJS#quaggaondetectedcallback)
 58 | 
 59 | default function:
 60 | 
 61 | ```js
 62 | function (result) {
 63 |   console.log('detected: ', result);
 64 | }
 65 | ```
 66 | 
 67 | ### `onProcessed` : function(result)
 68 | 
 69 | Reference: [Quagga.onProcessed(callback)](https://github.com/serratus/quaggaJS#quaggaonprocessedcallback)
 70 | 
 71 | default function:
 72 | 
 73 | ```js
 74 | function (result) {
 75 |   let drawingCtx = Quagga.canvas.ctx.overlay,
 76 |     drawingCanvas = Quagga.canvas.dom.overlay;
 77 | 
 78 |   if (result) {
 79 |     if (result.boxes) {
 80 |       drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
 81 |       result.boxes.filter(function (box) {
 82 |         return box !== result.box;
 83 |       }).forEach(function (box) {
 84 |         Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
 85 |       });
 86 |     }
 87 |     if (result.box) {
 88 |       Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
 89 |     }
 90 | 
 91 |     if (result.codeResult && result.codeResult.code) {
 92 |       Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
 93 |     }
 94 |   }
 95 | },
 96 | ```
 97 | 
 98 | ### readerTypes: String[]
 99 | 
100 | Set reading barcode type.
101 | 
102 | Reference: [https://github.com/serratus/quaggaJS#decoder](https://github.com/serratus/quaggaJS#decoder)
103 | 
104 | default: `['code_128_reader']`
105 | 
106 | ### readerSize: Object {width: Number, height: Number}
107 | 
108 | Set reader size. it affects <video> size.
109 | 
110 | default:
111 | 
112 | ```js
113 | {
114 |   width: 640,
115 |   height: 480,
116 | }
117 | ```
118 | 
119 | ### aspectRatio: Object {min: Number, max: Number}
120 | 
121 | Set aspect ratio. it affects <video> aspect ratio.
122 | 
123 | default:
124 | 
125 | ```js
126 | {
127 |   min: 1,
128 |   max: 2,
129 | }
130 | ```
131 | 


--------------------------------------------------------------------------------
/examples/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Barcode Reader</h1>
 4 |     <v-quagga
 5 |       :onDetected="logIt"
 6 |       :readerSize="readerSize"
 7 |       :readerType="'ean_reader'"
 8 |       :aspectRatio="aspectRatio"
 9 |     ></v-quagga>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name: 'VueBarcodeTest',
16 |     data () {
17 |       return {
18 |         readerSize: {
19 |           width: 640,
20 |           height: 480
21 |         },
22 |         aspectRatio: { min: 1, max: 2 },
23 |         detecteds: []
24 |       }
25 |     },
26 |     methods: {
27 |       logIt (data) {
28 |         console.log('detected', data)
29 |       }
30 | 
31 |     }
32 |   }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/examples/src/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>My Component Demo</title>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 | </head>
 7 | <body>
 8 |     <noscript>
 9 |         You need to enable JavaScript to run this app.
10 |     </noscript>
11 |     <div id="app"></div>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/examples/src/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | import App from './App.vue';
 4 | import VueQuagga from '../../src';
 5 | 
 6 | Vue.use(VueQuagga);
 7 | 
 8 | new Vue({
 9 |   render: h => h(App),
10 | }).$mount('#app');
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue-quagga2",
 3 |     "description": "A Vue.js component, accessing the device camera and allowing users to read barcodes, within the browser",
 4 |     "main": "dist/vue-quagga.js",
 5 |     "module": "src/index.js",
 6 |     "version": "1.0.12",
 7 |     "author": "Devin Norgarb <dnorgarb@gmail.com>",
 8 |     "license": "MIT",
 9 |     "scripts": {
10 |         "dev": "cross-env webpack-dev-server --open --hot --config webpack.dev.js",
11 |         "build": "cross-env webpack --progress --hide-modules --config webpack.prod.js",
12 |         "lint": "eslint src/**/*.{js,vue} --fix",
13 |         "prepare": "npm run build"
14 |     },
15 |     "keywords": [
16 |         "quagga2",
17 |         "vue",
18 |         "barcode-reader",
19 |         "barcode-scanner"
20 |     ],
21 |     "repository": {
22 |         "type": "git",
23 |         "url": "git+https://github.com/sin-tanaka/vue-quagga.git"
24 |     },
25 |     "bugs": {
26 |         "url": "https://github.com/sin-tanaka/vue-quagga/issues"
27 |     },
28 |     "peerDependencies": {
29 |         "vue": "^2.6.11"
30 |     },
31 |     "dependencies": {
32 |         "@ericblade/quagga2": "^1.4.2",
33 |         "webrtc-adapter": "^7.2.0"
34 |     },
35 |     "browserslist": [
36 |         "> 1%",
37 |         "last 2 versions",
38 |         "not ie <= 8"
39 |     ],
40 |     "devDependencies": {
41 |         "@babel/core": "^7.2.2",
42 |         "@babel/preset-env": "^7.3.1",
43 |         "babel-loader": "^8.0.5",
44 |         "babel-plugin-syntax-dynamic-import": "^6.18.0",
45 |         "babel-preset-env": "^1.7.0",
46 |         "babel-preset-stage-3": "^6.24.1",
47 |         "cross-env": "^5.2.0",
48 |         "css-loader": "^2.1.0",
49 |         "eslint": "^5.13.0",
50 |         "eslint-config-prettier": "^4.0.0",
51 |         "eslint-config-standard": "^12.0.0",
52 |         "eslint-plugin-import": "^2.16.0",
53 |         "eslint-plugin-node": "^8.0.1",
54 |         "eslint-plugin-prettier": "^3.0.1",
55 |         "eslint-plugin-promise": "^4.0.1",
56 |         "eslint-plugin-standard": "^4.0.0",
57 |         "eslint-plugin-vue": "^5.2.1",
58 |         "file-loader": "^3.0.1",
59 |         "html-webpack-plugin": "^5.6.0",
60 |         "prettier": "^1.16.4",
61 |         "uglifyjs-webpack-plugin": "^2.1.1",
62 |         "vue-loader": "^15.6.2",
63 |         "vue-template-compiler": "^2.6.11",
64 |         "webpack": "^4.29.3",
65 |         "webpack-cli": "^3.2.3",
66 |         "webpack-dev-server": "^3.11.3",
67 |         "webpack-merge": "^4.2.1"
68 |     }
69 | }


--------------------------------------------------------------------------------
/src/Scanner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="interactive" class="viewport scanner">
  3 |     <video />
  4 |     <canvas class="drawingBuffer" />
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import Quagga from '@ericblade/quagga2';
 10 | 
 11 | export default {
 12 |   name: 'QuaggaScanner',
 13 |   props: {
 14 |     onDetected: {
 15 |       type: Function,
 16 |       default(result) {
 17 |         console.log('detected: ', result);
 18 |       },
 19 |     },
 20 |     onProcessed: {
 21 |       type: Function,
 22 |       default(result) {
 23 |         let drawingCtx = Quagga.canvas.ctx.overlay;
 24 | 
 25 |         let drawingCanvas = Quagga.canvas.dom.overlay;
 26 | 
 27 |         if (result) {
 28 |           if (result.boxes) {
 29 |             drawingCtx.clearRect(
 30 |               0,
 31 |               0,
 32 |               parseInt(drawingCanvas.getAttribute('width')),
 33 |               parseInt(drawingCanvas.getAttribute('height'))
 34 |             );
 35 |             result.boxes
 36 |               .filter(function(box) {
 37 |                 return box !== result.box;
 38 |               })
 39 |               .forEach(function(box) {
 40 |                 Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, {
 41 |                   color: 'green',
 42 |                   lineWidth: 2,
 43 |                 });
 44 |               });
 45 |           }
 46 |           if (result.box) {
 47 |             Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
 48 |               color: '#00F',
 49 |               lineWidth: 2,
 50 |             });
 51 |           }
 52 | 
 53 |           if (result.codeResult && result.codeResult.code) {
 54 |             Quagga.ImageDebug.drawPath(
 55 |               result.line,
 56 |               { x: 'x', y: 'y' },
 57 |               drawingCtx,
 58 |               { color: 'red', lineWidth: 3 }
 59 |             );
 60 |           }
 61 |         }
 62 |       },
 63 |     },
 64 |     readerTypes: {
 65 |       type: Array,
 66 |       default: () => ['code_128_reader'],
 67 |     },
 68 |     readerSize: {
 69 |       type: Object,
 70 |       default: () => ({
 71 |         width: 640,
 72 |         height: 480,
 73 |       }),
 74 |       validator: o =>
 75 |         typeof o.width === 'number' && typeof o.height === 'number',
 76 |     },
 77 |     aspectRatio: {
 78 |       type: Object,
 79 |       default: () => ({
 80 |         min: 1,
 81 |         max: 2,
 82 |       }),
 83 |       validator: o => typeof o.min === 'number' && typeof o.max === 'number',
 84 |     },
 85 |     facingMode: {
 86 |       type: String,
 87 |       default: () => 'environment'
 88 |     }
 89 |   },
 90 |   data: function() {
 91 |     return {
 92 |       quaggaState: {
 93 |         inputStream: {
 94 |           type: 'LiveStream',
 95 |           constraints: {
 96 |             width: { min: this.readerSize.width },
 97 |             height: { min: this.readerSize.height },
 98 |             facingMode: this.facingMode,
 99 |             aspectRatio: { min: 1, max: 2 },
100 |           },
101 |         },
102 |         locator: {
103 |           patchSize: 'medium',
104 |           halfSample: true,
105 |         },
106 |         numOfWorkers: 2,
107 |         frequency: 10,
108 |         decoder: {
109 |           readers: this.readerTypes,
110 |         },
111 |         locate: true,
112 |       },
113 |     };
114 |   },
115 |   watch: {
116 |     onDetected: function(oldValue, newValue) {
117 |       if (oldValue) Quagga.offDetected(oldValue);
118 |       if (newValue) Quagga.onDetected(newValue);
119 |     },
120 |     onProcessed: function(oldValue, newValue) {
121 |       if (oldValue) Quagga.offProcessed(oldValue);
122 |       if (newValue) Quagga.onProcessed(newValue);
123 |     },
124 |   },
125 |   mounted: function() {
126 |     Quagga.init(this.quaggaState, function(err) {
127 |       if (err) {
128 |         return console.error(err);
129 |       }
130 |       Quagga.start();
131 |     });
132 |     Quagga.onDetected(this.onDetected);
133 |     Quagga.onProcessed(this.onProcessed);
134 |   },
135 |   destroyed: function() {
136 |     if (this.onDetected) Quagga.offDetected(this.onDetected);
137 |     if (this.onProcessed) Quagga.offProcessed(this.offProcessed);
138 |     Quagga.stop();
139 |   },
140 | };
141 | </script>
142 | 
143 | <style scoped>
144 | .viewport {
145 |   position: relative;
146 | }
147 | 
148 | .viewport canvas,
149 | .viewport video {
150 |   position: absolute;
151 |   left: 0;
152 |   top: 0;
153 | }
154 | </style>
155 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import 'webrtc-adapter';
2 | import Scanner from './Scanner.vue';
3 | 
4 | export default {
5 |   install: function(Vue, options) {
6 |     Vue.component('v-quagga', Scanner);
7 |   },
8 | };
9 | 


--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 | const htmlWebpackPlugin = new HtmlWebpackPlugin({
 6 |   template: path.join(__dirname, 'examples/src/index.html'),
 7 |   filename: './index.html',
 8 | });
 9 | const vueLoaderPlugin = new VueLoaderPlugin();
10 | 
11 | module.exports = {
12 |   mode: 'development',
13 | 
14 |   entry: path.join(__dirname, 'examples/src/index.js'),
15 | 
16 |   plugins: [htmlWebpackPlugin, vueLoaderPlugin],
17 | 
18 |   module: {
19 |     rules: [
20 |       {
21 |         test: /\.css$/,
22 |         use: ['vue-style-loader', 'css-loader'],
23 |       },
24 |       {
25 |         test: /\.vue$/,
26 |         loader: 'vue-loader',
27 |       },
28 |       {
29 |         test: /\.js$/,
30 |         loader: 'babel-loader',
31 |         exclude: /node_modules/,
32 |       },
33 |       {
34 |         test: /\.(png|jpg|gif|svg)$/,
35 |         loader: 'file-loader',
36 |         options: {
37 |           name: '[name].[ext]?[hash]',
38 |         },
39 |       },
40 |     ],
41 |   },
42 | 
43 |   devServer: {
44 |     port: 8001,
45 |   },
46 | };
47 | 


--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | const vueLoaderPlugin = new VueLoaderPlugin();
 5 | 
 6 | module.exports = {
 7 |   mode: 'production',
 8 | 
 9 |   entry: {
10 |     'vue-quagga': path.join(__dirname, './src/index.js'),
11 |   },
12 | 
13 |   output: {
14 |     path: path.join(__dirname, './dist'),
15 |     filename: '[name].js',
16 |     libraryTarget: 'commonjs2',
17 |   },
18 | 
19 |   plugins: [vueLoaderPlugin],
20 | 
21 |   module: {
22 |     rules: [
23 |       {
24 |         test: /\.css$/,
25 |         use: ['vue-style-loader', 'css-loader'],
26 |       },
27 |       {
28 |         test: /\.vue$/,
29 |         loader: 'vue-loader',
30 |       },
31 |       {
32 |         test: /\.js$/,
33 |         loader: 'babel-loader',
34 |         exclude: /node_modules/,
35 |       },
36 |       {
37 |         test: /\.(png|jpg|gif|svg)$/,
38 |         loader: 'file-loader',
39 |         options: {
40 |           name: '[name].[ext]?[hash]',
41 |         },
42 |       },
43 |     ],
44 |   },
45 | 
46 |   devtool: 'source-map',
47 | 
48 |   optimization: {
49 |     minimize: false,
50 |   },
51 | };
52 | 


--------------------------------------------------------------------------------