@nativescript/mlkit-barcode-scanning
This plugin is used with @nativescript/mlkit-core. It enables barcode scanning and provides the BarcodeResult type for the barcode-scanned data.
Contents
Installation
npm install @nativescript/mlkit-barcode-scanning
Use @nativescript/mlkit-barcode-scanning
Follow these steps to scan a barcode:
- Add MLKitView to your page and set the
detectionType
property to "barcode"
.
<StackLayout>
<MLKitView
detectionType="barcode"
detection="{{ onDetection }}"
/>
<Label row="6">
<FormattedString>
<Span text="Barcode: "/>
<Span text="{{ barcode }}" class="text-green-500"/>
</FormattedString>
</Label>
</StackLayout>
- To receive the scanned barcode data, handle the
detection
event and get the data if the event's type is "barcode"
.
import { Observable } from "@nativescript/core"
import { DetectionEvent, DetectionType } from "@nativescript/mlkit-core";
import { BarcodeResult } from "@nativescript/mlkit-barcode-scanning";
export class BarcodeScannerViewModel extends Observable {
barcode = ""
...
onDetection(event: DetectionEvent){
if(event.type == DetectionType.Barcode){
const barcodeData: BarcodeResult = event.data[0] as BarcodeResult;
this.set("barcode", barcodeData?.rawValue)
}
}
}
Demo app
You can try a demo app at StackBlitz with the NativeScript Preview app.
API
Interfaces
BarcodeResult
The scanned barcode data object has the following properties:
WiFi
Property | Type | Optional |
---|
encryptionType | string | No |
password | string | No |
ssid | string | No |
UrlBookmark
Property | Type | Optional |
---|
title | string | Yes |
url | string | Yes |
Sms
Property | Type | Optional |
---|
message | string | No |
honeNumber | string | No |
Phone
Property | Type | Optional |
---|
number | string | No |
type | PhoneType | No |
Email
Property | Type | Optional |
---|
address | string | No |
subject | string | No |
body | string | No |
type | EmailType | |
DriverLicense
Property | Type | Optional |
---|
documentType | string | No |
firstName | string | No |
middleName | string | No |
lastName | string | No |
gender | string | No |
addressStreet | string | No |
addressCity | string | No |
addressState | string | No |
addressZip | string | No |
licenseNumber | string | No |
issueDate | string | No |
expiryDate | string | No |
birthDate | string | No |
issuingCountry | string | No |
CalenderEvent
Property | Type | Optional |
---|
description | string | Yes |
location | string | Yes |
organizer | string | Yes |
status | string | Yes |
summary | string | Yes |
start | string | Yes |
end | string | Yes |
Address
Property | Type | Optional |
---|
addressLines | string[] | No |
type | AddressType | No |
ContactInfo
Property | Type | Optional |
---|
addresses | Address[] | No |
Origin
Property | Type | Optional |
---|
x | number | No |
y | number | No |
Size
Property | Type | Optional |
---|
width | number | No |
height | number | No |
Bounds
Point
Property | Type | Optional |
---|
x | number | No |
y | number | No |
GeoPoint
Property | Type | Optional |
---|
lat | number | No |
lng | number | No |
Enums
EncryptionType
Open
= 'open'
WPA
= 'wpa'
WEP
= 'wep'
Unknown
= 'unknown'
PhoneType
Unknown
= "unknown"
Home
= "home"
Work
= "work"
Fax
= "fax"
Mobile
= "mobile"
EmailType
Unknown
= "unknown"
Home
= "home"
Work
= "work"
AddressType
Unknown
= "unknown"
Home
= "home"
Work
= "work"
ValueType
ContactInfo
= "contactInfo"
Email
= "email"
ISBN
= "isbn"
Phone
= "phone"
Product
= "product"
Text
= "text"
Sms
= "sms"
URL
= "url"
WiFi
= "wifi"
Geo
= "geo"
CalenderEvent
= "calender"
DriverLicense
= "driverLicense"
Unknown
= "unknown"
BarcodeFormats
ALL
= 'all'
CODE_128
= 'code_128'
CODE_39
= 'code_39'
CODE_93
= 'code_93'
CODABAR
= 'codabar'
DATA_MATRIX
= 'data_matrix'
EAN_13
= 'ean_13'
EAN_8
= 'ean_8'
ITF
= 'itf'
QR_CODE
= 'qr_code'
UPC_A
= 'upc_a'
UPC_E
= 'upc_e'
PDF417
= 'pdf417'
AZTEC
= 'aztec'
UNKOWN
= 'unknown'
License
Apache License Version 2.0