Hey! I am trying to use the quagga2 fork with TypeScript, but I am getting
File "<PATH>/@ericblade/quagga2/type-definitions/quagga.d.ts" is not a module when I try to import it. I know I could just add // @ts-ignore and get on with it, but I would really like to have type-support, so if anybody knows what might be wrong give me a shout! :)
To my eyes, everything looks to be set up ok.
i have been able to get get it running on a desktop browser but on my phone all it is a blank space
@allansson i haven't yet used typescript, so i apologise if that's broken. several people had reviewed the commits that included definitions, but i can't speak for how accurate they are. Please, if you come up with anything, let me know. Also, I can spend some time messing with it, if you can tell me how to even setup typescript :-D
@musangowope I sure do -- you need to serve it from a secure (https) site, is probably the issue, i'm thinking .. but without some more information, it'd be hard to say exactly
@ericblade hmm, well I am testing on external url which is just using http. so yea that could be the reason why
This is my code for the Scanner.js
its pretty referenced from your repo. dont think i did anything wrong here
import React from 'react';
import Quagga from 'quagga';
import PropTypes from 'prop-types';
class Scanner extends React.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: 1,
decoder: {
readers: ['ean_reader'],
},
locate: true,
},
function(err) {
if (err) {
return console.log(err);
}
return Quagga.start();
},
);
Quagga.onDetected(this.onDetected);
}
componentWillUnmount() {
Quagga.offDetected(this.onDetected);
Quagga.stop();
}
onDetected(result) {
const drawingCanvas = Quagga.canvas.dom.overlay;
drawingCanvas.style.display = 'none';
this.props.onDetected(result);
}
render() {
return <div id="interactive" className="viewport" />;
}
}
Scanner.propTypes = {
onDetected: PropTypes.func.isRequired,
};
export default Scanner;but let try change the external url to https and see if thats the problem
it works in browser if you're loading it from file, because file is a secure url by default.. although i do run chrome with the --disable-web-security switch when i'm working, so i can just use a regular hot-reload server
when I test this jfiddle example on my phone, https://jsfiddle.net/dreamweiver/j6phkg27/8/ . it displays the live feed. I'll try adapt that code to my scanner component
normally at least in desktop chrome, if you try to access a site that has no permissions, or isn't https, you'll get some kind of an error that indicates you can't do it, not that it isn't defined
so i'd think that android chrome would do the same :-S
interestingly, that jsfiddle doesn't display on my desktop, although it does ask for camera permission and turns on the camera
i thought the 'npm test' tested the node package, but on further looks, it seems that it does all / most of it's testing inside browser.
i have implemented a qr code reader as an external module :-D
hey guys,
so this is my current configuration for the product scanner in React
import React from 'react';
import Quagga from 'quagga';
import PropTypes from 'prop-types';
class ProductScanner extends React.Component {
constructor(props) {
super(props);
this.onDetected = this.onDetected.bind(this);
}
componentDidMount() {
Quagga.init(
{
inputStream: {
name: 'Live',
type: 'LiveStream',
target: document.querySelector('#interactive'),
constraints: {
width: 640,
height: 480,
facingMode: 'environment', // or user
},
},
locator: {
patchSize: 'medium',
halfSample: true,
},
numOfWorkers: 1,
decoder: {
readers: this.props.decoderReaders,
},
locate: true,
},
function(err) {
if (err) {
return err;
}
return Quagga.start();
},
);
Quagga.onDetected(this.onDetected);
}
componentWillUnmount() {
Quagga.offDetected(this.onDetected);
Quagga.stop();
}
onDetected(result) {
const drawingCanvas = Quagga.canvas.dom.overlay;
drawingCanvas.style.display = 'none';
this.props.onDetected(result);
}
render() {
return <div className={this.props.className} id="interactive" />;
}
}
ProductScanner.propTypes = {
className: PropTypes.string,
onDetected: PropTypes.func.isRequired,
decoderReaders: PropTypes.array.isRequired,
};
ProductScanner.defaultProps = {
className: '',
};
export default ProductScanner;the ProductScanner component accepts any decoder s in the form of an array
the current value for the prop decoderReaders is ['code_39_reader'] as that is the types of barcodes we read for our online store
This configuration works locally but on our live site, the we get this error
Uncaught ReferenceError: yca is not defined
@ericblade any insight on why this would be the case, since u have the most experience with dealing with the implementation of QuaggaJS on React
no, i don't. "yca" doesn't mean anything to me at all, and the code looks pretty normal
Maybe adding section on
webpack compatitablity with regards to minification
Hello, first, thanks so much for creating and maintaining this project. I am new to QuaggaJS and just set up my first proof of concept. Unfortunately, I am getting poor results. The green box takes a long time to recognize a barcode, and when it does it spits out garbled text as opposed to what is actually encoded on the barcode. I can post my code and sample barcodes if it will help -- I am mostly wondering if there is any obvious error on my end or if anyone else has had this experience.
hey @jimsmits19 sorry i haven't been around here the last .. several.. days. have been busy elsewhere :-)
Sure, code and samples help. Might be helpful to know what sort of hardware you're trying to use with, as well, I've been completely unable to get, for example, my PC's webcam to recognize anything at all, no matter what settings I try to use. My laptop occasionally has results. But for the most part, I only really have success with a cell camera.
decodeSingle() works in node and browser (with numWorkers == 0) now. going to move the issue about numWorkers from that repo to the main
I really do want to get QR working fully, and then implement a reader for OCR. I know none of that has anything to do with barcodes, but I think that Quagga can make a good interface to any kind of image recognition, not just barcodes, but I don't want to tack the non-barcode stuff into the main
the last thing i want to do in my main app code is "if no barcode found, then run QR recognition, if no QR found, then run OCR" .. that's better done in this layer.
