capacitor-community / barcode-scanner

A fast and efficient (QR) barcode scanner for Capacitor
MIT License
437 stars 169 forks source link

implement web plugin #190

Closed gunsha closed 1 year ago

gunsha commented 1 year ago

31

thegnuu commented 1 year ago

@gunsha Thanks a lot for this one!

I will make a few tests this week and merge asap :)

arcadius commented 1 year ago

Hello @thegnuu. Any update on this PR please It would be great to have it in

thegnuu commented 1 year ago

Totally forgot about that PR, sorry guys!

I will merge it right now and test it tomorrow, if things work as expected I will create a new version tomorrow!

arcadius commented 1 year ago

Thank you very much @thegnuu Most appreciated

dafi87 commented 1 year ago

I tried it some days ago and have to say it's barely usable, sadly. Instead of the zxing lib, I found https://github.com/nimiq/qr-scanner to give much better performance.

Also, the implementation in this PR was constantly picking the user facing camera on my phone because a proper media query was missing. I fixed this in https://github.com/gunsha/barcode-scanner/compare/main...dafi87:barcode-scanner:main but abandoned afterwards in favor of the library mentioned earlier.

arcadius commented 1 year ago

@dafi87 , could you create a PR that would incorporate https://github.com/nimiq/qr-scanner ? That would be very helpful.

thegnuu commented 1 year ago

I know about the problems of zxing/browser and that the capabilities of this tool are and were always fairly limited regarding of detection rate and performance. This is unfortunately "a little bit" by design since the capabilities in browsers are limited in multiple aspects. I used it once for a project a little while ago and we decided to completely remove the browser implementation and go with this plugin, only allowing scanning on mobile devices with better implementations.

Especially looking at the upcoming ML-Kit release, the browser version will be really bad in comparison with the native implementation. Maybe I will remove the web solution completely in this upcoming release, or just keep it "as is" and explain in the docs why it will not work well for people who want to use it.

Using the qr-scanner library for this plugin is IMHO out of scope since this repo is a barcode scanner, not a QR-only scanner, which implies that it should at least be able to scan some 1D barcodes as well.

I am not aware of a good working pure js implementation of any scanner, maybe there is some WebAssembly version now, which might work better.

I can implement the fixes and enhancements @dafi87 provided, but I guess we will not be able to "create wonders" in the web version ;)

arcadius commented 1 year ago

@thegnuu and @dafi87 , With minimal change, https://github.com/nimiq/qr-scanner
should be able to scan barcodes https://github.com/nimiq/qr-scanner/blob/abcfe1bce2703721408d8ce7ebde94a359998506/src/qr-scanner.ts#L656

There is an open ticket for that https://github.com/nimiq/qr-scanner/issues/207

thegnuu commented 1 year ago

@arcadius I see, I quickly dug through the code and there is one major problem.

https://caniuse.com/?search=BarcodeDetector

As you can see, BarcodeDetector is experimental and currently only available extremely limited. qr-scanner uses a custom worker as a fallback if the system does not provide a BarcodeDetector API. This is possible and implemented for QR codes, but for any other code it will require a lot of work or using an existing library like zxing.

So I am sure this is not as easy as it seems at first glance...

arcadius commented 1 year ago

BTW, @thegnuu , I am testing the current implementation from @gunsha , not too bad. Seems to be working. Maybe in the web implementation checkPermission() and hideBackground() should not throw an Unimplemented Exception?

FranGomezVenegas commented 1 year ago

This is awesome!! Thanks

Is there an easy way to print labels from javascript by the frontend? I mean, when hosted in a cloud (the API) and the label printer is in a company network then .... how to can both sides be connected?

thegnuu commented 1 year ago

@FranGomezVenegas seems off-topic here, this is a barcode scanner and has nothing to do with printing, you need to find another community to help you with this topic...

thegnuu commented 1 year ago

@arcadius thank you for testing!

I just implemented hideBackground(), showBackground(), prepare() and checkPermission(). Unfortunately I realized that startScanning() is not implemented right now, I will need to fix this before I can create a new release :)

FranGomezVenegas commented 1 year ago

@FranGomezVenegas seems off-topic here, this is a barcode scanner and has nothing to do with printing, you need to find another community to help you with this topic...

Agree, was just to take advantage and sharing with this audience due to probably they fought this other challenge that is related somehow.

arcadius commented 1 year ago

Thank you very much @thegnuu for this great plugin