Added example based on react

2026-08-13 05:31:37 +08:00 · 2016-05-22 22:12:22 +02:00
parent bc2d8c5f5e
commit 1f3ff9bc70
15 changed files with 7677 additions and 4362 deletions
@@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-class-properties"],
+  "presets": ["es2015-webpack", "stage-0", "react"]
+}
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+    <title>index</title>
+    <meta name="description" content="" />
+    <meta name="author" content="Christoph Oberhofer" />
+
+    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="../css/fonts.css" />
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../css/prism.css" />
+  </head>
+
+  <body>
+      <header>
+          <div class="headline">
+              <h1>QuaggaJS</h1>
+              <h2>An advanced barcode-scanner written in JavaScript</h2>
+          </div>
+      </header>
+    <section id="container" class="container">
+        <h3>Scan barcode to input-field</h3>
+        <p>Click the <strong>button</strong> next to the input-field
+            to start scanning an <strong>EAN-13</strong> barcode</p>
+        <div id="react">
+
+        </div>
+        <p>This example demonstrates the following features:
+            <ul>
+                <li>Access to user's camera</li>
+                <li>Configuring EAN-Reader</li>
+                <li>Use custom mount-point (Query-Selector)</li>
+                <li>Start/Stop scanning based on certain events</li>
+            </ul>
+        </p>
+    </section>
+          <footer>
+        <p>
+          &copy; Copyright by Christoph Oberhofer
+        </p>
+      </footer>
+
+    <script src="static/bundle.js" type="text/javascript"></script>
+    <script src="../vendor/prism.js"></script>
+  </body>
+</html>
@@ -0,0 +1,24 @@
+{
+  "name": "quagga-react",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Christoph Oberhofer <ch.oberhofer@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.9.0",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-class-properties": "^6.9.0",
+    "babel-preset-es2015-webpack": "^6.4.1",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "webpack": "^2.1.0-beta.7"
+  },
+  "dependencies": {
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2"
+  }
+}
@@ -0,0 +1,39 @@
+import React from 'react';
+import Scanner from './Scanner';
+
+export default class App extends React.Component {
+    state = {
+        scanning: false
+    };
+
+    _startScanning = (e) => {
+        e.preventDefault();
+        if (!this.state.scanning) {
+            this.setState({scanning: true});
+        }
+    };
+
+    _stopScanning = () => {
+        this.setState({scanning: false});
+    };
+
+    _handleResult = (result) => {
+        this._stopScanning();
+        this.refs.eanInput.value = result.codeResult.code;
+    }
+    render() {
+        return (
+            <div>
+                <form>
+                    <div className="input-field">
+                        <label>EAN:</label>
+                        <input className="ean" ref="eanInput" type="text" />
+                        <button type="button" onClick={this._startScanning} className="icon-barcode button scan"></button>
+                    </div>
+                </form>
+                {this.state.scanning &&
+                    <Scanner onDetected={this._handleResult} onCancel={this._stopScanning} />}
+            </div>
+        );
+    }
+}
@@ -0,0 +1,44 @@
+import React from 'react';
+import Quagga from '../../../../dist/quagga';
+
+export default class Scanner extends React.Component {
+    constructor(props) {
+        super(props);
+        this._scanner = Quagga
+            .decoder({readers: ['ean_reader']})
+            .locator({patchSize: 'medium'})
+            .fromVideo({
+                target: '.overlay__content',
+                constraints: {
+                    width: 800,
+                    height: 600,
+                    facingMode: "environment"
+                }
+            });
+        this._onCancel = this._onCancel.bind(this);
+    }
+    _onCancel(e) {
+        e.preventDefault();
+        this.props.onCancel();
+    }
+    render() {
+        return (
+            <div className="overlay">
+                <div className="overlay__content">
+                    <div className="overlay__close" onClick={this._onCancel}>X</div>
+                </div>
+            </div>
+        );
+    }
+    componentDidMount() {
+        this._scanner
+            .addEventListener('detected', this.props.onDetected)
+            .start();
+    }
+
+    componentWillUnmount() {
+        this._scanner
+            .removeEventListener('detected', this.props.onDetected)
+            .stop();
+    }
+}
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+
+ReactDOM.render(
+    <App />,
+  document.getElementById('react')
+);
@@ -0,0 +1,23 @@
+module.exports = {
+    entry: [
+        './src/index.js'
+    ],
+    devtool: 'source-map',
+    module: {
+        loaders: [{
+            test: /\.jsx?$/,
+            exclude: /(node_modules|quagga\.js)/,
+            loader: 'babel-loader'
+        }]
+    },
+    resolve: {
+        modules: [
+            'node_modules'
+        ]
+    },
+    output: {
+        path: __dirname + '/static',
+        publicPath: '/',
+        filename: 'bundle.js'
+    }
+};