https://github.com/id1945/ngx-scanner-qrcode-single
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.
https://github.com/id1945/ngx-scanner-qrcode-single
angular angular2 jsqr qr qrcode
Last synced: 6 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/id1945/ngx-scanner-qrcode-single
- Owner: id1945
- License: mit
- Created: 2023-06-03T07:37:59.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-03T09:21:47.000Z (about 3 years ago)
- Last Synced: 2025-04-09T18:56:40.419Z (about 1 year ago)
- Topics: angular, angular2, jsqr, qr, qrcode
- Language: TypeScript
- Homepage: https://id1945.github.io/ngx-scanner-qrcode-single
- Size: 2.81 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-scanner-qrcode-single
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](https://id1945.github.io/ngx-scanner-qrcode-single), [Stackblitz](https://stackblitz.com/edit/angular-ngx-scanner-qrcode-single).
## Installation
Install `ngx-scanner-qrcode-single` from `npm`:
```bash
npm install ngx-scanner-qrcode-single@ --save
```
Add wanted package to NgModule imports:
```typescript
import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode-single';
@NgModule({
imports: [
NgxScannerQrcodeModule
]
})
```
In the Component:
```html
{{ action.data.value | json }}
{{ action.data | async | json }}
⌛ Loading...
{{action.isStart ? 'Stop' : 'Start'}}
```
Image src
```html
{{ action.data.value | json }}
{{ action.data | async | json }}
```
Select files
```html
{{ actionFile.data.value | json }}
{{ actionFile.data | async | json }}
```
```typescript
import { Component } from '@angular/core';
import { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode-single';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];
public config: ScannerQRCodeConfig = {
constraints: {
video: {
width: window.innerWidth
}
}
};
constructor(private qrcode: NgxScannerQrcodeService) { }
public onSelects(files: any) {
this.qrcode.loadFiles(files).subscribe((res: ScannerQRCodeSelectedFiles[]) => {
this.qrCodeResult = res;
});
}
}
```
Select files to Scan
```html
![]()
{{ item.data | json }}
```
```typescript
import { Component } from '@angular/core';
import { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode-single';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];
public config: ScannerQRCodeConfig = {
constraints: {
video: {
width: window.innerWidth
}
}
};
constructor(private qrcode: NgxScannerQrcodeService) { }
public onSelects(files: any) {
this.qrcode.loadFilesToScan(files).subscribe((res: ScannerQRCodeSelectedFiles[]) => {
this.qrCodeResult = res;
});
}
}
```
### API Documentation
#### Input
| Field | Description | Type | Default |
| --- | --- | --- | --- |
| [src] | image url | string | - |
| [fps] | fps/ms | number | 30 |
| [vibrate] | vibrate for mobile | number | 300 |
| [isBeep] | beep | boolean | true |
| [constraints] | setting video | MediaStreamConstraints | ``` {audio:false,video:true} ``` |
| [canvasStyles] | setting canvas | CanvasRenderingContext2D | ``` {font:'15px serif',lineWidth:1,strokeStyle:'green',fillStyle:'#55f02880'} ``` |
| [config] | config | ScannerQRCodeConfig | ``` {src:..,fps..,vibrate..,isBeep:..,config:..,constraints:..,canvasStyles:..} ``` |
#### Ouput
| Field | Description | Type | Default |
| --- | --- | --- | --- |
| (event) | data response | BehaviorSubject | null |
#### Component exports
| Field | Description | Type | Default |
| --- | --- | --- | --- |
| isStart | status | boolean | false |
| isLoading | status | boolean | false |
| isTorch | torch | boolean | false |
| isPause | status | boolean | - |
| isReady | status wasm | AsyncSubject | - |
| data | data response | BehaviorSubject | null |
| devices | data devices | BehaviorSubject | [] |
| deviceIndexActive | device index | number | 0 |
| --- | --- | --- | --- |
| (start) | start camera | AsyncSubject | - |
| (stop) | stop camera | AsyncSubject | - |
| (play) | play video | AsyncSubject | - |
| (pause) | pause video | AsyncSubject | - |
| (torcher) | toggle on/off flashlight | AsyncSubject | - |
| (applyConstraints)| set media constraints | AsyncSubject | - |
| (getConstraints) | get media constraints | AsyncSubject | - |
| (playDevice) | play deviceId | AsyncSubject | - |
| (loadImage) | load image from src | AsyncSubject | - |
| (download) | download image | AsyncSubject | - |
#### Service
| Field | Description | Type | Default |
| --- | --- | --- | --- |
| (loadFiles) | Convert files | AsyncSubject | [] |
| (loadFilesToScan) | Scanner files | AsyncSubject | [] |
#### Models
ScannerQRCodeConfig
```typescript
interface ScannerQRCodeConfig {
src?: string;
fps?: number;
vibrate?: number /** support mobile */;
isBeep?: boolean;
constraints?: MediaStreamConstraints;
canvasStyles?: CanvasRenderingContext2D;
}
```
ScannerQRCodeDevice
```typescript
interface ScannerQRCodeDevice {
kind: string;
label: string;
groupId: string;
deviceId: string;
}
```
ScannerQRCodeResult
```typescript
class ScannerQRCodeResult {
binaryData: number[];
data: string;
chunks: Chunks;
version: number;
location: {
topRightCorner: Point;
topLeftCorner: Point;
bottomRightCorner: Point;
bottomLeftCorner: Point;
topRightFinderPattern: Point;
topLeftFinderPattern: Point;
bottomLeftFinderPattern: Point;
bottomRightAlignmentPattern?: Point | undefined;
};
}
```
```typescript
interface Point {
x: number;
y: number;
}
declare type Chunks = Array;
```
ScannerQRCodeSelectedFiles
```typescript
interface ScannerQRCodeSelectedFiles {
url: string;
name: string;
file: File;
data?: ScannerQRCodeResult;
canvas?: HTMLCanvasElement;
}
```
#### Support versions
Support versions
Angular 6
1.0.0
#### Author Information
Author Information
Author
DaiDH
Phone
+84845882882
Country
Vietnam
#### If you want donate for me!
Bitcoin
[MIT License](https://github.com/id1945/ngx-scanner-qrcode-single/blob/master/LICENSE). Copyright (C) 2023.