[web] Mobile Scanner not working with colored (other than black) QR codes

[RVD-IT-Solutions]

I’m experiencing an issue with the following in the Mobile Scanner Flutter package:

Given the image below, it seems that the library is not able to scan QR codes that is other than black when using the app in web?
Android and iOS works fine.

Original QR code

Edit:

I've tried inverting the image above and can confirm it works then:
Inverted QR code

I also decoded the inverted QR code with the help of using <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.min.js"></script> in my index.html file(since .analyzeImage() doesn't work in Web) and used it as such:

import 'dart:js' as js;

String? decodeQRCode(Uint8List imageData, int width, int height) {
    final jsQr = js.context['jsQR'];
    if (jsQr == null) {
      throw Exception(
          'jsQR library is not loaded. Ensure it is included in index.html.');
    }

    final result = jsQr.callMethod('default', [
      js.JsObject.jsify(imageData),
      width,
      height,
    ]);

    return result?['data'];
  }

and after I invert it like such:

Uint8List invertColors(Uint8List data) {
    final inverted = Uint8List(data.length);
    for (int i = 0; i < data.length; i++) {
      inverted[i] = 255 - data[i];
    }
    return inverted;
  }

and then:

import 'dart:html' as html;

void _pickImageWeb() async {
    final html.FileUploadInputElement uploadInput =
        html.FileUploadInputElement();
    uploadInput.accept = 'image/*';
    uploadInput.click();

    uploadInput.onChange.listen((event) async {
      final files = uploadInput.files;
      if (files != null && files.isNotEmpty) {
        final reader = html.FileReader();
        reader.readAsDataUrl(files[0]);

        reader.onLoadEnd.listen((event) async {
          final imageUrl = reader.result as String;

          final html.ImageElement image = html.ImageElement();
          image.src = imageUrl;

          await image.onLoad.first;

          final html.CanvasElement canvas = html.CanvasElement(
            width: image.width,
            height: image.height,
          );
          final ctx = canvas.context2D;
          ctx.drawImage(image, 0, 0);

          final imageData = ctx.getImageData(0, 0, image.width!, image.height!);
          final imageDataList = Uint8List.fromList(imageData.data);
          final invertedData = invertColors(imageDataList);

          final result =
              decodeQRCode(invertedData, image.width!, image.height!);
          print(result);
          String qrCode = result ?? 'Geen QR gevind nie!!!';
        });
      }
    });
  }

Is this a ML Kit bug or something else? Why would it work on Android and iOS and not in Web?

[navaronbracke]

Web uses ZXing, not MLKit or the Vision API.
We recently added a fix for MLKIt on Android, since it also doesn't support color inverted barcodes out of the box.
I think we need to do something similar for web here.

[navaronbracke]

ZXing for the web should have support for this it seems?

https://github.com/zxing-js/library/blob/8b5bf582f0ba7df97d6fcade6560e34e75083aa3/src/browser/BrowserCodeReader.ts#L933-L951

but I'm not sure why it isn't working then.

[navaronbracke]

I retested this on web and can confirm that this isn't working correctly.

[RVD-IT-Solutions]

@navaronbracke Thank you very much for the reply.

Can it be because the mediaElement is not reported as a HTMLVideoElement?

[navaronbracke]

@RVD-IT-Solutions I did an additional test and it seems this is a bug in mobile_scanner.
We currently use zxing-js version 0.19.1 as the default implementation / version.
However, I was looking at the master branch for the code link in #1278 (comment)

I bumped our ZXing version from 0.19.1 to 0.21.3 (looks to be the latest version?) and then it does seem to work with white-on-black QR codes.
I also tested your sample code from the first post in this thread and that does fix it for that one, too!

I'll get a hotfix in for version 6.0.x then.
And if you really need the workaround now, you could use the setScriptUrl() method, as documented in
https://github.com/juliansteenbakker/mobile_scanner/blob/master/README.md#providing-a-mirror-for-the-barcode-scanning-library , with https://unpkg.com/@zxing/library@0.21.3 as the url.

Thank you for reporting!

[RVD-IT-Solutions]

@navaronbracke Excellent work! Good job and thank you for your hard work. I'll be waiting for the new version!

[navaronbracke]

@juliansteenbakker Can we provide this fix in a new version 6.0.x hotfix?