@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
Property |
Type |
Optional |
origin |
Origin |
No |
size |
Size |
No |
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