Multiple scan Reader

[progressify]

Hi How i can read barcode and qrcode in at same time? I must istantiate 2 object or exist a mixed class? Have you an example or a docs page?

[odahcam]

That depends on which approach you're doing. Can you tell me more about that?

[progressify]

Ok, I try to explain you. I think, for read 2 different code, I must to instantiate 2 different object and open 2 video steam. Right?

[odahcam]

No, there's no need for that, but actually we only provide limited starter classes for scanning codes on browser using a video stream, if your using one of'em you will need to implement the MultiFormatReader by yourself on the top of that class. We provide all the tools for decoding the barcode, but in advanced cases you gotta handle the video stream and pass it to the decoder yourself. Soon we will have those multi-reader classes ready, but we're working on the core for now.

[lenny76]

to manage 1D and 2D I've done a thing like this. not perfect but it works

let codeReader;

function attivascan_qrcode() {
            if (typeof codeReader!= "undefined"){
                codeReader.reset();
            }
            codeReader = new ZXing.BrowserQRCodeReader();
            codeReader.decodeFromInputVideoDevice(undefined, 'video')
                .then(result => {
                    console.log(result.text)
                })
                .catch(err => console.error(err));
        }

function attivascan_barcode() {
            if (typeof codeReader!= "undefined"){
                codeReader.reset();
            }
            codeReader = new ZXing.BrowserBarcodeReader();
            codeReader.decodeFromInputVideoDevice(undefined, 'video')
                .then(result => {
                    console.log(result.text)
                })
                .catch(err => console.error(err));
        }

[memic84]

@lenny76 Can you give more information on how you did this? Do i need to use timeout's to call the two functions?

[odahcam]

Sorry for the lack of support guys. We've done multiple format reading before (on the Angular component), please, take a look on the classes below:

Base class: https://github.com/zxing-js/ngx-scanner/blob/master/src/app/modules/zxing-scanner/browser-code-reader.ts Multi format class: https://github.com/zxing-js/ngx-scanner/blob/master/src/app/modules/zxing-scanner/browser-multi-format-reader.ts

I'm working on taking that code out of the Angular specific environment, so that everyone can use those features that are missing here on the browser layer.

[memic84]

@odahcam Thanks! I am trying to implement the scanner as an vue.js component. Got it working, but the multiple format with barcode/qr at the same time not yet.

Do you have an estimate, when this could be ready?

[odahcam]

Yw! Unfortunately no, I'm working in the tests for that layer at the moment so maybe a few weeks until it is ready. Also, FYI, components for other techs like Vue, React, web component, etc. are always welcome, maybe it can help we (including you) to get contributors. :)

[memic84]

I have now a solution where i first start one Reader, and the other i start without a DOM element. So when one scan is finished, both will be closed.

@odahcam I'll keep in mind, to open-source my vue-component when possible. I didn't understand what happend with the @zxing-js/browser split from the library. I kept getting depracation messages. But this is not a question for this issue.

[cgonzalvo]

I have now a solution where i first start one Reader, and the other i start without a DOM element. So when one scan is finished, both will be closed.

@odahcam I'll keep in mind, to open-source my vue-component when possible. I didn't understand what happend with the @zxing-js/browser split from the library. I kept getting depracation messages. But this is not a question for this issue.

Can you share your solution please? thanks

[memic84]

@cgonzalvo I'm currently working to opensource my vue component for barcode/qrcode decoding. What you'll need to do is create two instances, one with linking to a DOM element, en one without anything defined.

HTML <video class="scanner" ref="scanner"></video>

JS

const QRCodeReader = new BrowserQRCodeReader();
this.QRCodeReader.decodeFromInputVideoDevice(undefined, this.$refs.scanner).then((result) => {
      this.getScannerResult(result);
})

const BarcodeReader = new BrowserBarcodeReader();
this.BarcodeReader.decodeFromInputVideoDevice(undefined).then((result) => {
    this.getScannerResult(result);
})

This is a simplified version (non-working), you have to tweak it to your needs. The $refs is vue code, to link with the video tag. The important part is the Barcode method for decoding where the this.refs.scanner second argument is not set.

There is ofcourse a better way to do this, to use the MultiCodeReader, maybe @odahcam can tell us, if that's already possible?

[odahcam]

Yes, I made a browser MultiReader available in the latest versions and you can finally use it, I made some updates on the docs and plan to update it again soon. There's lots of things to be improved in the browser layer, so I don't know how to answer about the rest of the aproach since it shouldn't be necessary to do that amount of code to be able to decode QR Codes.

[cgonzalvo]

Yes, I made a browser MultiReader available in the latest versions and you can finally use it, I made some updates on the docs and plan to update it again soon. There's lots of things to be improved in the browser layer, so I don't know how to answer about the rest of the aproach since it shouldn't be necessary to do that amount of code to be able to decode QR Codes.

So Can I do sm like this const MultiReader = new ZXing.BrowserMultiFormatReader();? instead of const QRCodeReader = new ZXing.BrowserQRCodeReader(); const BarcodeReader = new ZXing.BrowserBarcodeReader();

[odahcam]

Yes, then you can set the barcode formats you want to scan through the hints map. Please take a look at the CommonJS example the last one) from the Usage section on README. :)

[progressify]

@cgonzalvo I'm currently working to opensource my vue component for barcode/qrcode decoding. What you'll need to do is create two instances, one with linking to a DOM element, en one without anything defined.

HTML <video class="scanner" ref="scanner"></video>

JS

const QRCodeReader = new BrowserQRCodeReader();
this.QRCodeReader.decodeFromInputVideoDevice(undefined, this.$refs.scanner).then((result) => {
      this.getScannerResult(result);
})

const BarcodeReader = new BrowserBarcodeReader();
this.BarcodeReader.decodeFromInputVideoDevice(undefined).then((result) => {
    this.getScannerResult(result);
})

This is a simplified version (non-working), you have to tweak it to your needs. The $refs is vue code, to link with the video tag. The important part is the Barcode method for decoding where the this.refs.scanner second argument is not set.

There is ofcourse a better way to do this, to use the MultiCodeReader, maybe @odahcam can tell us, if that's already possible?

I have adopted a similar solution Too much month are passed xD I do not work on the project where I used this library I hope Autogrill can understand :P

[memic84]

@odahcam Is it possible to set the hints on the BrowserMultiFormatReader, and not the MultiFormatReader.

I would need to be able to switch between QR-code, ean13, and just QR-code.

I can't quite figure out how the DecodeHintType, hints and formats work. I can see that the instance BrowserMultiFormatReader has setHints reactive setters.

[slokhorst]

@memic84 I used it like this:

const hints = new Map();
hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, [
    ZXing.BarcodeFormat.QR_CODE,
    ZXing.BarcodeFormat.CODE_128,
    ZXing.BarcodeFormat.CODE_39
]);
const codeReader = new ZXing.BrowserMultiFormatReader(hints);

[kirillkostrov]

@slokhorst thanks, works perfect!

[josephernest]

@slokhorst @odahcam When the scan is successful with MultiFormatReader, how to know which type of code it was?

codeReader
    .decodeFromInputVideoDevice(undefined, 'video')
    .then((result) => { 
        document.write(result);   
        // how to get the code type? i.e. was it a CODE_128 or a DATA_MATIX or ... ?
    });

[slokhorst]

@josephernest you can do:

ZXing.BarcodeFormat[result.format]

[josephernest]

Thanks @slokhorst!

[surbhiInstacash]

how to display scanning area highlighted on scanner view, i am using new ZXing.BrowserMultiFormatReader(), scanning is working properly but i want to show user a rectangle scanning area in which scanning will done, please please please let me know.