barKoder Capacitor SDK - General Barcode Scanning Sample

Capacitor Capacitor Examples

General example

Requirements: #

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android and the web. To get started with building apps using Capacitor, you'll need to meet certain requirements:

Node.js and npm#

Ensure you have Node.js installed on your machine. Capacitor requires Node.js version 10 or later. npm (Node Package Manager) is also required. It usually comes with Node.js.

Text Editor or IDE#

Choose a text editor or an integrated development environment (IDE) for coding. Popular choices include Visual Studio Code, Atom, or any other editor of your preference.

Git#

Capacitor projects are often managed with Git, so having Git installed on your machine is recommended.

Command Line Interface (CLI)#

Capacitor commands are executed via the command line. Make sure you have a command line interface (CLI) installed and accessible on your system.

Mobile Development SDKs#

To build and run apps on specific platforms, you'll need the corresponding SDKs:

For iOS development: Xcode (available on macOS)

For Android development: Android Studio Capacitor project.

Here are the basic steps:

Install Capacitor: #

                npm install -g @capacitor/cli

Add platforms#

                npx cap add ios
npx cap add android

Open IDE and Start Coding:#

Open your chosen IDE or text editor and start building your app using web technologies.

Build and Run:#

Use Capacitor commands to build and run your app on different platforms.

                npx cap open ios
npx cap open android

Install barkoder#

                npm install barkoder-capacitor
npx cap sync

Install barKoder Manually#

If you would like to install from a local folder you will need to follow these steps:

Download zip

Unpack zip file

Rename folder to your liking

Paste the folder in app directory ex. myApp/barkoder-capacitor (this is the new name of the download plugin folder)

Finally:

                npm install “/your-path/myApp/barkoder-capacitor”

Using the plugin#

Angular#

In your ts file:

                import { Barkoder, BarcodeType } from 'barkoder-capacitor'

@ViewChild('barkoderView') barkoderViewRef!: ElementRef;

constructor() {
Barkoder.addListener('barkoderResultEvent', (barkoderResult: any) => {
console.log('barkoderResultEvent was fired');
console.log(“Result: ” + barkoderResult.textualData);
});
}

setActiveBarcodeTypes() {
Barkoder.setBarcodeTypeEnabled({ type: BarcodeType.code128, enabled: true });
Barkoder.setBarcodeTypeEnabled({ type: BarcodeType.ean13, enabled: true });
}

setBarkoderSettings() {
Barkoder.setRegionOfInterestVisible({value: true});
Barkoder.setRegionOfInterest({ left: 5, top: 5, width: 90, height: 90 });
Barkoder.setCloseSessionOnResultEnabled({ enabled: false});
Barkoder.setImageResultEnabled({ enabled: true});
Barkoder.setBarcodeThumbnailOnResultEnabled({ enabled: true});
Barkoder.setBeepOnSuccessEnabled({ enabled: true});
Barkoder.setPinchToZoomEnabled({ enabled: true});
Barkoder.setZoomFactor({ value: 2.0 });
}

async startScanning() {
const boundingRect = this.barkoderViewRef.nativeElement.getBoundingClientRect() as DOMRect;
Barkoder.registerWithLicenseKey({licenseKey: “your_license_key”});
await Barkoder.initialize({
width: Math.round(boundingRect.width),
height: Math.round(boundingRect.height),
x: Math.round(boundingRect.x),
y: Math.round(boundingRect.y),
});
this.setBarkoderSettings();
this.setActiveBarcodeTypes();
Barkoder.startScanning();
}

In your HTML file add the barkoderView div id:

                <div id=“barkoderView” #barkoderView >

In your scss file set the desired barkoderView height:

                #barkoderView {
height: 400px;
}

Enable Vin

Enable DPM Mode