index.html

﻿<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, world!</title>
	
  </head>
  <body>
  
    <div style="width: 500px" id="reader"></div>
    <p id="value"></p>
    
    <!-- <script src="jquery-3.5.1.slim.js"></script> -->
    <script src="html5-qrcode.min.js"></script>

    <script>
      //$(function(){

            // This method will trigger user permissions
            Html5Qrcode.getCameras().then(devices => {
            /**
            * devices would be an array of objects of type:
            * { id: "id", label: "label" }
            */
            if (devices && devices.length) {
                var cameraId = devices[1].id;
                // .. use this to start scanning.

                //const html5QrCode = new Html5Qrcode("reader");
				const html5QrCode = new Html5Qrcode(
					"reader", { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] });

                html5QrCode.start(
					cameraId,     // retreived in the previous step.
					{
						fps: 10,    // sets the framerate to 10 frame per second
						qrbox: 250  // sets only 250 X 250 region of viewfinder to
									// scannable, rest shaded.
					},
					qrCodeMessage => {
						// do something when code is read. For example:
						console.log(`QR Code detected: ${qrCodeMessage}`);
						window.confirm(`QR Code detected: ${qrCodeMessage}`);
						//$("#value").html(qrCodeMessage);
						//alert(decodedText);
					},
					errorMessage => {
						// parse error, ideally ignore it. For example:
						console.log(`QR Code no longer in front of camera.`);
                })
                .catch(err => {
                    // Start failed, handle it. For example,
                    console.log(`Unable to start scanning, error: ${err}`);
                });
            }
            }).catch(err => {
                // handle err
                console.log(`error: ${err}`);
            });
      //})
    </script>

  </body>
</html>