Angular HTML5 QR Code Library

The Angular HTML5 QR Code Library based on html5-qrcode library The Angular HTML5 QR Code Library provides an Angular wrapper for the html5-qrcode library, allowing developers to easily integrate QR code and barcode scanning functionalities into their Angular applications.

Component Template Usage

npm install angular-html5-qrcode

import { AngularHtmlQrcodeComponent } from 'angular-html5-qrcode';

<angular-html-qrcode
  [types]="[Html5QrcodeSupportedFormats.QR_CODE]"
  [fps]="2"
  [aspectRatio]="1.333334"
  [disableFlip]="false"
  [supportCameraOrFile]="'camera'"
  (onSuccess)="handleScanSuccess($event)"
  (onError)="handleScanError($event)">
</angular-html-qrcode>

Input Properties Table

| Property | Type | Default | Description | |-----------------------|----------------------------------------|----------------------------|--------------------------------------------------------------------------------------------------| | types | Html5QrcodeSupportedFormats[] | All supported formats | List of formats to support during scanning. | | fps | number | 10 | Frames per second for the camera feed. | | selectorID | string | 'reader' | ID of the container element for the scanner. | | rememberLastUsedCamera | boolean | true | Whether to remember the last used camera. | | aspectRatio | number | 1.333334 | Aspect ratio of the camera feed. | | disableFlip | boolean | false | Disable the flipping of the camera feed (useful for mirrored scans). | | supportCameraOrFile | string | 'both' | Choose whether to enable camera scanning, file scanning, or both. | | qrbox | QrDimensions , QrDimensionFunction | { width: 250, height: 250 } | Dimensions of the scanning box. |

Output Events Table

| Event | Payload Type | Description | |-------------|--------------------|-------------------------------------------------------| | onSuccess | QrcodeSuccessCallback | Triggered when a QR code or barcode is successfully scanned. | | onError | QrErrorCallback | Triggered when there is an error during scanning. |

Import the Service

import { Component } from '@angular/core';
import { AngularHtmlQrcodeService } from 'angular-html5-qrcode';

export class AppComponent {
  constructor(private qrCodeService: AngularHtmlQrcodeService) {}
}

Methods

| Method | Description | Parameters | Returns | |----------------------------------|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------| | clear() | Clears the scanner instance and releases resources. | None | Promise<void> or undefined. | | pause(shouldPauseVideo) | Temporarily pauses the scanner. | - shouldPauseVideo (boolean): Whether to pause video input (default: true). | void. | | resume() | Resumes the scanner if it was paused. | None | void. |