HTML5 QR Code Scanner Demo | Minhaz’s Blog

[utterances-bot]

HTML5 QR Code Scanner Demo | Minhaz’s Blog

Demo of a cross platform HTML5 QR Code scanner

https://blog.minhazav.dev/research/html5-qrcode

[kkmmss12345]

Hello i have some questions
I try to modify

with qrbox becomes document.body.clientWidth-100 As a result, Android can scan normally, but IOS cannot scan Want to understand what might have gone wrong?

[bvnhan]

i can't scan qr-code micro.

[acbruno]

Hi. Minhaz...
First of all I want to thank you for sharing the project for QRcode with html5 (and your knowledge too).
I have a question for a difficulty that I have to identify which camera is reading. For example: I have 2 cameras, I show the qrcode in one, and I need to save in a string which camera is reading. I tried to get it via html5-qrcode.min.js -> var (d), but the script shows me a random id. Ex.

dB5lBw / GqLa2s7cYTkKpWFmAf9oa6cwFBpTaSpwi2OA =
DKHSUr1mod0pECnWtScivDRQAcxpECBRjPA4g6Opb0g =
cA7HpvAhQYjhagJ8ZaAuyTJzyujoyNX NmtFnDhVdyA =

Can you help me with this question? Can you even see the value of the chosen camera? For example: camera 1, 2, 3,?

Sorry, my english is very bad.

Regards, Bruno.

[sameeraman21]

it is not working in localChrome. its saying uncaught CameraIdorConfig

[gsohler]

Very nice, i like it!
Which are the terms to integrate it into an PHP Application ?
Is it possible to remember the "use camera"permission and choose which one to use ?

[Balamurugan1903]

How to directly link start scanning without click request camera permissions

[ricotritanto]

html5 is not supported, except using https....

[satyapratap-dev]

It's not reading the some of the QR images. Can you please advise?
For ex: Wikipedia website QR Code
https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/QR_code_for_mobile_English_Wikipedia.svg/1024px-QR_code_for_mobile_English_Wikipedia.svg.png

[Reza-kavian]

In your site demo, in addition to qrcode, I can also scan barcodes. But when I transfer the source code to my project, it only reads qrcode but does not read barcodes

[Reza-kavian]

Just published support for multiple types of barcode in version 2.0.0. Please take a look at latest version of code from Github release or npm

[sibelle-labs]

Hi!
Great work!
Can you maybe post an example with the integration in an HTML form?
Where, for example, have the choice of a field, input by hand or from a QR code?
Many Thanks

[tengty]

Huawei or Samsung phone with multiple camera at rear couldn't pickup the right camera.
Setting "environment" nothing show for Huawei, and Samsung pickup telphoto lens couldn't scan due focus super blur.

[bmkun]

hi !
Great work!
can this qrcode get the camera permission without click the button first ? or auto request to make our web user easily using it ?

[dubalumesh]

How to scan qrcode instead using QRcode scanner instead of camera

[mebjas]

@dubalumesh You can scan using a image file selected from device or using the mobile device's camera application.

@bmkun

can this qrcode get the camera permission without click the button first ? or auto request to make our web user easily using it ?

Not right now, please file a feature request for this.

[GumballLab]

Hi.

Great job, thank you.

When a code is detected is it possible to know the type of code?
This would be very useful if you what to just read QR codes, for example.

Thank you very much.

[Jalil-Irfan]

Just tried to add in the minified JS from "https://github.com/mebjas/html5-qrcode/releases" but on running the app after following the steps its scanning only the QR
Barcodes are not getting scanned please help

[bmkun]

i using laragon for my local server, there is https setting for our local web, but wen i try to access from my phone like this ( https://howchoo.com/g/mte2zgrhmjf/how-to-access-a-website-running-on-localhost-from-a-mobile-phone ) i can't get https acces, my question is, can we access this "HTML5 QR Code scanner" from phone browser so i can see it work or not and how abou the interface from phone browser, thaks minhaz :)

[mebjas]

@GumballLab feature request filed, working on this - mebjas/html5-qrcode#224

@Jalil-Irfan - can you share the code you are using? And more about the OS / browser?

@bmkun - you should be able to do this using remote debugging in chrome - https://developer.chrome.com/docs/devtools/remote-debugging/

[equinoxe-rehm]

Is there a way to translate the buttons and to hide the header with the link to github and the "Idle" etc. message?

[derryberni]

it's possible to disable upload images with any config?

[mebjas]

@derryberni

it's possible to disable upload images with any config?

Not yet implemented (please file a feature request) - Can I ask the reasons to remove it?

@equinoxe-rehm

Is there a way to translate the buttons and to hide the header with the link to github and the "Idle" etc. message?

I am removing some redundant items from the status bar soon (including the prominent link). For the translation - Not yet, but I am soon planning to add internalisation support, but I am not proficient in many languages - would you be interested in contributing to transalation?

[leedickson-my]

how can I add support for Samsung Internet browser or other Chromium based browser?

[sibelle-labs]

@mebias
it's possible to disable upload images with any config?
And set environment device as default?

For translation to Spain or German, i can help !
Thanks a lot

[ahadziahmetovic]

Hello,
I wonder if it is possible to better scan a smaller 2d image like 10mm x 10mm. Scanning sometimes takes a long time, and sometimes it is not possible. I’m trying to increase the fps to 50 or 100, but I haven’t seen better results. Do you have any suggestions?

[BijeshEvento]

@mebjas it's possible to open default camera directly with any config.

[stefanoerrani]

Very good work!
Its' possibile hidden Code Scanner link and Scan and Image file link from the interface?
I'm afraid that those who have to use it will get confused.

Best regards and good weork.

Stefano Errani

[stefanoerrani]

Its' also possible to translate the language: I need italian.

Best regards.

Stefano Errani

[BijeshEvento]

Very good work!
Its' possibile hidden Code Scanner link and Scan and Image file link from the interface?
I'm afraid that those who have to use it will get confused.

Best regards and good weork.

Stefano Errani

a#qr-reader__dashboard_section_swaplink {

display: none !important;

}

[maittaml]

Very interesting code thank you so much, I tried it in my localhost but it didn't work for me. Can you help me please, I clone the repository code and tried examples but didn't work. Thanks in advance.

[Niterox]

How do you handle iPhone 14 multicamera?
We designed it without the ability to choose the camera. It chooses the camera by default.
Unfortunately the default camera cant focus in close to mid range.

Any suggestions?

[wrox1975]

How to setup back camera as default and don't ask for which camera will be used?

[rodneystover]

You can do this by adding { facingMode: { exact: "environment"} } when starting the scanner to the code like below example: /** load scanner using back camera **/ html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);

…

On Mon, Mar 27, 2023 at 3:42 AM wrox1975 ***@***.***> wrote: How to setup back camera as default and don't ask for which camera will be used? — Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVZQNSUF7CM7X3QBIF5Q4K3W6FHIDANCNFSM4SQBQSRA> . You are receiving this because you commented.Message ID: <mebjas/mebjas. ***@***.***>

[wrox1975]

Thank you @rodneystover.

I have one more question. How can I implement the autozoom? I can't scan the small QR code

[faxilmir]

Why does it show NotAllowedError: Permission Denied on Native.newWebView? I am trying to create a simple qr code scanner app but this doesn't work in WebView.

The code works fine with chrome and other browsers but now with native web view. Please help me with this. My application is stuck from past one week.

Thank you,

[marcusparsons]

@faxilmir, make sure you're running in HTTPS.

[zimbar]

@faxilmir
Hy

I have the same problem, have you find the solution?

Thanks

[georgexlai]

Wow, amazing work. I got the regular demo working using "Html5QrcodeScanner". But when I try to use "Html5Qrcode" to customize only using the back camera, it fails to work on mobile chrome, but works on my laptop chrome.

Any suggestions?

[georgexlai]

@rodneystover: did you get this working on mobile? If so, do you have a longer example (html/js)? Thanks.

[jmassisi]

Hi from Argentina!
Great work, i like your project.
I have a question:
Can I make that once the QR is scanned it automatically jumps to a predefined url?
Thanks a lot!

[yung-slime]

@jmassisi u cud do dat by setting window.location 2 dat specific url but the url u tryna redirect 2 must be from the same origin.

[sandipcdr]

In any ios device browser whenever I stop scanner using stop() method a white box flickering is appearing for some millisecond

[WordpressArtist]

everything works fine except stop not stopping scanner

[slalji]

Great work! Helped me with my project.
How to save the permission to allow camera on the mobile (I am using iphone) when the page reloads? I am verifying multiple QRcodes before submission.

[slalji]

My QRcode is white with dark background. How can I change the color by inversing gray scale just before scanning?

Salma

[1ucasdev]

Thanks for the detailed information! So far I’ve figured out how to make an full screen online calculator. I will continue to learn new technologies. Thank you!

[Manoj-Madushantha]

you can change camera permission requeest on 'src/camera
/permissions.ts' file

[faheemdad]

Got this on my phone while scanning
TypeErro: failed to execute 'removeChild' on 'node' parameter 1 is not of type 'node'

[faheemdad]

Got this on my phone while scanning
TypeErro: failed to execute 'removeChild' on 'node' parameter 1 is not of type 'node'

Link:
https://imgtr.ee/image/9t2gM

[Phanegem]

@jmassisi Did you find out how to that, i'm looking for the same thing ?

[yung-slime]

u cud do dat by setting window.location 2 dat specific url but the url u tryna redirect 2 must be from the same origin.

right here @Phanegem

[Phanegem]

@yung-slime , could you make my an example, i'm really not that good in programming.

[yung-slime]

aight so on successfully scanning the qr, what u could do is set
window.location = "url of the page u want to redirect".
btw u gotta search for window.location in internet.
@Phanegem

[amaliasr]

hi, can other button make open/close camera? i used javascript

[gentiosmanaj]

Hi there, how is possible to remove the select cameras option? i tried with css but i only can remove the select not the text "Select camera (number of cameras)"...

[cvorin]

How can i use 2d barcode scanner device used in supermarket instead of device camera.

[dadora]

very good project
but how can i read barcode in reversal mode (white on black) ??

[sickiqq]

Nice work! works fine in local, but in production i have the issue: ZXing is not defined

[cjdiez]

Hi there! I would like to help translate into Spanish.

[rbonatti]

I needed to read qrcode where the background is blue and the qrcode is white. It's not working. Does anyone know if there is any configuration?