quagga-react barcode scanner

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!

Were you able to make it work in react? Or any other barcode reader would be really appreciated? — Vidur Singla, Dec 22 '18 at 03:40
I'm getting `TypeError: this.props.onDetected is not a function` error on Scanner.js. Do you have a solution for that? — ggnoredo, Nov 27 '19 at 12:59

score 3 · Answer 1 · answered Apr 25 '18 at 12:15

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.

score 0 · Answer 2 · answered Oct 10 '18 at 00:46

0

The documentation says that in Node you should use numOfWorkers: 0

https://serratus.github.io/quaggaJS/#node-example

answered Oct 10 '18 at 00:46

Gaël James

157
13

score 0 · Answer 3 · answered May 18 '20 at 13:04

0

add /* eslint-disable */ in to return .

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

answered May 18 '20 at 13:04

Harendrra

107
1
10

score 0 · Answer 4 · answered Feb 17 '21 at 22:20

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>
        );
    }
}

quagga-react barcode scanner

4 Answers4