{"id":15103453,"url":"https://github.com/id1945/ngx-scanner-qrcode-single","last_synced_at":"2026-01-18T20:32:33.683Z","repository":{"id":172162324,"uuid":"648917867","full_name":"id1945/ngx-scanner-qrcode-single","owner":"id1945","description":"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.","archived":false,"fork":false,"pushed_at":"2023-06-03T09:21:47.000Z","size":2948,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T18:56:40.419Z","etag":null,"topics":["angular","angular2","jsqr","qr","qrcode"],"latest_commit_sha":null,"homepage":"https://id1945.github.io/ngx-scanner-qrcode-single","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/id1945.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-03T07:37:59.000Z","updated_at":"2023-06-03T08:00:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"6b3cbdd9-f416-4833-ba30-63716c0c82c8","html_url":"https://github.com/id1945/ngx-scanner-qrcode-single","commit_stats":null,"previous_names":["id1945/ngx-scanner-qrcode-single"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/id1945/ngx-scanner-qrcode-single","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-scanner-qrcode-single","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-scanner-qrcode-single/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-scanner-qrcode-single/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-scanner-qrcode-single/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/id1945","download_url":"https://codeload.github.com/id1945/ngx-scanner-qrcode-single/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-scanner-qrcode-single/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28549832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T19:56:05.265Z","status":"ssl_error","status_checked_at":"2026-01-18T19:55:54.685Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","jsqr","qr","qrcode"],"created_at":"2024-09-25T19:24:12.025Z","updated_at":"2026-01-18T20:32:33.665Z","avatar_url":"https://github.com/id1945.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-scanner-qrcode-single\n\nThis library is built to provide a solution scanner QR code.\\\nThis library takes in raw images and will locate, extract and parse any QR code found within.\\\nThis demo [Github](https://id1945.github.io/ngx-scanner-qrcode-single), [Stackblitz](https://stackblitz.com/edit/angular-ngx-scanner-qrcode-single).\n\n![Logo](https://raw.githubusercontent.com/id1945/ngx-scanner-qrcode-single/master/ngx-scanner-qrcode-single.png)\n\n\n## Installation\n\nInstall `ngx-scanner-qrcode-single` from `npm`:\n\n```bash\nnpm install ngx-scanner-qrcode-single@\u003cversion\u003e --save\n```\n\nAdd wanted package to NgModule imports:\n```typescript\nimport { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode-single';\n@NgModule({\n    imports: [\n        NgxScannerQrcodeModule\n    ]\n})\n```\n\nIn the Component:\n\n```html\n\u003c!-- For camera --\u003e\n\u003cngx-scanner-qrcode-single #action=\"scanner\"\u003e\u003c/ngx-scanner-qrcode-single\u003e\n\n\u003c!-- data  --\u003e\n\u003cspan\u003e{{ action.data.value | json }}\u003c/span\u003e\u003c!-- value --\u003e\n\u003cspan\u003e{{ action.data | async | json }}\u003c/span\u003e\u003c!-- async --\u003e\n\n\u003c!-- Loading --\u003e\n\u003cp *ngIf=\"action.isLoading\"\u003e⌛ Loading...\u003c/p\u003e\n\n\u003c!-- start --\u003e\n\u003cbutton (click)=\"action.isStart ? action.stop() : action.start()\"\u003e{{action.isStart ? 'Stop' : 'Start'}}\u003c/button\u003e\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eImage src\u003c/b\u003e\u003c/summary\u003e\n\n```html\n\u003c!-- For image src --\u003e\n\u003cngx-scanner-qrcode-single #action=\"scanner\" [src]=\"'https://domain.com/test.png'\"\u003e\u003c/ngx-scanner-qrcode-single\u003e\n\n\u003cspan\u003e{{ action.data.value | json }}\u003c/span\u003e\u003c!-- value --\u003e\n\u003cspan\u003e{{ action.data | async | json }}\u003c/span\u003e\u003c!-- async --\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eSelect files\u003c/b\u003e\u003c/summary\u003e\n\n```html\n\u003c!-- For select files --\u003e\n\u003cinput #file type=\"file\" (change)=\"onSelects(file.files)\" [multiple]=\"'multiple'\" [accept]=\"'.jpg, .png, .gif, .jpeg'\"/\u003e\n\n\u003cdiv *ngFor=\"let item of qrCodeResult\"\u003e\n  \u003cngx-scanner-qrcode-single #actionFile=\"scanner\" [src]=\"item.url\" [config]=\"config\"\u003e\u003c/ngx-scanner-qrcode-single\u003e\n  \u003cp\u003e{{ actionFile.data.value | json }}\u003c/p\u003e\u003c!-- value --\u003e\n  \u003cp\u003e{{ actionFile.data | async | json }}\u003c/p\u003e\u003c!-- async --\u003e\n\u003c/div\u003e\n```\n\n```typescript\nimport { Component } from '@angular/core';\nimport { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode-single';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];\n\n  public config: ScannerQRCodeConfig = {\n    constraints: { \n      video: {\n        width: window.innerWidth\n      }\n    } \n  };\n\n  constructor(private qrcode: NgxScannerQrcodeService) { }\n\n  public onSelects(files: any) {\n    this.qrcode.loadFiles(files).subscribe((res: ScannerQRCodeSelectedFiles[]) =\u003e {\n      this.qrCodeResult = res;\n    });\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eSelect files to Scan\u003c/b\u003e\u003c/summary\u003e\n\n```html\n\u003c!-- For select files --\u003e\n\u003cinput #file type=\"file\" (change)=\"onSelects(file.files)\" [multiple]=\"'multiple'\" [accept]=\"'.jpg, .png, .gif, .jpeg'\"/\u003e\n\n\u003cdiv *ngFor=\"let item of qrCodeResult\"\u003e\n  \u003cimg [src]=\"item.url | safe: 'url'\" [alt]=\"item.name\" style=\"max-width: 100%\"\u003e\u003c!-- Need bypassSecurityTrustUrl --\u003e\n  \u003cp\u003e{{ item.data | json }}\u003c/p\u003e\n\u003c/div\u003e\n```\n\n```typescript\nimport { Component } from '@angular/core';\nimport { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode-single';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];\n\n  public config: ScannerQRCodeConfig = {\n    constraints: { \n      video: {\n        width: window.innerWidth\n      }\n    } \n  };\n\n  constructor(private qrcode: NgxScannerQrcodeService) { }\n\n  public onSelects(files: any) {\n    this.qrcode.loadFilesToScan(files).subscribe((res: ScannerQRCodeSelectedFiles[]) =\u003e {\n      this.qrCodeResult = res;\n    });\n  }\n}\n```\n\n\u003c/details\u003e\n\n### API Documentation\n\n#### Input\n\n|   Field         |   Description                 |     Type                  |     Default                                                                                   |\n|   ---           |       ---                     |     ---                   |       ---                                                                                     |\n| [src]           | image url                     | string                    | -                                                                                             |\n| [fps]           | fps/ms                        | number                    | 30                                                                                            |\n| [vibrate]       | vibrate for mobile            | number                    | 300                                                                                           |\n| [isBeep]        | beep                          | boolean                   | true                                                                                          |\n| [constraints]   | setting video                 | MediaStreamConstraints    | ``` {audio:false,video:true} ```                                                              |\n| [canvasStyles]  | setting canvas                | CanvasRenderingContext2D  | ``` {font:'15px serif',lineWidth:1,strokeStyle:'green',fillStyle:'#55f02880'} ```                                                              |\n| [config]        | config                        | ScannerQRCodeConfig       | ``` {src:..,fps..,vibrate..,isBeep:..,config:..,constraints:..,canvasStyles:..} ``` |\n\n#### Ouput\n\n| Field     | Description   | Type                                      | Default |\n| ---       | ---           | ---                                       | ---     |\n| (event)   | data response | BehaviorSubject\u003cScannerQRCodeResult\u003e      | null    |\n\n#### Component exports\n\n| Field             | Description               | Type                                        | Default   |\n| ---               | ---                       | ---                                         | ---       |\n| isStart           | status                    | boolean                                     | false     | \n| isLoading         | status                    | boolean                                     | false     | \n| isTorch           | torch                     | boolean                                     | false     | \n| isPause           | status                    | boolean                                     | -         | \n| isReady           | status wasm               | AsyncSubject\u003cboolean\u003e                       | -         | \n| data              | data response             | BehaviorSubject\u003cScannerQRCodeResult\u003e        | null      |\n| devices           | data devices              | BehaviorSubject\u003cScannerQRCodeDevice[]\u003e      | []        |\n| deviceIndexActive | device index              | number                                      | 0         |\n| ---               | ---                       | ---                                         | ---       |\n| (start)           | start camera              | AsyncSubject                                | -         |\n| (stop)            | stop camera               | AsyncSubject                                | -         |\n| (play)            | play video                | AsyncSubject                                | -         |\n| (pause)           | pause video               | AsyncSubject                                | -         |\n| (torcher)         | toggle on/off flashlight  | AsyncSubject                                | -         |\n| (applyConstraints)| set media constraints     | AsyncSubject                                | -         |\n| (getConstraints)  | get media constraints     | AsyncSubject                                | -         |\n| (playDevice)      | play deviceId             | AsyncSubject                                | -         |\n| (loadImage)       | load image from src       | AsyncSubject                                | -         |\n| (download)        | download image            | AsyncSubject\u003cScannerQRCodeSelectedFiles[]\u003e  | -         |\n\n#### Service\n\n| Field             | Description         | Type                                        | Default |\n| ---               | ---                 | ---                                         | ---     |\n| (loadFiles)       | Convert files       | AsyncSubject\u003cScannerQRCodeSelectedFiles[]\u003e  | []      |\n| (loadFilesToScan) | Scanner files       | AsyncSubject\u003cScannerQRCodeSelectedFiles[]\u003e  | []      |\n\n#### Models\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eScannerQRCodeConfig\u003c/b\u003e\u003c/summary\u003e\n\n```typescript\ninterface ScannerQRCodeConfig {\n  src?: string;\n  fps?: number;\n  vibrate?: number /** support mobile */;\n  isBeep?: boolean;\n  constraints?: MediaStreamConstraints;\n  canvasStyles?: CanvasRenderingContext2D;\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eScannerQRCodeDevice\u003c/b\u003e\u003c/summary\u003e\n\n```typescript\ninterface ScannerQRCodeDevice {\n  kind: string;\n  label: string;\n  groupId: string;\n  deviceId: string;\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eScannerQRCodeResult\u003c/b\u003e\u003c/summary\u003e\n\n```typescript\nclass ScannerQRCodeResult {\n  binaryData: number[];\n  data: string;\n  chunks: Chunks;\n  version: number;\n  location: {\n    topRightCorner: Point;\n    topLeftCorner: Point;\n    bottomRightCorner: Point;\n    bottomLeftCorner: Point;\n    topRightFinderPattern: Point;\n    topLeftFinderPattern: Point;\n    bottomLeftFinderPattern: Point;\n    bottomRightAlignmentPattern?: Point | undefined;\n  };\n}\n```\n\n```typescript\ninterface Point {\n  x: number;\n  y: number;\n}\n\ndeclare type Chunks = Array\u003cChunk | ByteChunk | ECIChunk\u003e;\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eScannerQRCodeSelectedFiles\u003c/b\u003e\u003c/summary\u003e\n\n```typescript\ninterface ScannerQRCodeSelectedFiles {\n  url: string;\n  name: string;\n  file: File;\n  data?: ScannerQRCodeResult;\n  canvas?: HTMLCanvasElement;\n}\n```\n\u003c/details\u003e\n\n\n#### Support versions\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth colspan=\"2\"\u003eSupport versions\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAngular 6\u003c/td\u003e\n    \u003ctd\u003e1.0.0\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Author Information\n  \n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth colspan=\"2\"\u003eAuthor Information\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAuthor\u003c/td\u003e\n    \u003ctd\u003eDaiDH\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ePhone\u003c/td\u003e\n    \u003ctd\u003e+84845882882\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eCountry\u003c/td\u003e\n    \u003ctd\u003eVietnam\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### If you want donate for me!\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eBitcoin\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/id1945/id1945/master/donate-bitcoin.png\" width=\"182px\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n![Vietnam](https://raw.githubusercontent.com/id1945/id1945/master/vietnam.gif)\n\n[MIT License](https://github.com/id1945/ngx-scanner-qrcode-single/blob/master/LICENSE). Copyright (C) 2023.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fid1945%2Fngx-scanner-qrcode-single","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fid1945%2Fngx-scanner-qrcode-single","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fid1945%2Fngx-scanner-qrcode-single/lists"}