Added example based on react
Christoph Oberhofer
9 years ago
parent
bc2d8c5f5e
commit
1f3ff9bc70
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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>
|
||||||
|
© 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'
|
||||||
|
}
|
||||||
|
};
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue