Progressive Web App (PWA) QR Code Scanner

Question

I want to use a QR Code Scanner within my Progressive Web Application (also PWA).

Usage: Imagine there is a shop with lots of QR Code for its goods and products. Whenever a user scan the QR Code, I want to add the good to the shopper cart.

Question: Is there any component to implement it? How?

Answer 1

I think these projects can help you :

• qr-code-scanner

Url : https://github.com/code-kotis/qr-code-scanner

Supported Browser : Google Chrome, Firefox, Opera (Both Desktop & Mobile), Microsoft Edge ((Insider Preview build)) and now supports iOS as well

• pwa-qr-code-scanner

Url : https://github.com/Minishlink/pwa-qr-code-scanner

Supported Browser : Google Chrome, Firefox, Microsoft Edge

Answer 2

I found the zxing-js ( Zebra Crossing Library ) really really useful and very flexible, even more than their ngx-scanner

Here you find the library with lots of examples

https://github.com/zxing-js/library

Answer 3

This one is not laggy and it's open-source.

https://github.com/jbialobr/JsQRScanner

Answer 4

I just created a simple PWA project using Dynamsoft JavaScript barcode SDK. If you don't mind it's a commercial SDK, you can try it out: https://github.com/dynamsoft-dbr/javascript-barcode/tree/6.x/examples/pwa .

Here are my screenshots:

Mobile

Desktop

Alternatively, you can use the open source project ZXing. I've submitted some examples to GitHub: https://github.com/yushulx/zxing-cpp-emscripten . It's pretty easy to integrate zxing.js into your PWA project for scanning QR code.