Simple QR Code and Bar code scanning library for the web

Use this lightweight library to easily / quickly integrate QR code, bar code, and other common code scanning capabilities to your web application.

Key highlights

• 🔲 Support scanning different types of bar codes and QR codes.

• 🖥 Supports different platforms be it Android, IOS, MacOs, Windows or Linux

• 🌐 Supports different browsers like Chrome, Firefox, Safari, Edge, Opera ...

• 📷 Supports scanning with camera(front/back) as well as local files

Supported platforms

If you find a platform or a browser where the library is not working, please feel free to file an issue. Check the demo link to test it out.

Legends

• Means full support — inline webcam and file based
• Means partial support — only file based, webcam in progress

PC / Mac

Firefox	Chrome	Safari	Opera	Edge

Android

Chrome	Firefox	Edge	Opera	Opera Mini	UC

IOS

Safari	Chrome	Firefox	Edge
	*	*

Supported Code formats

Code	Supported
QR Code
AZTEC
CODE_39
CODE_93
CODE_128
ITF
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
DATA_MATRIX
MAXICODE*
RSS_14*
RSS_EXPANDED*

Description - View demo

Supports:

• Querying camera on the device (with user permissions)
• Rendering live camera feed, with easy to use user interface for scanning
• Supports scanning a different kind of QR codes, bar codes and other formats
• Supports selecting image files from the device for scanning codes

How to use

Add an element you want to use as a placeholder for QR Code scanner

<div id="reader" width="600px"></div>

Ideally do not set the height of this container as the height should depend on the height of the video feed from the camera. The library would honor the existing width, otherwise apply the default width. The height is derived from the aspect ratio of the video feed.

Add this script to your project body

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.2.0/html5-qrcode.min.js"></script>

Add this last script to your project for get data

 // When scan is successful fucntion will produce data
 function onScanSuccess(qrCodeMessage) {
    document.getElementById("result").innerHTML =
      '<span class="result">' + qrCodeMessage + "</span>";
  }
  
  // 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);

This repository is based on the html5-qrcode repository. Created for personal use and for those looking for a short way to use QR Code Reader.