How to Integrated A QR Code Scanner In a Google Sheet Web App Without a 3rd Party Application and Auto Populate the Scan Result to a Place Holder

I am trying to create a Web App that has search capability. Rather than manually typing the keywords to the search place holder, the search keywords will be coming from another Google Sheet that should auto populate to the search parameter place holder via QR code. For that reason, I need to integrate a QR Code scanner to the Web App itself. My code works if you dragged the QR Code to the scanner place holder, but the it is not working when you scan the QR Code directly using the integrated scanner. I am an aspiring coder and has limited knowledge about programming languages.

HTML Code

<html>
<head>
    <script src="https://unpkg.com/html5-qrcode"></script>
</head>
<body>
    <input type="text" id="searchInput" placeholder="Enter search parameter">
    <div id="qr-reader"></div>
    <script>
        function handleQRCode(decodedText) {
            document.getElementById('searchInput').value = decodedText;
        }

        const html5QrcodeScanner = new Html5QrcodeScanner("qr-reader", {
            fps: 10,
            qrbox: 250,
        });

        html5QrcodeScanner.render(handleQRCode);
    </script>
</body>
</html>

JS Code

function doGet() {
    return HtmlService.createHtmlOutputFromFile('Page')
        .setTitle('QR Code Scanner Web App');
}

function getQRCode(decodedText) {
    Logger.log('Decoded QR code text: ' + decodedText);
}