jsqr vs @zxing/library vs html5-qrcode vs qrcode-reader vs qr-scanner
JavaScript QR Code Libraries Comparison
Search packages..
1 Year
jsqr@zxing/libraryhtml5-qrcodeqrcode-readerqr-scannerSimilar Packages:
What's JavaScript QR Code Libraries?

These libraries provide functionality for reading and generating QR codes in web applications. They utilize various techniques to decode QR codes from images or camera streams, enabling developers to integrate QR code scanning capabilities into their applications. Each library has its unique features, performance characteristics, and use cases, making them suitable for different scenarios in web development.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
jsqr327,1903,803-964 years agoApache-2.0
@zxing/library284,6322,6049.46 MB1706 months agoMIT
html5-qrcode117,3635,3102.63 MB3852 years agoApache-2.0
qrcode-reader69,873279-177 years agoApache-2.0
qr-scanner66,4662,614524 kB113-MIT
Feature Comparison: jsqr vs @zxing/library vs html5-qrcode vs qrcode-reader vs qr-scanner

Performance

  • jsqr:

    jsqr is lightweight and fast, designed specifically for decoding QR codes from image data. Its performance is excellent for static images, but it may not be as optimized for real-time camera scanning compared to other libraries.

  • @zxing/library:

    @zxing/library is known for its high performance and accuracy in decoding QR codes. It employs advanced algorithms that allow for quick processing, making it suitable for applications that require real-time scanning capabilities.

  • html5-qrcode:

    html5-qrcode is optimized for speed and efficiency, particularly in mobile environments. It leverages the device's camera for instant scanning, providing a seamless user experience without noticeable lag.

  • qrcode-reader:

    qrcode-reader offers decent performance for basic QR code decoding tasks. While it may not match the speed of more specialized libraries, it is sufficient for simple applications that do not require real-time processing.

  • qr-scanner:

    qr-scanner is built with performance in mind, utilizing WebAssembly for faster processing. It excels in mobile scenarios, providing quick scanning even in low-light conditions, making it ideal for on-the-go applications.

Ease of Use

  • jsqr:

    jsqr is straightforward to use, focusing on decoding images rather than camera integration. Developers can easily implement it in applications that require image processing without complex configurations.

  • @zxing/library:

    @zxing/library has a steeper learning curve due to its comprehensive feature set and configuration options. However, once set up, it provides extensive capabilities for QR code processing.

  • html5-qrcode:

    html5-qrcode is very user-friendly, with a simple API that allows developers to quickly implement QR code scanning with minimal setup. It is ideal for beginners or projects that need rapid deployment.

  • qrcode-reader:

    qrcode-reader is easy to integrate and use, with a minimalistic API. It is suitable for projects that need basic QR code functionality without extensive features.

  • qr-scanner:

    qr-scanner is designed for ease of use, providing a simple interface for both camera and image scanning. Its documentation is clear, making it accessible for developers of all skill levels.

Camera Support

  • jsqr:

    jsqr does not include camera support; it focuses on decoding QR codes from image data. Developers need to handle camera integration separately if required.

  • @zxing/library:

    @zxing/library does not provide built-in camera support, requiring additional implementation for capturing images from the camera. This may add complexity to the integration process.

  • html5-qrcode:

    html5-qrcode excels in camera support, allowing developers to access the device camera seamlessly. It provides real-time scanning capabilities directly from the camera feed, enhancing user experience.

  • qrcode-reader:

    qrcode-reader does not support camera functionality natively, focusing instead on decoding from static images. Additional work is needed to integrate camera capabilities.

  • qr-scanner:

    qr-scanner offers robust camera support, enabling real-time scanning from the camera feed. It is optimized for mobile devices, making it a great choice for applications that rely on camera input.

Supported Formats

  • jsqr:

    jsqr is specifically designed for QR code decoding, offering high performance and accuracy for this format. It does not support other barcode types, making it a focused solution.

  • @zxing/library:

    @zxing/library supports a wide range of barcode formats beyond just QR codes, making it a versatile choice for applications that may need to handle different types of barcodes.

  • html5-qrcode:

    html5-qrcode primarily focuses on QR codes, providing excellent support for this format. It is specialized for QR code scanning, ensuring high accuracy and performance.

  • qrcode-reader:

    qrcode-reader is focused on QR codes as well, providing basic functionality for decoding this specific format without additional support for other types.

  • qr-scanner:

    qr-scanner is dedicated to QR code scanning and does not support other formats. It is optimized for QR codes, ensuring quick and reliable decoding.

Community and Support

  • jsqr:

    jsqr has a smaller community but is well-documented, allowing developers to understand its usage quickly. It is suitable for projects that require straightforward QR code decoding.

  • @zxing/library:

    @zxing/library has a large community and extensive documentation, providing ample resources for troubleshooting and support. It is widely used in various applications, ensuring a wealth of shared knowledge.

  • html5-qrcode:

    html5-qrcode has a growing community with good documentation, making it easy for developers to find help and examples. Its simplicity contributes to its popularity among new developers.

  • qrcode-reader:

    qrcode-reader has limited community support compared to others, but it is straightforward enough that most developers can implement it without extensive assistance.

  • qr-scanner:

    qr-scanner has a supportive community and decent documentation, helping developers implement the library effectively. Its focus on performance has garnered attention in mobile development circles.

How to Choose: jsqr vs @zxing/library vs html5-qrcode vs qrcode-reader vs qr-scanner
  • jsqr:

    Opt for jsqr if you need a lightweight library focused on QR code decoding from image data. It is particularly useful for applications that require quick processing of static images or canvas elements without additional dependencies.

  • @zxing/library:

    Choose @zxing/library if you need a comprehensive and robust solution for QR code scanning that supports multiple formats and is well-tested across various platforms. It is ideal for applications requiring high accuracy and performance.

  • html5-qrcode:

    Select html5-qrcode for a straightforward implementation that allows for easy integration of QR code scanning directly from the camera. It is user-friendly and suitable for projects that prioritize quick setup and ease of use.

  • qrcode-reader:

    Choose qrcode-reader for a simple and effective solution for decoding QR codes from images. It is best for projects that require basic functionality without the need for extensive features or camera integration.

  • qr-scanner:

    Use qr-scanner if you want a library that offers both camera and image scanning capabilities with a focus on performance. It is designed for mobile-first applications and provides a responsive experience for users.

Similar Npm Packages to jsqr

jsqr is a JavaScript library designed for decoding QR codes from images or video streams. It is lightweight and efficient, making it suitable for web applications that require QR code scanning capabilities. With jsqr, developers can easily integrate QR code scanning functionality into their projects, allowing users to quickly read and process QR codes using their device's camera or uploaded images.

While jsqr is a solid choice for QR code scanning, there are several alternatives available that offer similar functionalities. Here are a few notable options:

  • html5-qrcode is a comprehensive library that provides a simple interface for scanning QR codes using the device's camera. It supports both desktop and mobile browsers and is designed to work seamlessly with HTML5. With features like real-time scanning and customizable UI elements, html5-qrcode is an excellent choice for developers looking to implement QR code scanning in their web applications without much hassle.

  • qr-scanner is another lightweight library focused on QR code scanning. It utilizes the device's camera to scan QR codes in real-time and is optimized for performance. qr-scanner is easy to set up and use, making it a great option for developers who want a straightforward solution for QR code scanning without additional dependencies.

  • qrcode-reader is a library that allows for reading QR codes from images. It is built on top of the popular jsQR library and provides a simple API for decoding QR codes from image files. If your application requires reading QR codes from static images rather than real-time scanning, qrcode-reader is a suitable alternative.

For a comprehensive comparison of these packages, check out the following link: Comparing html5-qrcode vs jsqr vs qr-scanner vs qrcode-reader.

Similar Npm Packages to @zxing/library

@zxing/library is a popular library for decoding barcodes and QR codes in web applications. It is a JavaScript port of the ZXing (Zebra Crossing) library, which is widely used for barcode processing. The library provides robust functionality for reading various barcode formats, making it a reliable choice for developers looking to integrate barcode scanning capabilities into their applications. While @zxing/library is a powerful option, there are several alternatives available that also offer barcode and QR code scanning features. Here are a few notable alternatives:

  • html5-qrcode is a library that enables QR code scanning using the device's camera in web applications. It is designed to be easy to use and integrates seamlessly with HTML5. This library supports both video and image scanning, making it versatile for different use cases. If you need a straightforward solution for QR code scanning that works directly in the browser without complex setup, html5-qrcode is an excellent choice.

  • jsqr is a lightweight QR code scanning library that focuses on performance and simplicity. It uses the HTML5 canvas element to decode QR codes from images or video streams. jsqr is particularly useful for applications that require fast and efficient QR code scanning without the overhead of larger libraries. If you are looking for a minimalistic approach to QR code scanning, jsqr is a solid option.

  • qr-scanner is another library designed for QR code scanning in web applications. It utilizes the device's camera and provides real-time scanning capabilities. qr-scanner is built for performance and ease of use, making it suitable for applications that require quick and reliable QR code detection. Its lightweight nature ensures that it can be easily integrated into various projects.

  • qrcode-reader is a library that focuses on reading QR codes from images. It is a simple and effective solution for applications that need to decode QR codes from static images rather than real-time camera input. If your use case involves processing images with QR codes, qrcode-reader is a straightforward option.

To explore how these libraries compare, check out the following link: Comparing @zxing/library vs html5-qrcode vs jsqr vs qr-scanner vs qrcode-reader.

Similar Npm Packages to html5-qrcode

html5-qrcode is a powerful library that enables developers to easily integrate QR code scanning capabilities into their web applications. Utilizing the capabilities of modern web browsers, html5-qrcode allows for real-time scanning of QR codes using the device's camera. This library is particularly useful for applications that require quick and efficient QR code recognition, such as payment systems, event check-ins, and product information retrieval.

While html5-qrcode offers robust features for QR code scanning, there are alternative libraries that also provide QR code scanning functionalities. Here are a couple of notable alternatives:

  • qr-scanner is a lightweight and easy-to-use library for scanning QR codes in web applications. It focuses on performance and simplicity, making it a great choice for developers who want to quickly implement QR code scanning without the overhead of more complex libraries. qr-scanner uses the HTML5 video element to access the camera and process frames for QR code detection, ensuring a smooth user experience. It is particularly well-suited for applications that require fast and efficient QR code scanning with minimal setup.

  • qrious is a versatile library that provides both QR code generation and scanning capabilities. It allows developers to create QR codes in various formats and sizes, making it a great option for applications that need to display QR codes as well as read them. qrious is easy to integrate and offers a straightforward API, making it accessible for developers of all skill levels. If your application requires both generating and scanning QR codes, qrious could be the ideal choice.

To see how html5-qrcode compares with qr-scanner and qrious, check out the comparison: Comparing html5-qrcode vs qr-scanner vs qrious.

Similar Npm Packages to qrcode-reader

qrcode-reader is a JavaScript library that enables developers to easily read QR codes from images or video streams. It provides a simple API for integrating QR code scanning functionality into web applications, making it a popular choice for projects that require QR code recognition. While qrcode-reader is a solid option, there are several alternatives available in the ecosystem that also offer QR code scanning capabilities. Here are a few notable alternatives:

  • html5-qrcode is a powerful library that allows developers to implement QR code scanning using the HTML5 getUserMedia API. It can access the device camera to scan QR codes in real-time, making it ideal for applications that require immediate feedback. With its robust features and support for various QR code formats, html5-qrcode is a great choice for projects that need real-time scanning capabilities.
  • qr-scanner is another library designed for fast and efficient QR code scanning. It uses WebAssembly to decode QR codes quickly and accurately, providing a smooth user experience. qr-scanner is lightweight and easy to integrate, making it suitable for applications that prioritize performance and simplicity. If speed and efficiency are critical for your QR code scanning needs, qr-scanner is worth considering.
  • qrious is a versatile library that not only allows for QR code generation but also provides basic QR code scanning capabilities. While it may not be as feature-rich as some of the other libraries, qrious is easy to use and can be a good option for projects that require both QR code generation and scanning in a single package. If you are looking for a simple solution that covers both aspects, qrious might be the right fit.

To see how qrcode-reader compares with html5-qrcode, qr-scanner, and qrious, check out the comparison: Comparing html5-qrcode vs qr-scanner vs qrcode-reader vs qrious.

Similar Npm Packages to qr-scanner

qr-scanner is a lightweight JavaScript library designed for scanning QR codes using a webcam or mobile device camera. It provides an easy-to-use interface for developers to integrate QR code scanning capabilities into their web applications. With its efficient performance and straightforward API, qr-scanner is a popular choice for applications that require real-time QR code scanning.

However, there are several alternatives in the QR code scanning ecosystem that offer different features and functionalities. Here are a few notable options:

  • html5-qrcode is a powerful library that allows developers to add QR code scanning capabilities to their web applications using the HTML5 video element. It supports both front-end and back-end QR code scanning and provides a simple API for integration. html5-qrcode is particularly useful for applications that need to scan QR codes from both camera feeds and image files, making it a versatile choice for developers.
  • jsqr is a pure JavaScript QR code scanning library that focuses on decoding QR codes from images or video frames. It is lightweight and efficient, making it suitable for performance-sensitive applications. jsqr is a good choice if you need a minimalistic library that can decode QR codes quickly without additional overhead.
  • qr-code-styling is a library that allows developers to create visually appealing QR codes with customizable styles. While it does not focus on scanning, it complements QR code functionality by enabling the creation of branded and styled QR codes that can enhance user engagement. If your application requires both scanning and generating QR codes, combining qr-code-styling with a scanning library can provide a complete solution.
  • qrcode-reader is a simple QR code reader library that can decode QR codes from images. It is easy to use and integrates well with existing applications. qrcode-reader is suitable for projects that need a straightforward solution for reading QR codes without the need for camera integration.
  • qrious is a library focused on generating QR codes. It provides a simple API for creating QR codes in various formats and sizes. While it does not provide scanning capabilities, it can be used alongside scanning libraries to create a complete QR code solution.

For a comprehensive comparison of these libraries, check out the following link: Comparing html5-qrcode vs jsqr vs qr-code-styling vs qr-scanner vs qrcode-reader vs qrious.

README for jsqr

jsQR

Build Status

A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.

Demo

Installation

NPM

Available on npm. Can be used in a Node.js program or with a module bundler such as Webpack or Browserify.

npm install jsqr --save

// ES6 import
import jsQR from "jsqr";

// CommonJS require
const jsQR = require("jsqr");

jsQR(...);

Browser

Alternatively for frontend use jsQR.js can be included with a script tag

<script src="jsQR.js"></script>
<script>
  jsQR(...);
</script>

A note on webcams

jsQR is designed to be a completely standalone library for scanning QR codes. By design it does not include any platform specific code. This allows it to just as easily scan a frontend webcam stream, a user uploaded image, or be used as part of a backend Node.js process.

If you want to use jsQR to scan a webcam stream you'll need to extract the ImageData from the video stream. This can then be passed to jsQR. The jsQR demo contains a barebones implementation of webcam scanning that can be used as a starting point and customized for your needs. For more advanced questions you can refer to the getUserMedia docs or the fairly comprehensive webRTC sample code, both of which are great resources for consuming a webcam stream.

Usage

jsQR exports a method that takes in 3 arguments representing the image data you wish to decode. Additionally can take an options object to further configure scanning behavior.

const code = jsQR(imageData, width, height, options?);

if (code) {
  console.log("Found QR code", code);
}

Arguments

  • imageData - An Uint8ClampedArray of RGBA pixel values in the form [r0, g0, b0, a0, r1, g1, b1, a1, ...]. As such the length of this array should be 4 * width * height. This data is in the same form as the ImageData interface, and it's also commonly returned by node modules for reading images.
  • width - The width of the image you wish to decode.
  • height - The height of the image you wish to decode.
  • options (optional) - Additional options.
    • inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst) - Should jsQR attempt to invert the image to find QR codes with white modules on black backgrounds instead of the black modules on white background. This option defaults to attemptBoth for backwards compatibility but causes a ~50% performance hit, and will probably be default to dontInvert in future versions.

Return value

If a QR is able to be decoded the library will return an object with the following keys.

  • binaryData - Uint8ClampedArray - The raw bytes of the QR code.
  • data - The string version of the QR code data.
  • chunks - The QR chunks.
  • version - The QR version.
  • location - An object with keys describing key points of the QR code. Each key is a point of the form {x: number, y: number}. Has points for the following locations.
    • Corners - topRightCorner/topLeftCorner/bottomRightCorner/bottomLeftCorner;
    • Finder patterns - topRightFinderPattern/topLeftFinderPattern/bottomLeftFinderPattern
    • May also have a point for the bottomRightAlignmentPattern assuming one exists and can be located.

Because the library is written in typescript you can also view the type definitions to understand the API.

Contributing

jsQR is written using typescript. You can view the development source in the src directory.

Tests can be run with

npm test

Besides unit tests the test suite contains several hundred images that can be found in the /tests/end-to-end/ folder.

Not all the images can be read. In general changes should hope to increase the number of images that read. However due to the nature of computer vision some changes may cause images that pass to start to fail and visa versa. To update the expected outcomes run npm run-script generate-test-data. These outcomes can be evaluated in the context of a PR to determine if a change improves or harms the overall ability of the library to read QR codes. A summary of which are passing and failing can be found at /tests/end-to-end/report.json

After testing any changes, you can compile the production version by running

npm run-script build

Pull requests are welcome! Please create seperate branches for seperate features/patches.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.