Open url directly after scan with html5-qrcode (javascript)

November 22, 2023

I used the html5qrscan code from geeksforgeeks (url)

After successfully scanning the QR code a message including the url of the QR code is shown, I would prefer to automatically get redirected to the url.

I have a project with a due date in a couple of days, but I no idea how to solve this.

Help is very much appreciated!

I’ve tried to fix it, but I’m clueless and I give up.

Org. codes from geeksforgeeks:

<!-- Index.html file -->
<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet"
        href="style.css"> 
    <title>QR Code Scanner / Reader 
    </title> 
</head> 

<body> 
    <div class="container"> 
        <h1>Scan QR Codes</h1> 
        <div class="section"> 
            <div id="my-qr-reader"> 
            </div> 
        </div> 
    </div> 
    <script
        src="https://unpkg.com/html5-qrcode"> 
    </script> 
    <script src="script.js"></script> 
</body> 

</html>

// script.js file 

function domReady(fn) { 
    if ( 
        document.readyState === "complete" || 
        document.readyState === "interactive"
    ) { 
        setTimeout(fn, 1000); 
    } else { 
        document.addEventListener("DOMContentLoaded", fn); 
    } 
} 

domReady(function () { 

    // If found you qr code 
    function onScanSuccess(decodeText, decodeResult) { 
        alert("You Qr is : " + decodeText, decodeResult); 
    } 

    let htmlscanner = new Html5QrcodeScanner( 
        "my-qr-reader", 
        { fps: 10, qrbos: 250 } 
    ); 
    htmlscanner.render(onScanSuccess); 
});

Thank you in advance!

>Solution :

You can replace your alert with the following code :

domReady(function () { 
    // If found your qr code 
    function onScanSuccess(decodeText, decodeResult) { 
        // Redirect to the scanned URL
        window.location.href = decodeText;
    } 

    let htmlscanner = new Html5QrcodeScanner("my-qr-reader", { fps: 10, qrbos: 250 }); 
    htmlscanner.render(onScanSuccess); 
});