This library is built to provide a solution scanner QR code. This library takes in raw images and will locate, extract and parse any QR code found within.
This library is built to provide a solution scanner QR code.
This library takes in raw images and will locate, extract and parse any QR code found within.
This demo Github, Stackblitz.
Supported Barcode Types
QR Code
Code-39
Code-93
Code-128
Codabar
Databar/Expanded
EAN/GTIN-5/8/13
ISBN-10/13
ISBN-13+2
ISBN-13+5
ITF (Interleaved 2 of 5)
UPC-A/E.
Installation
Install ngx-scanner-qrcode from npm:
npm install ngx-scanner-qrcode@<version> --save
Add wanted package to NgModule imports:
import{NgxScannerQrcodeModule,LOAD_WASM}from'ngx-scanner-qrcode';// Necessary to solve the problem of losing internet connectionLOAD_WASM().subscribe();
@NgModule({imports: [NgxScannerQrcodeModule]})
angular.json
{
"architect": {
"build": {
"options": {
"assets": [
/* Necessary to solve the problem of losing internet connection */
{
"glob": "**/*",
"input": "node_modules/ngx-scanner-qrcode/wasm/",
"output": "./assets/wasm/"
}
]
}
}
}
}
In the Component:
<!-- For camera --><ngx-scanner-qrcode#action="scanner"></ngx-scanner-qrcode><!-- data --><span>{{ action.data.value | json }}</span><!-- value --><span>{{ action.data | async | json }}</span><!-- async --><!-- Loading --><p*ngIf="action.isLoading">โ Loading...</p><!-- start --><button(click)="action.isStart ? action.stop() : action.start()">{{action.isStart ? 'Stop' : 'Start'}}</button>
Image src
<!-- For image src --><ngx-scanner-qrcode#action="scanner" [src]="'https://domain.com/test.png'"></ngx-scanner-qrcode><span>{{ action.data.value | json }}</span><!-- value --><span>{{ action.data | async | json }}</span><!-- async -->
enumScannerQRCodeSymbolType{ScannerQRCode_NONE=0,/**< no symbol decoded */ScannerQRCode_PARTIAL=1,/**< intermediate status */ScannerQRCode_EAN2=2,/**< GS1 2-digit add-on */ScannerQRCode_EAN5=5,/**< GS1 5-digit add-on */ScannerQRCode_EAN8=8,/**< EAN-8 */ScannerQRCode_UPCE=9,/**< UPC-E */ScannerQRCode_ISBN10=10,/**< ISBN-10 (from EAN-13). @since 0.4 */ScannerQRCode_UPCA=12,/**< UPC-A */ScannerQRCode_EAN13=13,/**< EAN-13 */ScannerQRCode_ISBN13=14,/**< ISBN-13 (from EAN-13). @since 0.4 */ScannerQRCode_COMPOSITE=15,/**< EAN/UPC composite */ScannerQRCode_I25=25,/**< Interleaved 2 of 5. @since 0.4 */ScannerQRCode_DATABAR=34,/**< GS1 DataBar (RSS). @since 0.11 */ScannerQRCode_DATABAR_EXP=35,/**< GS1 DataBar Expanded. @since 0.11 */ScannerQRCode_CODABAR=38,/**< Codabar. @since 0.11 */ScannerQRCode_CODE39=39,/**< Code 39. @since 0.4 */ScannerQRCode_PDF417=57,/**< PDF417. @since 0.6 */ScannerQRCode_QRCODE=64,/**< QR Code. @since 0.10 */ScannerQRCode_SQCODE=80,/**< SQ Code. @since 0.20.1 */ScannerQRCode_CODE93=93,/**< Code 93. @since 0.11 */ScannerQRCode_CODE128=128,/**< Code 128 *//* * Please see _ScannerQRCode_get_symbol_hash() if adding * anything after 128 *//** mask for base symbol type. * @deprecated in 0.11, remove this from existing code */ScannerQRCode_SYMBOL=0x00ff,/** 2-digit add-on flag. * @deprecated in 0.11, a ::ScannerQRCode_EAN2 component is used for * 2-digit GS1 add-ons */ScannerQRCode_ADDON2=0x0200,/** 5-digit add-on flag. * @deprecated in 0.11, a ::ScannerQRCode_EAN5 component is used for * 5-digit GS1 add-ons */ScannerQRCode_ADDON5=0x0500,/** add-on flag mask. * @deprecated in 0.11, GS1 add-ons are represented using composite * symbols of type ::ScannerQRCode_COMPOSITE; add-on components use ::ScannerQRCode_EAN2 * or ::ScannerQRCode_EAN5 */ScannerQRCode_ADDON=0x0700,}interfaceScannerQRCodePoint{x: number;y: number;}enumScannerQRCodeOrientation{ScannerQRCode_ORIENT_UNKNOWN=-1,/**< unable to determine orientation */ScannerQRCode_ORIENT_UP,/**< upright, read left to right */ScannerQRCode_ORIENT_RIGHT,/**< sideways, read top to bottom */ScannerQRCode_ORIENT_DOWN,/**< upside-down, read right to left */ScannerQRCode_ORIENT_LEFT,/**< sideways, read bottom to top */}
In my application I use this plugin for QR scanning process. In content security policy I use script-src 'unsafe-eval' then only this plugin work. otherwise its not working. Client said need to remove that. Any solution for this issue!
I wanted to share a heads-up regarding a camera issue I encountered on localhost. It turns out the camera wasn't functioning as expected, possibly due to certain browsers hesitating to grant camera access on localhost without a valid SSL certificate.
For those who might encounter this
Run your Angular development server using
ng serve --ssl true
Additionally, remember to include the --watch flag if needed.
Perhaps, it could be a helpful addition to the documentation as well.
This is related to #15 . Works on mobile, but on laptop it never prompts for camera permission.
If you follow the example given, nothing happens after pressing the "Start" button, no errors get printed on the console, so it just looked like nothing was happening...
Here's an "easy fix", get the camera permissions manually, this will activate your webcam, so I just immediately stop the stream.
Once I get the permission, and I go click on "Start", it works.
exportclassQrScanViewComponentimplementsOnInit{constructor(){}ngOnInit(): void{navigator.mediaDevices.getUserMedia({video: true,audio: false}).then(stream=>{stream.getTracks().forEach(track=>track.stop());}).catch(err=>{console.error('Error on get user media:',err);});}}
Or you could just start the scanner immediately after you successfully got the permissions:
exportclassQrScanViewComponentimplementsOnInit,AfterViewInit{
@ViewChild(NgxScannerQrcodeComponent)scanner!: NgxScannerQrcodeComponent;constructor(){}ngOnInit(): void{}ngAfterViewInit(): void{navigator.mediaDevices.getUserMedia({video: true,audio: false}).then(stream=>{// Since we're starting the scanner, we might not need to stop the streams... dunno "\o/"// stream.getTracks().forEach(track => track.stop());this.scanner.start();}).catch(err=>{console.error('Error on get user media:',err);});}}
If we start the scanner immediately though, I'm not quite sure we'll need to stop the streams before we start again, commenting out that line seems to work fine (and faster, as it doesn't need to stop/start again), just not sure if there's any issues doing that. From my quick test so far, it works ok. Stopping the scanner also stops the camera.
Hi the qr scanner is really wonderful and its working great. But I have one small issue in Samsung galaxy tab s8. For this device it doesn't open the back camera as default. It shows two front camera I attached the screenshot for your reference can you pls try to resolve this issue asap. Once again thankyou for your help.
Hi, could someone provide me information about changing the components with CSS ? I use 1.5.8 version of the app in angular. I've implemented it but I couldn't change anything. Thank you for your time and effort.
I'm experiencing an issue when using this on iPhone 14 + 15 (iOS 17.5.1). The camera is working well, and I'm able to switch between the cameras, but it is very difficult for the component to detect the barcodes. It works very well on Android.
I'm using it to scan CODE-128 barcodes.
I have tested on iPhone SE, iPhone 12, iPhone 13 and it works well here.
I don't know if there is some other firmware for the cameras on newer iPhones, or whether it is this library not optimized for it.
I'm using Angular 18.0.2 and "ngx-scanner-qrcode": "^1.6.9",
Hello,
I work with Angular v17. In MacOs Chrome+Safari everything is fine. In iOs Safari there is an error message "TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')". Do I have to go back to Angular 16+?
The scanner configuration is set up as follows, but the scanner does not trigger the event when the constraints are commented out:
scannerConfig: ScannerQRCodeConfig={// TODO: This has to be uncommented to keep the scanner working// constraints: {// video: {// width: {// ideal: 100// },// height: {// ideal: 100// }// }// }};
Event Subscription:
Here's how I'm subscribing to the scanner events:
ngOnInit(): void{navigator.mediaDevices?.getUserMedia({video: true,audio: false}).then((stream: MediaStream)=>{this.scanner.start();this.scanner?.event.subscribe((result: ScannerQRCodeResult[])=>{// TODO: Redirect to the page with the scanned QR codeconsole.log('Scanned QR code:',result);this.scanner?.stop();})}).catch((err)=>{console.error('Error on get user media:',err);});}
Expected Behavior:
The scanner should trigger the event and log the scanned QR code, regardless of whether the video constraints are specified in the configuration.
Actual Behavior:
The event does not trigger unless the video constraints in the configuration are uncommented.
Steps to Reproduce:
Comment out the constraints block in the scannerConfig.
Scan a QR code.
Observe that no events are triggered.
Additional Information:
It seems like the scanner configuration requires explicit video constraints to function. However, I need flexibility in handling different devices and conditions where predefined constraints might not be ideal.
Potential Solutions or Suggestions:
Is there a way to set default constraints that are more adaptive to different devices?
Could this issue be related to browser permissions or media device compatibility?
I use your library to activate video scanning from a device and it's active until it scans the QR code, and it works great, thanks!
But...
I require scanning of inverted QR codes (white code on black background), and I've been trying all kinds of hacks to get it to work, but apparently it only registers black code on white background.
I have been trying to invert the input video, but to no avail.
I tried it on the web and it worked perfectly, but I encountered a problem when implementing it on Ionic Angular. It seems like the camera is stuck and doesn't want to read QR codes or barcodes. Can you help me?
The code in npmjs and the code in this repository is not the same. See code (beta) feature in npmjs.
So where is the actual code and the corresponding web assembly that scans the QR code? It is not in this repo. This repo only has a demo app, which then basically references 'itself', ie. the actual binary repo in npmjs. Where is the REAL repo with the ACTUAL code? I would like to be able to contribute, but this way I have no idea what code i am using.
Is there any way to use the default back camera of any ios and android devices? The device index seems to vary for every mobile devices and also depends on how may back cameras are there.
I am using the library in angular 16.1.0 but when developing locally there is no problem with the permissions to use the camera, the problem is when it is deployed and it needs to access the device's camera and it does not request permissions, it stays in black screen and send this error.
escaner.component.html:40 ERROR TypeError: Cannot read properties of undefined (reading 'getUserMedia')
at NgxScannerQrcodeComponent.safariWebRTC (ngx-scanner-qrcode.mjs:980:32)
at NgxScannerQrcodeComponent.start (ngx-scanner-qrcode.mjs:707:18)
at EscanerComponent.handle (escaner.component.ts:68:17)
at EscanerComponent_Template_button_click_26_listener (escaner.component.html:40:140)
at executeListenerWithErrorHandling (core.mjs:15786:16)
at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15819:22)
at HTMLButtonElement. (platform-browser.mjs:665:17)
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:25998:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25998:36)
There is a way to stop the qr-code scanning without stop the video?
I need to scan a QR-code and then scan another object with my own code. My goal is to save hardware resources because my code is a little bit expensive. I could put another video element, but if there is a way to stop the qrcode scaning, will be helpful.
I have a weird situation. I'm using the example and selecting two types of cameras to recognize an EAN13 Barcode: my MacBook FaceTime built-in camera and my iPhone 12 with the Elgato Camera Hub.
When I try to scan with the MacBook webcam, I don't get any response. However, if I use the Elgato Camera Hub, it only recognizes the barcode if my iPhone camera is in horizontal mode.
Do I need to add any additional configurations for the camera? Thanks in advance.
im using the latest version of the package with angular 16
Hi, thanks for providing this code. I've used it for a QR-Code scanner with vs. 1.0.17 without any problems. Now I tried out the current version 1.2.6 and had the following issue when trying to start the scanner in my chrome-Browser:
platform-browser.mjs:564 GET http://<ip,port>/assets/wasm/index.js net::ERR_ABORTED 404 (Not Found)
Refused to execute script from 'http://<ip,port>/assets/wasm/index.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
core.mjs:7739 ERROR Error: Uncaught (in promise): ReferenceError: zbarWasm is not defined
ReferenceError: zbarWasm is not defined
Any idea how to solve this problem?
Thanks in advance for your response!
I see that in the output there is a "quality" attribute. Is it intended to manage false positive? What is the value range? Is an higher value better?
I'm trying to save resources (CPU, RAM) using a low frame rate, but it doesn't seem to work. If i set the framerate to 1fps, the library continue scanning with an high frequency ( I can see it according to numbers of bips and outputted code)