Camera access and permissions

Hosting Support
1

tech4file.ml
I want use a camera module in my web page to scan QR code but all the scripts that are using were blocking. I have tested in codepen.io were camera is enabled and working is there any blocking of scripts in my hosting

2

Can you share the codepen script you are using?

We can’t help you if you don’t give us the information we need to help.

3 Likes
3

This code I have tested in codepen

<!DOCTYPE html>
<html>
<head>
    <title>QR Code Scanner</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
    <script>
        Quagga.init({
            inputStream: {
                name: "Live",
                type: "LiveStream",
                target: document.querySelector('#scanner')
            },
            decoder: {
                readers: ["code_128_reader"]
            }
        }, function(err) {
            if (err) { console.log(err); return }
            Quagga.start();
        });
        Quagga.onDetected(function(data) {
            console.log(data.codeResult.code);
            document.getElementById("result").innerHTML = data.codeResult.code;
        });
    </script>
</head>
<body>
    <div id="scanner"></div>
    <div id="result"></div>
</body>
</html>

this is for testing module this is not working

5

I have shared the code but i couldn’t see here can you see that

6

It would be very helpful if you could share the Codepen script URL, like for example https://codepen.io/jago6144/pen/KKZRZKJ, and the page URL of your site where you make use of it.

No, it doesn’t seem to have properly shown. Try just posting the URLs again.

1 Like
7


check this

1 Like
8

It seems to work fine on Codepen. Can you also share the URL of the page in your site that uses it?

9

https://labs.tech4file.ml/qr/qr.html

10

The issue with your code on your website is that you’ve put it above the elements it needs to modify (“scanner” and “result”), so the code executes, cannot find them, and fails. As you can also see on Codepen, the script is below the tags it modifies.

You’re going to need to either make it wait for the HTML page to fully load, or place it before the </body> closing tag instead of the head where it’s currently at.

5 Likes
11

Copy the code from codepen to the website and don’t change it. The way JavaScript works is that it renders with the HTML by the browser, and it runs in order.

I have a feeling the issue is that you placed the HTML div’s below the JavaScript, so they are not recognized by the JavaScript until after the page loads.

4 Likes
12

The browser downloads a web page from top to bottom and renders and executes it in that order. So if you put Javascript code in the <head>, it will execute before the body is loaded. If that code then tries to access HTML elements from the body, it will fail, because they haven’t been loaded yet.

To avoid this, most sites wrap their Javascript in a DOMContentLoaded event listener or something like that. Or you can just add the defer attribute to your script tag. Either of those things will ensure that your Javascript will only be executed once the page is fully loaded.

4 Likes
13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.