quagga-react barcode scanner - reactjs

Question

Essentially I get the demo to work save for the actual scanning. i.e. camera is on etc. Not sure what I am missing...
Here is my code.
App.js file:
import React, { Component } from 'react';
import Scanner from './Scanner';
import Result from './Result';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
scanning: false,
results: [],
};
this._scan = this._scan.bind(this);
this._onDetected = this._onDetected.bind(this);
}
_scan() {
this.setState({ scanning: !this.state.scanning });
}
_onDetected(result) {
this.setState({ results: this.state.results.concat([result]) });
}
render() {
return (
<div>
<button onClick={this._scan}>{this.state.scanning ? 'Stop' : 'Start'}</button>
<ul className="results">
{this.state.results.map(result => {
<Result key={result.codeResult.code} result={result} />;
})}
</ul>
{this.state.scanning ? <Scanner onDetected={this.state._onDetected} /> : null}
</div>
);
}
}
Scanner.js file:
import React, { Component } from 'react';
import Quagga from 'quagga';
export default class Scanner extends Component {
constructor(props) {
super(props);
this._onDetected = this._onDetected.bind(this);
}
componentDidMount() {
Quagga.init(
{
inputStream: {
type: 'LiveStream',
constraints: {
width: 640,
height: 480,
facingMode: 'environment', // or user
},
},
locator: {
patchSize: 'medium',
halfSample: true,
},
numOfWorkers: 2,
decoder: {
readers: ['upc_reader'],
},
locate: true,
},
function(err) {
if (err) {
return console.log(err);
}
Quagga.start();
}
);
Quagga.onDetected(this._onDetected);
}
componentWillUnmount() {
Quagga.offDetected(this._onDetected);
}
_onDetected(result) {
this.props.onDetected(result);
}
render() {
return <div id="interactive" className="viewport" />;
}
}
Result.js file:
import React, { Component } from 'react';
export default class Result extends Component {
render() {
const result = this.props.result;
if (!result) {
return null;
}
return (
<li>
{result.codeResult.code} [{result.codeResult.format}]
</li>
);
}
}
Thanks my friends!

Answer 1

You may want to change the reader type, which is code_128_reader by default.
Most barcodes used in supermarkets for example follow the EAN specification (at least where I live), so you can put this in Scanner.js to change to an ean_reader:
decoder: {
readers: ["ean_reader"]
},
where Quagga is initiated.
A list of readers can be found here: Quagga documentation.
If this doesn't work, I would advise to try other reader / barcode combinations.

Answer 2

The documentation says that in Node you should use numOfWorkers: 0
https://serratus.github.io/quaggaJS/#node-example

Answer 3

add /* eslint-disable */ in to return .
{
/* eslint-disable */
this.state.results.map(result => {
<Result key={result.codeResult.code} result={result} />;
})}
</ul>

Answer 4

Might be too late to answer, will leave it here in case anyone would be interested.
I was able to make it work. There were few issues I had to resolve:
Applied different decoder as rpld suggested:
decoder: {
readers: ["ean_reader"]
},
Fix TypeError: this.props.onDetected is not a function. In App.js adjusted the following line:
From:
{this.state.scanning ? <Scanner onDetected={this.state._onDetected} /> : null}
To:
{this.state.scanning ? <Scanner onDetected={(result) => this._onDetected(result)} /> : null}
I also used Quagga2, but don't know if it makes any difference in this case.
Leaving full version of working code, just in case.
App.js:
import React, { Component } from 'react';
import Scanner from './Scanner';
import Result from './Result';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
scanning: false,
results: []
};
this._scan = this._scan.bind(this);
this._onDetected = this._onDetected.bind(this);
}
_scan() {
this.setState({ scanning: !this.state.scanning });
}
_onDetected(result) {
this.setState({ results: this.state.results.concat([result]) });
}
render() {
return (
<div>
<button onClick={this._scan}>{this.state.scanning ? 'Stop' : 'Start'}</button>
<ul className="results">
{this.state.results.map((result, idx) => {
return (<Result key={result.codeResult.code} result={result} />)
})}
</ul>
{this.state.scanning ? <Scanner onDetected={(result) => this._onDetected(result)} /> : null}
</div>
);
}
}
Scanner.js:
import React, { Component } from 'react';
import Quagga from '#ericblade/quagga2';
export default class Scanner extends Component {
constructor(props) {
super(props);
this._onDetected = this._onDetected.bind(this);
}
componentDidMount() {
Quagga.init(
{
inputStream: {
type: 'LiveStream',
constraints: {
width: 640,
height: 480,
facingMode: 'environment', // or user
},
},
locator: {
patchSize: 'medium',
halfSample: true,
},
numOfWorkers: 0,
decoder: {
readers: ['ean_reader'],
},
locate: true,
},
function(err) {
if (err) {
return console.log(err);
}
Quagga.start();
}
);
Quagga.onDetected(this._onDetected);
}
componentWillUnmount() {
Quagga.offDetected(this._onDetected);
}
_onDetected(result) {
this.props.onDetected(result);
}
render() {
return <div id="interactive" className="viewport" />;
}
}
Result.js (not touched at all):
import React, { Component } from 'react';
export default class Result extends Component {
render() {
const result = this.props.result;
if (!result) {
return null;
}
return (
<li >
{result.codeResult.code} [{result.codeResult.format}]
</li>
);
}
}