I would like to use part of this code example in my project. What is the license of this code?

Hey all!

I'm getting this error just after the Scanner detecting the barcode (box drawn), and the screen goes white:

Uncaught TypeError: Cannot read property 'code' of undefined
    at eval (App.js?afc7:14)
    at Array.map (<anonymous>)
    at App (App.js?afc7:13)
    at renderWithHooks (react-dom.development.js?61bb:14797)
    at updateFunctionComponent (react-dom.development.js?61bb:17016)
    at beginWork (react-dom.development.js?61bb:18591)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:184)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:236)
    at invokeGuardedCallback (react-dom.development.js?61bb:289)
    at beginWork$1 (react-dom.development.js?61bb:23203)

Is this broken or is it specific to the Barcode I tried to scan?
Do I need to update something in the code?

Thanks!

https://github.com/ericblade/quagga2-react-example/blob/master/src/components/Scanner.js#L100

this results that quagga will never find a result.

I've replaced it with the example from instruction
{ readers: [ 'ean_reader' ], debug: { drawBoundingBox: false, showFrequency: false, drawScanline: false, showPattern: false } multiple: false }
seemed to work, but now gota tweak the results to make sure they display properly.

thanks for this example, learned quiet alot from it!

Has anyone used this example recently, with any success... with React 18?

I just tried and got a bunch of (deprecated) package warnings and ultimately the following error:

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

Thanks in advance

Thanks for the work on this repository, but if I use the
npm run start
command, the project gives an error in Scanner.js, because it's used the validated variable, which is given by one of two possible definitons not implemented:

                // const validated = barcodeValidator(result.codeResult.code);
                // const validated = validateBarcode(result.codeResult.code);
                // Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: validated ? 'green' : 'red', lineWidth: 3 });
                drawingCtx.font = "24px Arial";
                drawingCtx.fillStyle = validated ? 'green' : 'red';
                drawingCtx.fillText(`${result.codeResult.code} valid: ${validated}`, 10, 50);
                drawingCtx.fillText(result.codeResult.code, 10, 20);
                // if (validated) {
                //     onDetected(result);
                // }
            }````

Am I missing something on this barcodeValidator or validateBarcode function? 

Hi Sir,

Wow, this is a great component, with very well written documentation.
Thanks for sharing your knowledge !

Can you please tell us how to use your component with Vue ?
Example code maybe ?
(I really don't have any React knowledge)

Thanks in advance for any effort.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

Is there a way of solving this for quagga2?

It's a really good example here and I learned a lot from this. However, it might be better if you can make it a hook instead of a component, as the component doesn't really return any JSX element. Like useScanner or useBarcode and accept some parameters maybe. I might be able to pull a request if you need it. (or maybe no)

... should really provide some example code for getting and setting device id

When I try to scan a barcode it is not showing any result. Any suggestions?

First thank you for this up to date example. I did integrate this example into my current project. But I see following error on Scanner initialization:

Uncaught TypeError: Cannot read property 'ImageWrapper' of undefined
    at self.onmessage (32307bc5-fa37-40af-a651-728171f8522c:30)

My first guess is: this is Webpack related, but since example's configuration is quite simple, and my project is not, I haven't figure out what difference will cause this?

My second guess is: I do initialize Quagga in a modal, and that might be a problem?

I appropriate any light on this in advance, thanks.

p.s. This is what I see after I click on error link:

(function rn(t) {
      if (t) {
        var n = t().default;
        if (!n) return void self.postMessage({
          event: "error",
          message: "Quagga could not be created"
        });
      }
...
      self.onmessage = function (t) {
        if ("init" === t.data.cmd) {
          var i = t.data.config;
          i.numOfWorkers = 0, e = new n.ImageWrapper({
            x: t.data.size.x,
            y: t.data.size.y
          }, new Uint8Array(t.data.imageData)), n.init(i, o, e), n.onProcessed(r);
        } else "process" === t.data.cmd ? (e.data = new Uint8Array(t.data.imageData), n.start()) : "setReaders" === t.data.cmd ? n.setReaders(t.data.readers) : "registerReader" === t.data.cmd && n.registerReader(t.data.name, t.data.reader);
      };

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Thank you for creating this package

but i faced issue when i using upload and then start to decode the barcode, it always show not detected,

decoder: {
readers: ['code_39_reader']
},

example barcode

full code
  const onChange = e => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = function(event) {
      Quagga.decodeSingle(
        {
          decoder: {
            readers: ['code_39_reader'] 
          },
          locate: true,
          src: event.target.result
        },
        function(result) {
          console.log(result);
          if (result.codeResult) {
            console.log('result', result.codeResult.code);
          } else {
            console.log('not detected');
          }
        }
      );
    };
    reader.readAsDataURL(file);
  };

thanks before