Use https://scanapp.org/ For Scan Barcode

[Ario.Paxaz]

Hello 

I want to scan barcodes from the following site,https://scanapp.org/.
I downloaded the file "html5-qrcode.min.js" , placed it in the Files folder and set it in the ServerModule unit

procedure TUniServerModule.UniGUIServerModuleCreate(Sender: TObject);
begin
  UniServerModule.CustomFiles.Add('html5-qrcode.min.js');
end;

Then I placed a UnimHTMLFrame on the form and wrote the following code in the HTML property

<div id="barcode-reader" style="width:100%; height:260px;"></div>

<audio id="beep" src="files/beep.mp3"></audio>

And in the OnShow event of the form I also wrote the following code.
 

procedure TMainmForm.UnimFormShow(Sender: TObject);
begin
//UniSession.AddJS(
// 'console.log("Html5Qrcode =", typeof Html5Qrcode);'
//);

UniSession.AddJS( 
'if (window.barcodeScanner) return;' + 

'window.barcodeScanner = new Html5Qrcode("barcode-reader");' + 

'window.barcodeScanner.start(' + 
' { facingMode: { exact: "environment" } },' + 
'{' + 
'fps: 10,' + 
' qrbox: { width: 260, height: 140 },' +
// 'formatsToSupport: [' +
// 'Html5QrcodeSupportedFormats.CODE_128,' +
// 'Html5QrcodeSupportedFormats.EAN_13,' +
// 'Html5QrcodeSupportedFormats.EAN_8,' +
// 'Html5QrcodeSupportedFormats.UPC_A' +
// ']' + 
' },' + 

' function(text) {' + 
' document.getElementById("beep").play();' +
' ajaxRequest(null, "barcode", ["code=" + text]);' +
' window.barcodeScanner.stop();' +
' window.barcodeScanner = null;' +
' },' +
' function(err) {}' +
');'
);

end;

and in UnimFormAjaxEvent and in the event I wrote the following code

procedure TMainmForm.UnimFormAjaxEvent(Sender: TComponent; EventName: string;
Params: TUniStrings);
begin
if EventName = 'barcode' then
ShowMessage('BarCode': ' + Params.Values['code']);
end;

But I didn't get the result.

 

Regards.

AppScanTestCase.rar

html5-qrcode.min.js

[Sherzod]

1 minute ago, Ario.Paxaz said:

UniServerModule.CustomFiles.Add('html5-qrcode.min.js');

Hello,

Then it would be correct to also specify the "files" path:

UniServerModule.CustomFiles.Add('files/html5-qrcode.min.js');

 

[Ario.Paxaz]

7 minutes ago, Sherzod said:

correct to also specify the "files"

I did it, but when I run it, it gives the following error:

[Sherzod]

You may also find this post useful:

 

[Ario.Paxaz]

On 1/28/2026 at 1:20 PM, Sherzod said:

this post useful:

I tried to scan, similar to the same link.

I also did the following code similar to Zxing.

But after running it goes into loading mode.

 

procedure TMainmForm.btnInitClick(Sender: TObject);
begin
  UniSession.AddJS(
    'try {' +
    '  console.log("شروع initScanner در UniHTMLFrame");' +

    '  var html5QrCode = null;' +
    '  var oldResultText = "";' +

    '  function initScanner() {' +
    '    console.log("initScanner فراخوانی شد");' +
    '    if (typeof Html5Qrcode === "undefined") {' +
    '      console.error("Html5Qrcode تعریف نشده - کتابخانه لود نشده");' +
    '      alert("کتابخانه html5-qrcode لود نشد");' +
    '      return;' +
    '    }' +

    '    html5QrCode = new Html5Qrcode("reader");' +
    '    console.log("Html5Qrcode ساخته شد");' +

    '    Html5Qrcode.getCameras().then(function(cameras) {' +
    '      console.log("لیست دوربین‌ها دریافت شد", cameras);' +
    '      var sourceSelect = document.getElementById("sourceSelect");' +
    '      if (sourceSelect) {' +
    '        sourceSelect.innerHTML = "";' +
    '        if (cameras.length > 0) {' +
    '          cameras.forEach(function(camera, idx) {' +
    '            var opt = document.createElement("option");' +
    '            opt.value = camera.id;' +
    '            opt.text = camera.label || "دوربین " + (idx + 1);' +
    '            sourceSelect.appendChild(opt);' +
    '          });' +
    '          sourceSelect.value = cameras[0].id;' +  // پیش‌فرض اول (معمولاً عقب)
    '          document.getElementById("sourceSelectPanel").style.display = "block";' +
    '        } else {' +
    '          console.warn("هیچ دوربینی پیدا نشد");' +
    '        }' +
    '      }' +
    '    }).catch(function(err) {' +
    '      console.error("خطا در getCameras:", err);' +
    '      alert("مشکل دوربین: " + err.message);' +
    '    });' +

    '    // دکمه Start' +
    '    var startBtn = document.getElementById("' + btnStart.JSId + '");' +
    '    if (startBtn) {' +
    '      startBtn.addEventListener("click", function() {' +
    '        console.log("دکمه Start کلیک شد");' +
    '        var devId = document.getElementById("sourceSelect").value;' +
    '        if (!devId) { alert("دوربین انتخاب نشده"); return; }' +

    '        var cfg = { fps: 12, qrbox: {width: 320, height: 180}, rememberLastUsedCamera: true };' +

    '        html5QrCode.start(devId, cfg,' +
    '          function(txt, res) {' +
    '            if (txt && txt !== oldResultText) {' +
    '              console.log("اسکن موفق:", txt);' +
    '              window.ajaxRequest(' + UnimHTMLFrame1.JSName + ', "getResult", ["result=" + encodeURIComponent(txt)]);' +
    '              oldResultText = txt;' +
    '              document.getElementById("result").innerText = "اسکن: " + txt;' +
    '            }' +
    '          },' +
    '          function(errMsg) { /* console.log("اسکن موقتی:", errMsg); */ }' +
    '        ).catch(function(e) {' +
    '          console.error("خطا start:", e);' +
    '          alert("خطا باز کردن دوربین: " + e);' +
    '        });' +
    '      });' +
    '    }' +

    '    // دکمه Reset' +
    '    var resetBtn = document.getElementById("' + btnReset.JSId + '");' +
    '    if (resetBtn) {' +
    '      resetBtn.addEventListener("click", function() {' +
    '        console.log("دکمه Reset کلیک شد");' +
    '        if (html5QrCode) {' +
    '          html5QrCode.stop().then(function() {' +
    '            oldResultText = "";' +
    '            document.getElementById("result").innerText = "";' +
    '          }).catch(function(e) { console.error(e); });' +
    '        }' +
    '        ajaxRequest(' + UnimHTMLFrame1.JSName + ', "getResult", ["result="]);' +
    '      });' +
    '    }' +
    '  }' +

    '  // منتظر DOM' +
    '  if (document.readyState === "complete" || document.readyState === "interactive") {' +
    '    setTimeout(initScanner, 800);' +
  //  '    initscanner();' +
    '  } else {' +
    '    document.addEventListener("DOMContentLoaded", function() { setTimeout(initScanner, 800); });' +
    '  }' +

    '} catch(e) {' +
    '  console.error("خطای کلی در init:", e);' +
    '  alert("خطا در راه‌اندازی اسکنر: " + e.message);' +
    '}'
  );
end;

 

Regards.

TestCase_html5qrcode.rar