Clicking buttons does nothing

[mjesensky]

Hey just tried to implement this into my page and it works to the point that im getting the default layout provided by Easy mode but once I want to start scanning nothing works. When I click on Request permissions button it does nothing neither does the file upload button and there are no errors in the console. Im using localhost but tried it on https aswell and same result

I pretty much copied your example on https://gist.github.com/mebjas/729c5397506a879ec704075c8a5284e8 which when i tried it on your page worked just fine but it does not work for me.

Adding this to my js seemed to work but not for long.

document.featurePolicy.allowsFeature("camera");

I was able to get my camera's output and scanner but then for no reason after reloading the page the button stopped working again even with the code added. No idea why

EDIT:

Okay Im really baffled at this point. I left it as it was since i made this post to clear my head a bit and came back to it today i did not touch the js code not even in the slightest and all i have done was CMD + SHIFT + R (like ctrl + shift + F5 on Windows basically force reload the page) and it started working again but THEN I refreshed page while the camera was on and scanning and the button does not work once again. Like what???

[mebjas]

Looks like you likely had the same issue described in https://github.com/mebjas/html5-qrcode/issues/115

document.featurePolicy.allowsFeature('camera');

Wouldn't resolve the issue as it's just a way to check if the feature policy header from the server permits usage of camera on the web page.

I have a feature request to add better error reporting in the library to call this out - https://github.com/mebjas/html5-qrcode/issues/120

For now, I think you need to fix the feature policy header in your server.

[mjesensky]

Hey thanks for the response. Well it can be something with that but i have noticed one thing - Everything actually works when i reload page and start fast clicking on the button to request cam permissions. It lets me scan all like normally but if i reload the page and let it load for some time and try to use button then it does not work. So there is like something blocking it after the page is loaded but when the page is in the state of loading and i spam the button it lets me trought for some reason. Dont know if thats helpfull

Sorry but forgot to mention that

document.featurePolicy.allowsFeature('camera');

returns 1

• the camera featurePolicy should not be the reason why scan from file is not working, should it?

[mjesensky]

I think the problem is that g.addEventListener("click", .... only happens when i click on it when the page is in the state of loading and not loaded. Could be something with DOM but im not sure. If its any helpful here is my code:

    function docReady(fn) {
        // see if DOM is already available
        if (document.readyState === "complete"
            || document.readyState === "interactive") {
            // call on next available tick
            setTimeout(fn, 1);
        } else {
            document.addEventListener("DOMContentLoaded", fn);
        }
    }

    docReady(function () {
        function onScanSuccess(qrCodeMessage) {
            var data = qrCodeMessage;

            if (data != '') {
                $.ajax({
                    type: "POST",
                    cache: false,
                    url : "{{action('QrLoginController@checkUser')}}",
                    data: {"_token": "{{ csrf_token() }}",data:data},
                    success: function(data) {
                        if (data==1) {
                            $(location).attr('href', '{{url('/')}}');
                        } else {
                            $('#message').html("There is no user with this Code!");
                            $('#message').css("display", "block");
                        }
                    }
                })
            } else {
                $('#message').html("There is no data in this Code!");
                $('#message').css("display", "block");
            }
        }

        var html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", { fps: 10, qrbox: 250 });
        html5QrcodeScanner.render(onScanSuccess);
    });

this exact same code (apart from ajax) works when i try it trough xampp with files you provided as example but the moment i post the code into my Laravel project it just does not work (unless i reload page and spam the button as i mentioned previously)

[mebjas]

In this example particularly the docReady method is only called when the DOM is loaded. And it's when you call the render() method that the whole UI of qr code scanner is built and event listeners are added.

If you would like to debug further I'd recommend adding the three scripts separately (works on Chrome only IIRC)

<script src="third_party/qrcode.js"></script>
<script src="src/html5-qrcode.js"></script>
<script src="src/html5-qrcode-scanner.js"></script>

And then debug where it might not be working in the html5-qrcode-scanner.js if you find certain bug in the code a pull request would be most welcomed!

Alternatively if you can figure out an easy way to reproduce this issue, I'd try to fix this myself!

[mjesensky]

Okay I will try to create another Laravel project and check if its a compatibility problem.

[mjesensky]

Well i narrowed it down to my app.js. But because how laravel works i would have to keep removing dependencies and compiling it just to find the one that is causing the issue. Its for sure something from there cause when I removed link tag which was linking it into my app all worked. I can send you uncompiled files if you want to take a closer look on what could be the issue but I got it fixed since I dont need to use app.js on that particular page so i just removed it from head tag.

EDIT: Its a Vue compatibility issue. I've just used the default html and js layout of your package (cause i was too lazy to implement vue one) thinking that it should be okay but turns out that when you have vue included on your page and #reader div is inside of the vue #app div it somehow does not work. Propper fix would be swapping default QR-scanner layout for the vue one but i think i will just stick with removing app.js from that page since i dont need it there anyway

[mebjas]

Have you tried using it as a Vue components so you don't have to add a reader separately and the component will own the html div element - reference: https://github.com/mebjas/html5-qrcode/tree/master/examples/vuejs

[mebjas]

Closing as obsolete