formatsToSupport is being ignored

[talkingoldfish]

The formatsToSupport oprion seems to be ignored when specified and all barcode formats are being scanned against.

I am using v2.1.12 of the library.

A redacted version of the code I am using is as below:

    var qrFormatsToSupport = [ 
        Html5QrcodeSupportedFormats.QR_CODE,
        Html5QrcodeSupportedFormats.AZTEC
    ];
      
    let opts = {
        fps: instance.data.fps,
        disableFlip: instance.data.disableFlip,
        qrbox: instance.data.boxDimension,
        aspectRatio: aspectRatio,
        formatsToSupport: qrFormatsToSupport,
        experimentalFeatures: {
           useBarCodeDetectorIfSupported: true 
        }
    }
.
.
.
                Html5Qrcode.getCameras().then(cameras => {
                  if (cameras && cameras.length) {
                      for (i = 0; i < cameras.length; i++) {
                          arrCameras.push(cameras[i].label);
                          arrCameraIds.push(cameras[i].id);
                          instance.data.arrCameras.push(cameras[i].label);
                      }

                      instance.data.allCameras = cameras;
                      instance.publishState('cameras', arrCameras);
                      instance.publishState('camera_ids', arrCameraIds);
                      instance.data.arrCameraIds = arrCameraIds;
                      
                      if (instance.data.arrCameras.length > 0) {
                          for (i = 0; i < instance.data.arrCameras.length; i++) {
                              if (cameraSide != "manual") {
                                  if (instance.data.arrCameras[i].match(re)) {
                                      html5QrCode.start({ deviceId: { exact: instance.data.arrCameraIds[i] } }, opts, qrCodeSuccessCallback);
                                      break;
                                  }
                                  
                                  if (i == arrCameras.length-1) {
                                      html5QrCode.start({ deviceId: { exact: instance.data.arrCameraIds[0] } }, opts, qrCodeSuccessCallback);
                                      break;
                                  }
                              }
                          }
                      } else { html5QrCode.start({ deviceId: { exact: arrCameraIds[0] } }, opts, qrCodeSuccessCallback); }
                  } else { console.log('No cameras found.'); }
                }).catch(err => {
                  console.error(err);
                });

Note, I am using the facingMode approach as well, but also present this alternative method to select Front / Back cameras as some devices do not seem to select the correct camera with facingMode.

I would expect with this configuration to only be able to scan QR Codes / AZTEC barcodes, however I am able to scan many of the other barcodes as displayed on the page @ https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/#all-supported-formats

Testing was carried out on a Samsung A22 phone, running OS 11, in the Samsung stock browser, the Edge browser and also the Chrome browser.

[aronchick]

+1 - found that unless I added "useBarCodeDetectorIfSupported: true" on a Logitec Desktop Brio Camera, the UPC scanner did not work. (Chrome latest on MacOS - QR Code detector ran fine.)

[mebjas]

I am able to reproduce this. Looking further.

+1 - found that unless I added "useBarCodeDetectorIfSupported: true" on a Logitec Desktop Brio Camera, the UPC scanner did not work. (Chrome latest on MacOS - QR Code detector ran fine.)

This is slightly different. You can consider two implementations working when "useBarCodeDetectorIfSupported: true" is set. "useBarCodeDetectorIfSupported: true" enables detection based on device level BarcodeDecoder library which is sometimes both more efficient and better than detecting the barcodes than zxing js. The only catch is the device dependence.

I'll check why the formatsToSupport isn't being honoured.

[mebjas]

Ok I tested and realised it's not a bug with the library. Please check this documentation https://github.com/mebjas/html5-qrcode#scanning-only-qr-code-with-html5qrcode

Unlike Html5qrcodeScanner there are two configurations for Html5qrcode class. The right way to use this is:

var qrFormatsToSupport = [ 
    Html5QrcodeSupportedFormats.QR_CODE
];
var html5qrcodeConfig = {
    formatsToSupport: qrFormatsToSupport,
    experimentalFeatures: {
        useBarCodeDetectorIfSupported: true 
     }
};
var html5qrcode = new Html5Qrcode("reader", html5qrcodeConfig);
var scanConfig = {
    fps: 10,
    qrbox: 250
}

html5qrcode.start(
      { facingMode: facingMode },
      scanConfig,
      onScanSuccess);

[mebjas]

Closing this, please reopen if there are more questions.

@aronchick if you still have issues, please file another issue for following up - I'd define it as "UPC code not scanned unless useBarCodeDetectorIfSupported is set".

[Caitlin-Finn]

It seems like this is still an issue.
If I set the following:
formatsToSupport: [Html5QrcodeSupportedFormats.UPC_A, Html5QrcodeSupportedFormats.UPC_E, Html5QrcodeSupportedFormats.EAN_13];

It will still allow QR codes to scan.

[ROBERT-MCDOWELL]

@Caitlin-Finn did you switch to native browser scanner?

[Caitlin-Finn]

@ROBERT-MCDOWELL - Do you mean useBarcodeDetectorIfSupported? Not sure what you mean by native browser.
Here is my config

                    html5QrCode.current.start(
                        { facingMode: 'environment' }, 
                        {
                            fps: 5,    
                            qrbox: { width: 150, height: 100 },
                            focusMode: 'continuous',
                            formatsToSupport: [Html5QrcodeSupportedFormats.UPC_A, Html5QrcodeSupportedFormats.UPC_E, Html5QrcodeSupportedFormats.EAN_13],
                            useBarcodeDetectorIfSupported: true
                        },
                        qrCodeSuccessCallback,
                        qrCodeErrorCallback)
                        .catch((err) => {
                            // Start failed, handle it.
                        });

[ROBERT-MCDOWELL]

try useBarcodeDetectorIfSupported: false or true if you are sure the native browser scanner supports the barcode you need.

[Caitlin-Finn]

@ROBERT-MCDOWELL when I changed it to false it was the same behavior

[mebjas]

formatsToSupport: [Html5QrcodeSupportedFormats.UPC_A, Html5QrcodeSupportedFormats.UPC_E, Html5QrcodeSupportedFormats.EAN_13],

Is part of constructor for Html5Qrcode and not part of start(..) API.

Please see example here: https://github.com/mebjas/html5-qrcode#scanning-only-qr-code-with-html5qrcode