hi everyone i am trying to make a qr code scanner running the code on my localhost but when i connect to localhost from the phone i get the error "Uncaught TypeError: Cannot read property 'getUserMedia' of undefined at HTMLInputElement.btnScanQR.onclick" can you help me?
First page is my javascript Second page is my html
const qrcodes = window.qrcodes;
const video = document.createElement("video");
const canvasElement = document.getElementById("qr-canvas");
const canvas = canvasElement.getContext("2d");
const qrResult = document.getElementById("qr-result");
const outputData = document.getElementById("outputData");
const btnScanQR = document.getElementById("btn-scan-qr");
let scanning = false;
qrcode.callback = res => {
if (res) {
outputData.innerText = res;
scanning = false;
video.srcObject.getTracks().forEach(track => {
track.stop();
});
qrResult.hidden = false;
canvasElement.hidden = true;
btnScanQR.hidden = false;
}
};
btnScanQR.onclick = () => {
navigator.mediaDevices
.getUserMedia({ video: { facingMode: "environment" } })
.then(function(stream) {
scanning = true;
qrResult.hidden = true;
btnScanQR.hidden = true;
canvasElement.hidden = false;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
video.srcObject = stream;
video.play();
tick();
scan();
});
};
function tick() {
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
scanning && requestAnimationFrame(tick);
}
function scan() {
try {
qrcode.decode();
} catch (e) {
setTimeout(scan, 300);
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Qr Code Scanner</title>
<script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js" charset="utf-8"></script>
</head>
<body>
<h1>BTC QR Code Scanner</h1>
<input type="button" id="btn-scan-qr" value="Scan">
<canvas id="qr-canvas"></canvas>
<div id="qr-result" hidden="">
<b>Result:</b> <span id="outputData"></span>
</div>
<script src="qrCodeScanner.js"></script>
</body>
</html>