search

mebjas / mebjas.github.io

Repository for hosting my personal home page and blog.
https://blog.minhazav.dev
Apache License 2.0
13 stars 6 forks source link

Html5QrcodeScanner - End to end QR Code scanner for web, not just a library | Minhaz’s Blog #9

Open utterances-bot opened 3 years ago

utterances-bot commented 3 years ago

Html5QrcodeScanner - End to end QR Code scanner for web, not just a library | Minhaz’s Blog

When I started the project html5-qrcode, my goal was to make it easier to implement QR code scanning in web applications. I wanted to abstract the inner details of how the camera is accessed in HTML5 and how it’s connected with a scanning library. Some developers started to adopt the library and use it in their products. In general, the adoption trend seemed to be users trying to replicate the demo code. The library was stateful and required a series of steps to connect it with UI. In the latest version, I have implemented another wrapper called Html5QrcodeScanner which enable developers to integrate QR Code scanning with ~5 lines of code. No more statefulness!

https://blog.minhazav.dev/qr-code-scanner-end-to-end/

benaloui commented 3 years ago

Hi, thanks a lot for you great code. I have two question :

mebjas commented 3 years ago

@benaloui You are welcome!

Is-it possible to select back camera of mobile phone BY DEFAULT without need to select and validate ?

At the moment this is not possible with Html5QrcodeScanner but it's possible with the Html5Qrcode class in the latest version. There is more detail on how to use that in the project readme.

Demo link: https://blog.minhazav.dev/research/h5q-direct

There has been a lot of asks on this question and I am thinking on how to extend this in the Html5QrcodeScanner class and trying to think of what the UI and the API interface be. The key problem is there is no concrete API to get if the device supports front and back camera, IIUC. I'll work more closely on this - if you have ideas please add to https://github.com/mebjas/html5-qrcode/issues/65

How can I launch a scan of QrCode directely when first page is loading with no button validation ?

You need user permissions to get camera access. Based on some research users are highly likely to deny the permission if you ask them directly on the page launch. That said you are free to design the QrCode scanner user experience using Html5Qrcode class.

I have a feature request filed to see if we can store some info like permissions and camera facing in this library - https://github.com/mebjas/html5-qrcode/issues/85

benaloui commented 3 years ago

Thanks a lot for this long answer. Giving the permission at the camera at least at the first time is not a problem. I will try to use the second solution as you show in you link demo and I will back to you after. Thank you very much. Regards. Nidhal

Envoyé de mon iPhone

Le 3 oct. 2020 à 05:53, minhaz notifications@github.com a écrit :

 @benaloui You are welcome!

Is-it possible to select back camera of mobile phone BY DEFAULT without need to select and validate ?

At the moment this is not possible with Html5QrcodeScanner but it's possible with the class inHtml5Qrcodethe latest version. There is more detail on how to use that in the project readme.

Demo link: https://blog.minhazav.dev/research/h5q-direct

There has been a lot of asks on this question and I am thinking on how to extend this in the Html5QrcodeScanner class and trying to think of what the UI and the API interface be. The key problem is there is no concrete API to get if the device supports front and back camera, IIUC. I'll work more closely on this - if you have ideas please add to mebjas/html5-qrcode#65

How can I launch a scan of QrCode directely when first page is loading with no button validation ?

You need user permissions to get camera access. Based on some research users are highly likely to deny the permission if you ask them directly on the page launch. That said you are free to design the QrCode scanner user experience using Html5Qrcode class.

I have a feature request filed to see if we can store some info like permissions and camera facing in this library - mebjas/html5-qrcode#85

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

charmjo commented 3 years ago

Hi! Thank you for your work on this library and I have a question in mind.

When it comes to using the pro mode of this library, do I still use the same script src shown in this example?

mebjas commented 3 years ago

@charmjo I am not sure which one is considered pro mode.

Html5QrcodeScanner is a UI wrapper on top of Html5Qrcode which will allow you to integrate QR code scanner with ease and with the UI that supports both webcam based scanning and file based scanning (which supports capturing image from native camera in case of Android/IOS). If you want your own UI you can build it using Html5Qrcode library which provides all required methods.

nitin282001 commented 3 years ago

@mebjas Hi thanks for the great help I am having an issue with focus is qr code is smaller it doesn't focus the normal camera works and focusing well but with library camera is not focusing

sanseru commented 3 years ago

@mebjas

Thanks for the great code!

i am having issue with after result can make delay before next scanning so not looping scanning

kandeepan198 commented 2 years ago

Hi I have using Html5QrcodeScanner.js I need to know how to close the scanning in page load currently working but always when page load camera always open.how to solve

gldeveloppement commented 2 years ago

Hello The Html5QrcodeScanner reader is really great! on the other hand I can't read barcodes of type Rss_14 (01)123456123(10)4554646 Is there a way to make it work for this model?

Anum-Aamir commented 2 years ago

@kandeepan198 did you found the solution to your problem. I am facing same issue.

hankoandras2 commented 1 year ago

Hello! Is there any way to read CODE39 Extended barcodes? Thanks

karthikmalay1990 commented 1 year ago

hi , I am using html5qrcodescanner in my website and that website I am opening using my Xamarin mobile app . in android it working , but in iOS can't able to open the camera . can any one help me on this . thank you

myghome commented 1 year ago

Hello, I encountered a delay in launching the camera on a mobile device Windows OS, a delay of 17 seconds. The camera works great on a laptop Windows OS. Same code on mobile and laptop.