Реализация сканера qrcode на странице wp

Question

Я пытаюсь внедрить сканер QR-кода на своей странице Wordpress или во всплывающем окне, поэтому, когда пользователи переходят по ссылке на страницу / всплывающее окно, он / она сможет сканировать QR-код.QR-код - это, по сути, URL-адрес продукта woocommerce, поэтому я хочу, чтобы сканер QR-кода работал только в том случае, если QR-код генерируется на моем сайте.Другие QR-коды, которые не генерируются с моего сайта, можно прочитать, а просто показать информацию, такую ​​как URL или код, без перенаправления на URL.

Сценарий таков: я создаю продукт woocommerce с QR-кодом, затемЯ помещаю QR-код в меню / таблицу в ресторане.Пользователи зайдут на мой сайт и откроют страницу сканера QR-кода, затем отсканируют QR-код, и они будут автоматически перенаправлены на продукт woocommerce.Если QR-код не сгенерирован на моем веб-сайте, он не будет перенаправлять, а просто отображает информацию внутри QR-кода.

Я нашел этот плагин WP, но он полностью не работает: https://github.com/eManagerNYC/QR-Code-Scanner

Iнашел другой метод с использованием сканера QR-кода html5 из этого: https://github.com/dwa012/html5-qrcode

Но ему около 4 лет, и этот сканер QR-кода JavaScript для HTML5 поддерживает браузеры: https://github.com/jbialobr/JsQRScanner, но я не знаюкак его установить или внедрить.

Поместите все файлы из каталога js на свой сервер.

Добавьте скрипт js на свою страницу.

<script type="text/javascript" src="/js/jsqrscanner.nocache.js"></script>

Создайте элемент управления сканера и добавьте его в DOM.

 <script type="text/javascript">
    function onQRCodeScanned(scannedText)
    {
        var scannedTextMemo = document.getElementById("scannedTextMemo");
        if(scannedTextMemo)
        {
            scannedTextMemo.value = scannedText;
        }
    }

    //this function will be called when JsQRScanner is ready to use
    function JsQRScannerReady()
    {
        //create a new scanner passing to it a callback function that will be invoked when
        //the scanner succesfully scan a QR code
        var jbScanner = new JsQRScanner(onQRCodeScanned);
        //reduce the size of analyzed images to increase performance on mobile devices
        jbScanner.setSnapImageMaxSize(300);
        var scannerParentElement = document.getElementById("scanner");
        if(scannerParentElement)
        {
            //append the jbScanner to an existing DOM element
            jbScanner.appendTo(scannerParentElement);
        }        
    }
  </script> 

Предоставление видеопотока нестандартным способом:

<script type="text/javascript">
    function onQRCodeScanned(scannedText)
    {
        var scannedTextMemo = document.getElementById("scannedTextMemo");
        if(scannedTextMemo)
        {
            scannedTextMemo.value = scannedText;
        }
    }

    //funtion returning a promise with a video stream
    function provideVideoQQ()
    {
        return navigator.mediaDevices.enumerateDevices()
        .then(function(devices) {
            var exCameras = [];
            devices.forEach(function(device) {
            if (device.kind === 'videoinput') {
              exCameras.push(device.deviceId)
            }
         });

            return Promise.resolve(exCameras);
        }).then(function(ids){
            if(ids.length === 0)
            {
              return Promise.reject('Could not find a webcam');
            }

            return navigator.mediaDevices.getUserMedia({
                video: {
                  'optional': [{
                    'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera
                    }]
                }
            });        
        });                
    }  

    //this function will be called when JsQRScanner is ready to use
    function JsQRScannerReady()
    {
        //create a new scanner passing to it a callback function that will be invoked when
        //the scanner succesfully scan a QR code
        var jbScanner = new JsQRScanner(onQRCodeScanned, provideVideoQQ);
        //reduce the size of analyzed images to increase performance on mobile devices
        jbScanner.setSnapImageMaxSize(300);
        var scannerParentElement = document.getElementById("scanner");
        if(scannerParentElement)
        {
            //append the jbScanner to an existing DOM element
            jbScanner.appendTo(scannerParentElement);
        }        
    }
  </script> 

Если кто-нибудь может помочь мне с тем, как реализовать этот код вWordPress страница будет очень ценится.