i am trying to scan qr code using browser camera stream and use the result to fetch records from data base using ajax. i have difficulty getting scanned value outside async function.

 (async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: {
      facingMode: {
      ideal: "environment"
      }
    },
    audio: false
  });
  const videoEl = document.querySelector("#stream");
  videoEl.srcObject = stream;
  await videoEl.play();

  const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
  window.setInterval(async () => {
    const barcodes = await barcodeDetector.detect(videoEl);
    if (barcodes.length <= 0) return;
    var str = barcodes.map(barcode => barcode.rawValue);
  }, 1000)
})();






<video id="stream" style="width: 100%; height: 100%;"/>


function showUser() {
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
   document.getElementById("txtHint").innerHTML = this.responseText;
  }
 };
 xmlhttp.open("GET","family.php?q="+str,true);
 xmlhttp.send();

}