This tutorial is a step by step guide on how to use the javascript QR Code scanner on a webcam video stream in browser. Some people reported experiencing problems including it in their own projets so I guess a tutorial might help others.
<html lang="en">
<head>
<script type="text/javascript" src="grid.js"></script>
<script type="text/javascript" src="version.js"></script>
<script type="text/javascript" src="detector.js"></script>
<script type="text/javascript" src="formatinf.js"></script>
<script type="text/javascript" src="errorlevel.js"></script>
<script type="text/javascript" src="bitmat.js"></script>
<script type="text/javascript" src="datablock.js"></script>
<script type="text/javascript" src="bmparser.js"></script>
<script type="text/javascript" src="datamask.js"></script>
<script type="text/javascript" src="rsdecoder.js"></script>
<script type="text/javascript" src="gf256poly.js"></script>
<script type="text/javascript" src="gf256.js"></script>
<script type="text/javascript" src="decoder.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript" src="findpat.js"></script>
<script type="text/javascript" src="alignpat.js"></script>
<script type="text/javascript" src="databr.js"></script>
</head>
<body>
[...]
</body>
</html>JSQrcode doesn't capture QRCodes from video stream directly, but from a canvas. Once there is sufficient data available from the video stream, one copies the data into the canvas and applies JSQRcode decoding method on it.
<div class="video-container">
<video id="video-preview"></video>
<canvas id="qr-canvas" class="hidden" ></canvas>
</div>Notice the canvas must have id=qr-canvas (harcoded in library).
Create a new javascript file that you insert after the ones inserted at Step 1. On page load, start the video stream.
window.onload = async function() {
try {
/* Ask for "environnement" (rear) camera if available (mobile),
* will fallback to only available otherwise (desktop).
* User will be prompted if (s)he allows camera to be started */
const stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: "environment",
},
audio: false,
});
const video = document.getElementById("video-preview");
video.srcObject = stream;
video.setAttribute("playsinline", true); /* otherwise iOS safari starts fullscreen */
video.play();
setTimeout(tick, 100); /* We launch the tick function 100ms later (see next step) */
} catch(err) {
console.log(err); /* User probably refused to grant access*/
});
};function tick() {
const video = document.getElementById('video-preview');
const qrCanvasElement = document.getElementById('qr-canvas');
const qrCanvas = qrCanvasElement.getContext('2d');
let width;
let height;
if (video.readyState === video.HAVE_ENOUGH_DATA) {
qrCanvasElement.height = video.videoHeight;
qrCanvasElement.width = video.videoWidth;
qrCanvas.drawImage(video, 0, 0, qrCanvasElement.width, qrCanvasElement.height);
try {
const result = qrcode.decode();
console.log(result)
/* Video can now be stopped */
video.pause();
video.src = '';
video.srcObject.getVideoTracks().forEach(track => track.stop());
/* Display Canvas and hide video stream */
qrCanvasElement.classList.remove('hidden');
video.classList.add('hidden');
} catch(e) {
/* No Op */
}
}
/* If no QR could be decoded from image copied in canvas */
if (!video.classList.contains('hidden'))
setTimeout(tick, 100);
}
Hi I'm trying to implement this and my html doesn't show anything on chrome, just white screen. Do I need to add anything else other than the above?
I currently have html file with the header and all the associated header files you wrote there, plus the div part in the body. as you mentioned the ids are hardcoded in the lib, so I just copy and pasted everything from step 1 and 2 as my html file.
I have downloaded and put in the same dir all the js files listed on the html head.
then I copy pasted everything from step 3 and 4 into 1 js file and named it qrdecoder.js
is there anything I'm missing?
I noticed on http://webqr.com window.onload will also trigger a permission, is there anything like that I have to add?
EDIT:
atm the console is saying
DOMException: Only secure origins are allowedand I noticed on the comment linking this post someone said we need certificate. can you please help point me in the right direction as to how to get that certificate? I'm just starting with web dev and currently using company's server. A non intrusive way to do this would be preferred.Thanks in advance!:)