Barcode Scanner for Capacitor Ionic Sample Code

Struggling to find a barcode scanner code example for Ionic? Discover how to integrate barcode scanning into your app using Capacitor Scanner plugin.

Tweet
Share
Share
Pin

When searching for a barcode scanner online for Ionic, it can sometimes be challenging to find a code example that works effectively. However, after some persistent searching, you were able to discover a suitable solution.

Ionic is a popular framework for building hybrid mobile applications using web technologies such as HTML, CSS, and JavaScript. Integrating a barcode scanner into an Ionic app can be beneficial for various use cases, including inventory management, product scanning, ticketing systems, and more.

To implement a barcode scanner in Ionic, you typically need to use a plugin that provides access to the device’s camera and barcode scanning capabilities. The most commonly used plugin for barcode scanning in Ionic is the Capacitor Bar Code Scanner, which leverages the capabilities of the underlying platform (Android or iOS).

To get started, you first need to set up your Ionic project and ensure that Capacitor is properly installed. Once your project is ready, you can install the Capacitor Bar Code Scanner plugin by running the following command:

npm install @capacitor-community/barcode-scanner
npx cap sync

For iOS

<dict>
+  <key>NSCameraUsageDescription</key>
+  <string>To be able to scan barcodes</string>
</dict>

For Android

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools"
  package="com.example">

  <application
+    android:hardwareAccelerated="true"
  >
  </application>

+  <uses-permission android:name="android.permission.CAMERA" />

+  <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
</manifest>

Example Code

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

const prepare = () => {
  BarcodeScanner.prepare();
};

const startScan = async () => {
  BarcodeScanner.hideBackground();
  const result = await BarcodeScanner.startScan();
  document.querySelector('body').classList.add('scanner-active');
  if (result.hasContent) {
    console.log(result.content);
    const apiUrl = `#`;
    try {
      const response = await fetch(apiUrl);
      const data = await response.json();
      console.log(data.message);
      return data.message;
    } catch (error) {
      console.error(error);
    }
  }
};

const stopScan = () => {
  BarcodeScanner.showBackground();
  document.querySelector('body').classList.remove('scanner-active');
  BarcodeScanner.stopScan();
};

const askUser = () => {
  prepare();

  const c = confirm('Do you want to scan a barcode?');

  if (c) {
    startScan();
  } else {
    stopScan();
  }
};



const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Test Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">TestBlank</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonButton onClick={askUser}>Scan</IonButton>
        <ExploreContainer />
      </IonContent>
    </IonPage>
  );
};

export default Home;

Full Documentation: https://github.com/capacitor-community/barcode-scanner#usage