ngx-scanner-qrcode

v1.7.3

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. For more information about how to use this package see README

Latest version published 28 days ago

License: LGPL-2.1

NPM

GitHub

Package Health Score

68 / 100

security
No known security issues
popularity
Small
maintenance
Sustainable
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
1.7.3	\|	11/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.6.9	\|	02/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.0.1	\|	02/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

LGPL-2.1

Non-Permissive License

We noticed that this project uses a license which requires less permissive conditions such as disclosing the source code, stating changes or redistributing the source under the same license. It is advised to further consult the license terms before use.

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (4,521)

GitHub Stars: 57
Forks: 28
Contributors: 1

Direct Usage Popularity

The npm package ngx-scanner-qrcode receives a total of 4,521 downloads a week. As such, we scored ngx-scanner-qrcode popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package ngx-scanner-qrcode, we found that it has been starred 57 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 1
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like ngx-scanner-qrcode is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Sustainable

Commit Frequency

Open Issues: 12
Open PR: 0
Last Release: 28 days ago
Last Commit: 28 days ago

Further analysis of the maintenance status of ngx-scanner-qrcode based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that ngx-scanner-qrcode demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 3 years
Dependencies: 1 Direct
Versions: 160
Install Size: 773 kB
Dist-tags: 1
# of Files: 28
Maintainers: 1
TS Typings: Yes

ngx-scanner-qrcode has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

ngx-scanner-qrcode

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.

Logo

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@ --save

Add wanted package to NgModule imports:

import { NgxScannerQrcodeModule, LOAD_WASM } from 'ngx-scanner-qrcode';

// Necessary to solve the problem of losing internet connection
LOAD_WASM('assets/wasm/ngx-scanner-qrcode.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:





<span>{{ action.data.value | json }}</span>
<span>{{ action.data | async | json }}</span>


<p>⌛ Loading...</p>


<button>{{action.isStart ? 'Stop' : 'Start'}}</button>

Image src




<span>{{ action.data.value | json }}</span>
<span>{{ action.data | async | json }}</span>

Select files


<input type="file">

<div>
  
  <p>{{ actionFile.data.value | json }}</p>
  <p>{{ actionFile.data | async | json }}</p>
</div>

import { Component } from '@angular/core';
import { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode';

@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[]) =&gt; {
      this.qrCodeResult = res;
    });
  }
}

Select files to Scan


<input type="file">

<div>
  <img style="max-width: 100%">
  <p>{{ item.data | json }}</p>
</div>

import { Component } from '@angular/core';
import { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode';

@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[]) =&gt; {
      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
[decode]	decode value	string	utf-8
[isBeep]	beep	boolean	true
[isMasked]	masked	boolean	true
[unScan]	scan	boolean	false
[loadWasmUrl]	wasm local url	string	blank
[symbolType]	type	ScannerQRCodeSymbolType[]	[ScannerQRCode_NONE]
[constraints]	setting video	MediaStreamConstraints	`{audio:false,video:true}`
[canvasStyles]	setting canvas	CanvasRenderingContext2D[]	`[{ lineWidth: 1, strokeStyle: 'green', fillStyle: '#55f02880' },{ font: '15px serif', strokeStyle: '#fff0', fillStyle: '#ff0000' }]`
[config]	config	ScannerQRCodeConfig	`{src:..,fps..,vibrate..,decode:..,isBeep:..,config:..,constraints:..,canvasStyles:..}`

Ouput

Field	Description	Type	Default
(event)	data response	BehaviorSubject	[]

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	[]
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

export interface ScannerQRCodeConfig {
  src?: string;
  fps?: number;
  vibrate?: number; /* support mobile */
  decode?: string;
  unScan?: boolean;
  isBeep?: boolean;
  isMasked?: boolean;
  loadWasmUrl?: string; /* eg. assets/wasm/ngx-scanner-qrcode.wasm */
  symbolType?: ScannerQRCodeSymbolType[];
  constraints?: MediaStreamConstraints;
  canvasStyles?: CanvasRenderingContext2D[] | any[];
}

ScannerQRCodeDevice

interface ScannerQRCodeDevice {
  kind: string;
  label: string;
  groupId: string;
  deviceId: string;
}

ScannerQRCodeResult

class ScannerQRCodeResult {
  type: ScannerQRCodeSymbolType;
  typeName: string;
  data: Int8Array;
  points: Array;
  orientation: ScannerQRCodeOrientation;
  time: number;
  cacheCount: number;
  quality: number;
  value: string;
}


enum ScannerQRCodeSymbolType {
  ScannerQRCode_NONE = 0,   /**&lt; no symbol decoded */
  ScannerQRCode_PARTIAL = 1,   /**&lt; intermediate status */
  ScannerQRCode_EAN2 = 2,   /**&lt; GS1 2-digit add-on */
  ScannerQRCode_EAN5 = 5,   /**&lt; GS1 5-digit add-on */
  ScannerQRCode_EAN8 = 8,   /**&lt; EAN-8 */
  ScannerQRCode_UPCE = 9,   /**&lt; UPC-E */
  ScannerQRCode_ISBN10 = 10,  /**&lt; ISBN-10 (from EAN-13). @since 0.4 */
  ScannerQRCode_UPCA = 12,  /**&lt; UPC-A */
  ScannerQRCode_EAN13 = 13,  /**&lt; EAN-13 */
  ScannerQRCode_ISBN13 = 14,  /**&lt; ISBN-13 (from EAN-13). @since 0.4 */
  ScannerQRCode_COMPOSITE = 15,  /**&lt; EAN/UPC composite */
  ScannerQRCode_I25 = 25,  /**&lt; Interleaved 2 of 5. @since 0.4 */
  ScannerQRCode_DATABAR = 34,  /**&lt; GS1 DataBar (RSS). @since 0.11 */
  ScannerQRCode_DATABAR_EXP = 35,  /**&lt; GS1 DataBar Expanded. @since 0.11 */
  ScannerQRCode_CODABAR = 38,  /**&lt; Codabar. @since 0.11 */
  ScannerQRCode_CODE39 = 39,  /**&lt; Code 39. @since 0.4 */
  ScannerQRCode_PDF417 = 57,  /**&lt; PDF417. @since 0.6 */
  ScannerQRCode_QRCODE = 64,  /**&lt; QR Code. @since 0.10 */
  ScannerQRCode_SQCODE = 80,  /**&lt; SQ Code. @since 0.20.1 */
  ScannerQRCode_CODE93 = 93,  /**&lt; Code 93. @since 0.11 */
  ScannerQRCode_CODE128 = 128, /**&lt; 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,
}

interface ScannerQRCodePoint {
  x: number;
  y: number;
}

enum ScannerQRCodeOrientation {
  ScannerQRCode_ORIENT_UNKNOWN = -1,  /**&lt; unable to determine orientation */
  ScannerQRCode_ORIENT_UP,            /**&lt; upright, read left to right */
  ScannerQRCode_ORIENT_RIGHT,         /**&lt; sideways, read top to bottom */
  ScannerQRCode_ORIENT_DOWN,          /**&lt; upside-down, read right to left */
  ScannerQRCode_ORIENT_LEFT,          /**&lt; sideways, read bottom to top */
}

ScannerQRCodeSelectedFiles

interface ScannerQRCodeSelectedFiles {
  url: string;
  name: string;
  file: File;
  data?: ScannerQRCodeResult[];
  canvas?: HTMLCanvasElement;
}

Support versions

Support versions
Angular 16+	1.7.3
Angular 6+	1.7.2

Author Information

Author Information
Author	DaiDH
Phone	+84845882882
Country	Vietnam

To make this library more complete, please donate to me if you can!

Bitcoin	Paypal	MbBank

Vietnam

ngx-scanner-qrcode dependencies

tslib

FAQs

What is ngx-scanner-qrcode?

This library is built to provide a solution scanner QR code. This library takes in raw images and will locate, extract ... Visit Snyk Advisor to see a full health score report for ngx-scanner-qrcode, including popularity, security, maintenance & community analysis.

Is ngx-scanner-qrcode popular?

The npm package ngx-scanner-qrcode receives a total of 4,521 weekly downloads. As such, ngx-scanner-qrcode popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is ngx-scanner-qrcode well maintained?

We found indications that ngx-scanner-qrcode maintenance is sustainable demonstrating some project activity. We saw a total of 1 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is ngx-scanner-qrcode safe to use?

The npm package ngx-scanner-qrcode was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 21 December-2024, at 01:45 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (4,521)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

ngx-scanner-qrcode

Installation

API Documentation

Input

Ouput

Component exports

Service

Models

Support versions

Author Information

To make this library more complete, please donate to me if you can!

ngx-scanner-qrcode dependencies

FAQs

What is ngx-scanner-qrcode?

Is ngx-scanner-qrcode popular?

Is ngx-scanner-qrcode well maintained?

Is ngx-scanner-qrcode safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues