test.html

<!DOCTYPE html>
<html>
<head>
  <title>QR Code Reader</title>
  <style>
    h1 {
  text-align: center;
}

#reader {
  width: 500px;
}

.result {
  background-color: green;
  color: #fff;
  padding: 20px;
}

.row {
  display: flex;
}

#reader__scan_region {
  background: white;
}

  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js" integrity="sha512-r6rDA7W6ZeQhvl8S7yRVQUKVHdexq+GAlNkNNqVC7YyIV+NwqCTJe2hDWCiffTyRNOeGEzRRJ9ifvRm/HCzGYg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>

	<h1>QR Code Reader using Javascript</h1>

	<!-- QR SCANNER CODE BELOW  -->
	<div class="row">
	  <div class="col">
		<div id="reader"></div>
	  </div>
	  <div class="col" style="padding: 30px">
		<h4>Scan Result </h4>
		<div id="result">
		  Result goes here
		</div>
	  </div>
	
	</div>


  <script>
	// When scan is successful fucntion will produce data
function onScanSuccess(qrCodeMessage) {
  document.getElementById("result").innerHTML =
    '<span class="result">' + qrCodeMessage + "</span>";

  localStorage.setItem("roomID", qrCodeMessage)

  window.location = `./home?roomid=${qrCodeMessage}`
}

// When scan is unsuccessful fucntion will produce error message
function onScanError(errorMessage) {
  // Handle Scan Error
}

// Setting up Qr Scanner properties
var html5QrCodeScanner = new Html5QrcodeScanner("reader", {
  fps: 10,
  qrbox: 250
});

// in
html5QrCodeScanner.render(onScanSuccess, onScanError);

  </script>
</body>
</html>