Free Guide: How to Build a QR Code Reader in JavaScript (Web Camera Supported)

Japanese

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

This guide explains how to use the jsQR library in JavaScript to scan QR codes in real time from a camera stream.
It works smoothly on major browsers such as Chrome, Android Chrome, and iPhone Safari, and can be implemented with minimal effort.

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.

Mirror display (left–right)

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:

Download jsQR-master.zip from GitHub by clicking “Code” → “Download ZIP” in the upper-right corner.
Extract the ZIP file and upload the dist folder to your web server (other files are not required).
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>