Camera for QR scan not working

[Jboxer]

Hi There,

The camera doesn’t seem to work and I’m not getting any error messages.
I’m using the camera for qr scanning using the html5-qrcode library → https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.4/html5-qrcode.min.js

This runs well in my local.

Thanks.

[Greenreader9]

Please share your code/URL

[Jboxer]

Here’s the URL → https://camc-qr.rf.gd/index.php

[Greenreader9]

I’m going to guess something is not setup correctly, since parts of the widget (Request Camera Permissions and Scan an Image File buttons) are missing.

Make sure you have installed the widget according to the docs:

Getting started | ScanApp

Command line access is not supported here, so you’ll need to run commands on your machine and upload resulting files over FTP

[Jboxer]

I see. I’m not really sure what’s the issue. But here’s my code →

<!-- Scanner Lib -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.4/html5-qrcode.min.js"
        integrity="sha512-k/KAe4Yff9EUdYI5/IAHlwUswqeipP+Cp5qnrsUjTPCgl51La2/JhyyjNciztD7mWNKLSXci48m7cctATKfLlQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    const scanner = new Html5QrcodeScanner("reader", { qrbox: { width: 250, height: 250 }, fps: 10 });

    scanner.render(onScanSuccess, onScanError);

    function onScanSuccess(qrCodeMessage) {
      document.getElementById("result").innerHTML = `
        <h3>Scanned Code:</h3>
        <div class="container-fluid py-3">
          <div class="h-100 p-3 text-bg-light rounded-3">
            <h2>${qrCodeMessage}</h2>
          </div>
        </div>
      `;

      scanner.clear();
      document.getElementById("reader").remove();

      fetch("scanner-submit.php", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ qr_value: qrCodeMessage }),
      })
        .then(response => {
          if (!response.ok) throw new Error("Server error");
          return response.json();
        })
        .then(data => {
          document.getElementById("result").innerHTML += `
          <p class="text-success">${data.message}</p>
          <a href="scanner.php" class="btn btn-lg btn-light fw-bold ctm-btn">Scan Again</a>
        `;
        })
        .catch(error => {
          console.error("Error:", error);
          document.getElementById("result").innerHTML += `
          <p class="text-danger">Error saving QR to database.</p>
          <a href="scanner.php" class="btn btn-light">Try Again</a>
        `;
        });
    }

    function onScanError(err) {
      console.warn("Scan error:", err);
    }
  </script>

[Jboxer]

Here’s the code ni codepen.

https://codepen.io/jeruinthebox/pen/PwqvPNG

[Admin]

I have no idea why it doesn’t work for you.

But it should be noted that the scanner widget appears to be rendered completely by the browser. So there is no way for us to affect that from the server/hosting side. The code on the codepen and on your website appears to be identical, so I have no idea why it doesn’t work. There are no errors reported on your site at all.

When I run a little test script to get camera permission, it does work correctly.

So I’m guessing the issue you’re having has something to do with the internals of the QR code library you’re using. But I have no experience with that library, so I cannot really help you with that.

[Jboxer]

I see. Like you said, it might be because of the scanner library I’m using. I’ll try other library then like the scanapp.

Thanks!

[Jboxer]

Closing this topic. I just had the camera working already by using a different librabry(scanapp).