@diadal/barcode-scanner

A fast and efficient (QR) barcode scanner for Capacitor

Install

npm install @diadal/barcode-scanner
npx cap sync

import { BarcodeScanner } from '@diadal/barcode-scanner';


function Scaner() {

      window.document.body.classList.add('qrscanner');
      BarcodeScanner.startScan()
        .then((result: ScanResult) => {
          window.document.body.classList.remove('qrscanner');
          console.log('result222cc', result);
        })
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        .catch((error: any) => {
          window.document.body.classList.remove('qrscanner');
          console.log('error333', error);
        });
    }

.scanner-ui {
display: none;
}
.scanner-hide {
visibility: visible;
}

body.qrscanner {
background-color: transparent;
}
body.qrscanner .scanner-ui {
display: block;
}
body.qrscanner .scanner-hide {
visibility: hidden;
}

.ion-content {
--background: transparent;
}

ion-content {
--background: transparent;
}

Thansk To [https://github.com/capacitor-community/camera-preview

](camera-preview)

API

• startScan(...)
• Interfaces
• Type Aliases

startScan(...)

startScan(data: CameraPreviewOptions | null) => Promise<ScanResult>

| Param | Type | | ---------- | ----------------------------------------------------------------------------- | | data | CameraPreviewOptions | null |

Returns: Promise<ScanResult>

Interfaces

ScanResult

| Prop | Type | | ---------------- | -------------------- | | hasContent | boolean | | code | string |

CameraPreviewOptions

| Prop | Type | Description | | ---------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | width | number | The preview width in pixels, default window.screen.width (applicable to the android and ios platforms only) | | height | number | The preview height in pixels, default window.screen.height (applicable to the android and ios platforms only) | | x | number | The x origin, default 0 (applicable to the android and ios platforms only) | | y | number | The y origin, default 0 (applicable to the android and ios platforms only) | | paddingBottom | number | The preview bottom padding in pixes. Useful to keep the appropriate preview sizes when orientation changes (applicable to the android and ios platforms only) | | rotateWhenOrientationChanged | boolean | Rotate preview when orientation changes (applicable to the ios platforms only; default value is true) | | position | string | Choose the camera to use 'front' or 'rear', default 'front' | | enableHighResolution | boolean | Defaults to false - iOS only - Activate high resolution image capture so that output images are from the highest resolution possible on the device * |

Type Aliases

CameraPosition

'rear' | 'front'