⌛ Loading...
\r\n\r\n\r\n\r\n```\r\n\r\nImage src
\r\n\r\n```html\r\n\r\nSelect files
\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n
\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];\r\n\r\n public config: ScannerQRCodeConfig = {\r\n constraints: { \r\n video: {\r\n width: window.innerWidth\r\n }\r\n } \r\n };\r\n\r\n constructor(private qrcode: NgxScannerQrcodeService) { }\r\n\r\n public onSelects(files: any) {\r\n this.qrcode.loadFiles(files).subscribe((res: ScannerQRCodeSelectedFiles[]) => {\r\n this.qrCodeResult = res;\r\n });\r\n }\r\n}\r\n```\r\n\r\n{{ actionFile.data.value | json }}
\r\n{{ actionFile.data | async | json }}
\r\nSelect files to Scan
\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n ![]()
\r\n
\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];\r\n\r\n public config: ScannerQRCodeConfig = {\r\n constraints: { \r\n video: {\r\n width: window.innerWidth\r\n }\r\n } \r\n };\r\n\r\n constructor(private qrcode: NgxScannerQrcodeService) { }\r\n\r\n public onSelects(files: any) {\r\n this.qrcode.loadFilesToScan(files).subscribe((res: ScannerQRCodeSelectedFiles[]) => {\r\n this.qrCodeResult = res;\r\n });\r\n }\r\n}\r\n```\r\n\r\n{{ item.data | json }}
\r\nScannerQRCodeConfig
\r\n\r\n```typescript\r\nexport interface ScannerQRCodeConfig {\r\n src?: string;\r\n fps?: number;\r\n vibrate?: number; /* support mobile */\r\n decode?: string;\r\n unScan?: boolean;\r\n isBeep?: boolean;\r\n isMasked?: boolean;\r\n loadWasmUrl?: string; /* eg. assets/wasm/ngx-scanner-qrcode.wasm */\r\n symbolType?: ScannerQRCodeSymbolType[];\r\n constraints?: MediaStreamConstraints;\r\n canvasStyles?: CanvasRenderingContext2D[] | any[];\r\n}\r\n```\r\nScannerQRCodeDevice
\r\n\r\n```typescript\r\ninterface ScannerQRCodeDevice {\r\n kind: string;\r\n label: string;\r\n groupId: string;\r\n deviceId: string;\r\n}\r\n```\r\nScannerQRCodeResult
\r\n\r\n```typescript\r\nclass ScannerQRCodeResult {\r\n type: ScannerQRCodeSymbolType;\r\n typeName: string;\r\n data: Int8Array;\r\n points: ArrayScannerQRCodeSelectedFiles
\r\n\r\n```typescript\r\ninterface ScannerQRCodeSelectedFiles {\r\n url: string;\r\n name: string;\r\n file: File;\r\n data?: ScannerQRCodeResult[];\r\n canvas?: HTMLCanvasElement;\r\n}\r\n```\r\n| Support versions | \r\n|
|---|---|
| Angular 19+ | \r\n1.8.1 | \r\n
| Angular 16+ | \r\n1.8.0 | \r\n
| Angular 6+ | \r\n1.7.9 | \r\n
| Author Information | \r\n|
|---|---|
| Author | \r\nDaiDH | \r\n
| Phone | \r\n+84845882882 | \r\n
| Country | \r\nVietnam | \r\n
| Bitcoin | \r\nPaypal | \r\nMBBank | \r\n
|---|---|---|
![](\"https://raw.githubusercontent.com/id1945/id1945/master/donate-bitcoin.png\") | \r\n ![](\"https://raw.githubusercontent.com/id1945/id1945/master/donate-paypal.png\") | \r\n ![](\"https://raw.githubusercontent.com/id1945/id1945/master/donate-mbbank.png\") | \r\n