JavaScript QR Code Scanner Example using jsQR｜Camera-based QR Reader Tutorial

Implementing a QR Code Reader in JavaScript【Easy Setup with jsQR】

This page provides a jsQR example showing how to build a JavaScript QR code scanner that reads QR codes from a camera stream.
Using the jsQR library, you can decode QR codes in real time on Chrome, Android, and iPhone Safari with minimal setup.

How to Scan QR Codes Using the Camera

After granting camera access, the video feed will appear shortly.
Even from a slight distance, if you bring the QR code into focus and place it within the red frame, it will be scanned smoothly.

Library and Source Code for Building a QR Code Reader in JavaScript

The jsQR library is used to read QR codes.
You can install it by following the steps below:

1. Download jsQR-master.zip from GitHub by clicking “Code” → “Download ZIP” in the upper-right corner.
2. Extract the ZIP file and upload the dist folder to your web server (other files are not required).
3. Add the following script tag to your HTML file to load the library:
   <script src="./dist/jsQR.js"></script>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jsQR.jsの読み込み -->
<script src="./dist/jsQR.js"></script>
<script>
var video,tmp,tmp_ctx,qr,prev,prev_ctx,w,h,m,x1,y1;
window.addEventListener("load",function(){
  video=document.createElement('video');
  video.setAttribute("autoplay","");
  video.setAttribute("muted","");
  video.setAttribute("playsinline","");
  video.onloadedmetadata = function(e){video.play();};
  prev=document.getElementById("preview");
  prev_ctx=prev.getContext("2d", {willReadFrequently:true});
  tmp = document.createElement('canvas');
  tmp_ctx = tmp.getContext("2d", {willReadFrequently:true});

  qr = document.getElementById("qr");
  // A permission dialog for camera access will appear
  navigator.mediaDevices.getUserMedia(
    // Microphone off, camera settings: prefer rear camera, prefer 640×480
    {"audio":false,"video":{"facingMode":"environment","width":{"ideal":640},"height":{"ideal":480}}}
  ).then( // When permission is granted
    function(stream){
      video.srcObject = stream;
      // Start scanning after 0.5 seconds
      setTimeout(Scan,500);
    }
  ).catch( // When permission is denied
    function(err){qr.innerHTML=qr.innerHTML+err+'\n';}
  );
});

function Scan(){
  // Selected width and height
  w=video.videoWidth;
  h=video.videoHeight;
  // Display size on screen
  prev.style.width=(w/2)+"px";
  prev.style.height=(h/2)+"px";
  // Internal canvas size
  prev.setAttribute("width",w);
  prev.setAttribute("height",h);
  if(w>h){m=h*0.5;}else{m=w*0.5;}
  x1=(w-m)/2;
  y1=(h-m)/2;
  prev_ctx.drawImage(video,0,0,w,h);
  prev_ctx.beginPath();
  prev_ctx.strokeStyle="rgb(255,0,0)";
  prev_ctx.lineWidth=2;
  prev_ctx.rect(x1,y1,m,m);
  prev_ctx.stroke();
  tmp.setAttribute("width",m);
  tmp.setAttribute("height",m);
  tmp_ctx.drawImage(prev,x1,y1,m,m,0,0,m,m);

  let imageData = tmp_ctx.getImageData(0,0,m,m);
  let scanResult = jsQR(imageData.data,m,m);
  if(scanResult){
    // Output the scanned QR code result
    qr.value=qr.value+scanResult.data+'\n';
    qr.scrollTop = qr.scrollHeight;
  }
  setTimeout(Scan,200);
}</script>
</head>
<body>
  <p>Bring the QR code into focus and place it inside the red frame on the camera view to scan it.</p>
  <div><canvas id="preview"></canvas></div>
  <textarea id="qr" rows="8" cols="40"></textarea>
</body>
</html>