develop a reader that uses shape detection API from chrome

[ericblade]

https://web.dev/shape-detection/

unfortunately only available for barcodes on Mac and Android. :|

[stereobooster]

https://github.com/undecaf/barcode-detector-polyfill

[ericblade]

mmm.. thanks for the note! I had completely forgotten about this, and it doesn't look like it's gone anywhere in Chrome, but having an implementation for it in WASM could obsolete most of Quagga2, and I'm not opposed to that! Quagga does provide still a lot more information than it looks like that API does, but I suspect for most people's purposes, a stripped down reader with just this would be excellent.

[stereobooster]

it doesn't look like it's gone anywhere in Chrome

For desktop Chrome (MacOS)

	native	polyfill
video	no (1)	yes
uploaded img	yes	yes
remote img	no (2)	no (3)
formats	aztec, code_128, code_39, code_93, data_matrix, ean_13, ean_8, itf, pdf417, qr_code, upc_e	codabar, code_39, code_93, code_128, databar, databar_exp, ean_2, ean_5, ean_8, ean_13, ean_13+2, ean_13+5, isbn_10, isbn_13, isbn_13+2, isbn_13+5, itf, qr_code, sq_code, upc_a, upc_e

• 1: InvalidStateError: Failed to execute 'detect' on 'BarcodeDetector': Invalid element or state.
• 2: SecurityError: Failed to execute 'detect' on 'BarcodeDetector': Source would taint origin.
• 3: Uncaught (in promise) DOMException: Failed to execute 'getImageData' on 'OffscreenCanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

For desktop Firefox (MacOS) polyfill works for all cases (at least locally)

[ericblade]

Is it able to detect rotated barcodes? i'm pretty excited about this really. especially if we can get it working in browser and node. it looks like it could replace a lot of quagga

[stereobooster]

It is able to detect it to some extent. Based on my experimentation - it can detect 90 degrees. But can't do 45 degrees. Need to find what official documentation says.

I'm preparing webpage where you would be able to test it

[ericblade]

that is one of the good things about quagga, is it is quite decent at picking up codes that are any rotation, and moderately decent even at damaged codes, compared to some other solutions. Quagga might be able to detect a barcode area, then push it into this API with an image rotated correctly. Or something could take Quagga's onProcessed, and pipe it to that. something like that.

anyway, it does look like it would probably be mostly a question of 'how do i package WASM with webpack and typescript stuff' as the implementation is mostly just a one-liner... so a simple quagga compatible reader could look very very short on code outside of bringing in the wasm module.

[stereobooster]

By no means I insist on using polyfill. I just thought it is quite interesting possibility.

anyway, it does look like it would probably be mostly a question of 'how do i package WASM with webpack and typescript stuff'

For now library loads WASM from web. So it should work with webpack.

To use in node js. I have to use node 18+ with NODE_OPTIONS='--experimental-network-imports'

Related: undecaf/barcode-detector-polyfill#2

[ericblade]

I'm afraid I don't have time to try to implement this right at the moment, I do have a couple of things that I've already promised to in other tickets when I get time, and covid, the holidays, and work have been in the way... but I really appreciate your bringing this up, and the research you've done.

[stereobooster]

here is online demo in case you want to check it yourself https://barcode-demo.netlify.app/

[ericblade]

looks like it does handle rotations pretty reasonably, although i'm not sure if this is an error in the data or in the drawing routine that displays the green detected area incorrectly

detected the correct code off that rotated barcode, but the indicator of where it was detected is very much not rotated, makes it look like it was a partial scan. but the number returned is correct.

That was one I just picked out of the test fixtures/ directory in quagga, i'd have to take some time to check and see which ones work correctly in quagga to compare performance.

[stereobooster]

Drawing of rectangle supposed to be correct. If rectangle is in wrong position this due to what Decoder returned.

This image is recognized #392 by the way