How tu use it with React ?

[fridezlucas]

Is it possible to use QuaggaJS with React and how ?

[davetransom]

try here => https://github.com/serratus/quagga-react-example

[ericblade]

that example is alright, though getting some what dated, in comparison to both react and quagga (and quagga hasn't seen an update for quite a while now either :| )

basically, what you need to do is render a div or something with a specific id, such as id="viewport", and in your inputStream config specify: target: document.querySelector('#viewport') .. run Quagga.init() in your component's componentDidMount(), and run Quagga.stop() in componentWillUnmount(). Make sure you hook up onDetected somewhere, and any other events you might need, and roll with it.

Worthy of noting, I discovered a bug, that I've posted recently in the Issues here, where you should make sure that you don't unmount a component containing Quagga until after Quagga has completed it's initialization setup, otherwise you won't be able to stop Quagga.

[amandapouget]

@ericblade I followed the instructions and example above and the live stream starts but Quagga never searches for barcodes. I just get a video stream... No little boxes trying to find the barcode. (Streaming of essentially same barcode to the Quagga examples page works for my barcode.)

Can you point me in the right direction?

You can see my code in this small sample repo: https://github.com/mandysimon88/barcode-glory

And you can see the behavior described in this Heroku app (takes a second to load because it's waking up the server): https://barcode-glory.herokuapp.com/

[amandapouget]

Here also is a screen shot show that Quagga started (video is running) but no detection is being attempted:

[ericblade]

@mandysimon88 the big difference that I see between your code and mine, is that mine calls Quagga.onDetected in the Quagga.init() callback, before calling Quagga.start(). Looks like yours calls onDetected before init() is complete. I don't see anything obvious in the code that would prevent yours from working, but maybe try that?

Also, the process indicator (green) boxes from one of the examples are not built-in (possibly there are some buried in the debug options), but if you want, you can draw them yourself, one of the examples shows how to use the canvas to draw on top of the camera viewfinder area. Unfortunately, it seems that the CSS in said example is rather broken . . i've had a hell of a time getting Quagga's viewport to act the same on multiple devices/browsers, it seems rather tricky. I think there's some bad magic going on in the "ImageWrapper" component, but i'm not real sure, i've been mostly concentrating on getting the rest of my app's functionality working, before I work to improve the camera.

[ericblade]

also worth noting I cannot get any desktop camera to reliably scan, i can get an occasional not reliable scan by maxing out the resolution. i don't know if that's just a problem with my specific cameras (1280x720 and lower resolution), or my office lighting, or what.

[vidur149]

I am also not able to make Quagga work with react

My react component code is as follows.

import React from 'react';
import Grid from '@material-ui/core/Grid';
import Form from './form';
import Quagga from 'quagga';
import '../Scanner.css';

class Scanner extends React.Component {
  constructor(props) {
    super(props);
    this.myref = React.createRef();
  }

  componentDidMount() {
    // const onDetected = this.onDetected.bind(this);
    Quagga.init(
      {
        inputStream: {
          name: 'Live',
          type: 'LiveStream',
          constraints: {
            facing: 'environment'
          },
          target: this.myref.current
        },
        decoder: {
          readers: ['code_128_reader']
        },
        locator: {
          patchSize: 'medium',
          halfSample: true
        },
        numOfWorkers: 4,
        locate: true
      },
      function(err) {
        if (err) {
          console.log(err);
          return;
        }
        Quagga.start();
      }
    );
    Quagga.onDetected(this._onDetected);
  }

  componentWillUnmount() {
    Quagga.stop();
    Quagga.offDetected(this._onDetected);
  }

  _onDetected(result) {
    console.log(result);
    // this.props.onDetected(result);
  }

  render() {
    return (
      <Grid container spacing={16}>
        <Grid item>
          <div id="interactive" className="viewport" ref={this.myref} />
        </Grid>
        <Grid item xs="auto">
          <Form />
        </Grid>
      </Grid>
    );
  }
}

export default Scanner;

Nothing happens

[ericblade]

I don't see anything obviously wrong there.

Is there anything in the Javascript console?

[macmorning]

Hi, This thread helped me to get my component to work, so I sent a pull request to update the example. https://github.com/serratus/quagga-react-example/pull/3

HTH

[xLarry]

I wasn't able to get this running in React as well. So I pulled the repo of @macmorning and run it as is, but still no luck 😕

Console doesn't show any error messages, the given barcode is EAN 13 and reader is configured to "ean_reader". Any ideas? 🤔

[macmorning]

Hey @xLarry, Did you update your packages after downloading the code? You can use npm-check-updates to double check that you have everything set.

[xLarry]

Hi @macmorning, I performed npm install after cloning the repo. Executing npm-check-updates returns the following:

gitpod /workspace/quagga-react-example $ ncu
Checking /workspace/quagga-react-example/package.json
[====================] 11/11 100%

 react               ^16.6.3  →  ^16.8.6
 react-dom           ^16.6.3  →  ^16.8.6
 babel-loader         ^7.1.5  →   ^8.0.6
 react-hot-loader     ^4.6.3  →   ^4.8.4
 webpack             ^4.28.3  →  ^4.31.0
 webpack-cli          ^3.2.0  →   ^3.3.2
 webpack-dev-server  ^3.1.14  →   ^3.3.1

Run ncu -u to upgrade package.json

Here is a snapshot of the gitpod instance I'm using:

I am starting the server with ./node_modules/webpack-dev-server/bin/webpack-dev-server.js -d --hot --port=3000

---

UPDATE: seems like I just had bad luck with the barcodes I used (the one above is originated from the backside of a book). It finally worked with a regular EAN-13 code. Thanks for your help @macmorning.

[ericblade]

The previous example used code_128 by default, macmorning's changes switch it to ean by default. I personally use upc_reader and ean_reader for general products and books, and it mostly works well.

[keffybansal]

Screen shot shows that Quagga started (video is running) but nothing is being detected.

[Malkom]

@keffybansal Same issue for me.... on my PC, on my phone the camera doesn't open :(

[ericblade]

Post your configurations. Also, since barcode scanning reads the white space not the black space, an example like the one above might fail automatically due to all the grey spots, which if you were using a laser reader would probably be indinstinguishable, but to a visual based reader, might be a problem.

also, you have a greenbox there (perhaps slightly out of position) that seems to indicate that it is in fact picking something up.

[keffybansal]

@Malkom I was able to get through. Quagga need to be stopped once the barcode is detected.

[lucasrozalem]

utilizei o repositorio do @macmorning como exemplo e nada acontece no console.log(browser). Como eu posso parar o quagga como citado acima? Sou iniciante em javascript.

[macmorning]

Hey @lucasrozalem , você deve tentar o exemplo de @ericblade. https://github.com/ericblade/quagga2-react-example