React JS Barcode Reader Tutorial mit Beispielen

Erste Schritte

Voraussetzungen

• Node.js
• React*

Hinweis: Der Scanbot Web Barcode Scanner nutzt WebAssembly, welches von älteren Browsern nicht unterstützt wird. Erfahren Sie hier mehr: WebAssembly und Unterstützte Browser.

* Obwohl wir in diesem Tutorial React JS verwenden, funktionieren die npm-Pakete des Scanbot Web SDK auch mit anderen JavaScript-Frameworks wie Angular sowie mit Vanilla JS.

Erstellen einer “Hello World” React-App

$ npx create-react-app my-awesome-react-barcode-scanner-web-app

Mit diesem Befehl erstellen Sie eine leere React-App. 

Testlauf

Führen Sie die App nun im lokalen Browser aus.

$ cd my-awesome-react-barcode-scanner-web-app 
$ npm start

Ihnen wird nun der standardmäßige “Hello World”-Bildschirm angezeigt. 

Nun können Sie Ihr eigenes Projekt mit React entwickeln. Sobald die App bereit für den Release ist, können Sie via npm run build eine optimierte Anwendung im Build-Ordner erstellen lassen.

Hinzufügen des Scanbot SDKs

Binden wir nun das Scanbot SDK in unser Projekt ein. Das Scanbot Web SDK ist als npm-Paket verfügbar: scanbot-web-sdk verfügbar. Verwenden Sie den folgenden Befehl, um es zu installieren:

$ npm install scanbot-web-sdk

Zeit fürs Programmieren!

Wenn Sie ein Webpack-basiertes Projekt entwickeln (bei React standardmäßig voreingestellt), können Sie das Scanbot Web SDK mit folgendem Befehl in App.js importieren:

import ScanbotSDK from 'scanbot-web-sdk/webpack'

So stellen Sie sicher, dass Webpack die Web Worker- und WebAssembly-Komponenten automatisch in den Output-Ordner (üblicherweise ./dist/) kopiert. Besuchen Sie hierzu gerne die offiziellen Website für mehr Informationen.

Falls Sie sich selbst um die Komponenten kümmern möchten, importieren Sie das SDK ohne das /webpack -Suffix wie unten gezeigt:

import ScanbotSDK from 'scanbot-web-sdk'

Stellen Sie anschließend sicher, dass Sie folgende Dateien aus dem npm-Paket in den Distribution-Ordner Ihrer Web-App (üblicherweise  ./dist/) kopieren:

• ScanbotSDK.Core.js
• ScanbotSDK.Asm.wasm

Anfänglicher Code

Zunächst importieren wir das Scanbot SDK in unsere Anwendung. Unser BarcodeScanner wandert dabei in die App-Standardkomponente.
Ersetzen Sie dafür den Inhalt der Date App.js mit folgendem Code:

import React from 'react';
import ScanbotSDK from 'scanbot-web-sdk/webpack';
import './App.css';


export default class App extends React.Component {
  constructor(props) {
      super(props);
  }

  async componentDidMount() {
    this.sdk = await ScanbotSDK.initialize({
      licenseKey: '',
      engine: "/",
    });
  }

  render() {
    return (
      <div
        id='barcode-scanner-view'
        style="{{" height: "70%", width: "70%" }}>
      </div>
    );
  }
}

Initialisierung des Scanbot SDK

Bevor das Scanbot SDK verwendet werden kann, muss es initialisiert werden. Dafür verwenden wir folgende API-Methode des SDK: ScanbotSDK.initialize(options).

Werfen wir einen Blick auf die Methode componentDidMount() in der React-Komponente: Sie wird unmittelbar nach dem Einbinden der Komponente aufgerufen und ermöglicht die Initialisierung des SDK in unserer neuen App-Klasse in App.js:

class App extends React.Component { 
... 
async componentDidMount() {
    this.sdk = await ScanbotSDK.initialize({
      licenseKey: '', // see the license key notes below!
      engine: "/",
    });
}
...
}

Die vollständige API-Referenz für das Scanbot Web SDK finden Sie in der Dokumentation.

Integration der Barcode Scanner UI

Das Scanbot Web SDK enthält ein gebrauchsfertiges Scanner-Element für das Scannen von Barcodes. Über die API-Methode ScanbotSDK.instance.createBarcodeScanner(config) können Sie den Barcode Scanner mit nur wenigen Zeilen Code integrieren.

Um den SDK-Callback an die Erkennungs-Action zu binden, betten wir es in die Funktion onBarcodesDetected() ein:

class App extends React.Component {
  ...
  barcodes = [];


  async componentDidMount() {
    this.sdk = await ScanbotSDK.initialize({
      licenseKey: '',
      engine: "/",
    });


    const config = {
      onBarcodesDetected: this.onBarcodesDetected.bind(this),
      containerId: 'barcode-scanner-view',
    };


    this.barcodeScanner = await this.sdk.createBarcodeScanner(config);
  }
 
  async onBarcodesDetected(result) {
    this.barcodes.push(result);
  }
  render() {
  ...
}

Erkannte Barcodes werden als Objekt BarcodeResult ausgegeben. Sie können die Barcode-Ergebnisse, wie in unserem einfachen Beispiel oben, in einem Array speichern.

Weitere Informationen zu den Ergebnissen aus der Barcode-Erkennung finden Sie in unserer Dokumentation.

Barcode-Ergebnisse anzeigen

Nun möchten wir die gescannten Barcodes als Text anzeigen lassen. Die Ergebnisse sind als Array von Barcodes im BarcodeResul-Objekt hinterlegt. Um das Ergebnis des letzten Barcode-Scans anzeigen zu lassen, muss die React-Methode setState wie folgt hinzugefügt werden:

constructor(props) {
    super(props);
 
    this.state = {
      lastBarcode: null,
    }
  }
...
async onBarcodesDetected(result) {
    this.barcodes.push(result);
    this.setState({
      lastBarcode: result
    });
}

Nachdem der Ergebnistext formatiert wurde, rendern wir die erkannten Barcodes. Folgenden Code können wir dazu beispielsweise verwenden: 

render() {
    let barcodeText;
    if (!this.state.lastBarcode) {
      barcodeText = '';
    } else {
      const barcodes = this.state.lastBarcode.barcodes;
      barcodeText = JSON.stringify(
        barcodes.map((barcodes) => barcodes.text + " (" + barcodes.format + ") "));
    }
 
    return (
      <div>
        <div
          id='barcode-scanner-view'
          style="{{" height: "70%", width: "70%" }}>
        </div>
        {barcodeText}
      </div>
    );
}

Das war’s! Sie können das abgeschlossene Projekt nun ausführen. Die App sollte Barcodes scannen und die Ergebnisse anzeigen können.

Vollständige Beispielprojekte

Für einen guten Start sollten Sie sich die folgenden Beispielprojekte auf GitHub ansehen:

• Das kleine Beispielprojekt zu diesem Tutorial: https://github.com/doo/my-awesome-react-barcode-scanner-web-app
• Vollständiges Beispielprojekt: https://github.com/doo/scanbot-sdk-example-web
  Darin wird die Integration aller API-Methoden des Scanbot Web SDK vorgestellt, darunter Document Scanning, Cropping UI, Image Filtering, PDF & TIFF Rendering, Barcode & QR Code Scanning, MRZ (Machine Readable Zones) Scanner, etc.

Scanbot SDK (Testversion) Lizenzschlüssel

Bitte beachten Sie: Das Scanbot SDK läuft auch ohne Lizenzschlüssel für eine Minute pro Sitzung! Nach Ablauf des Testzeitraums hören die Scanbot SDK-Funktionen sowie die Benutzeroberfläche auf zu funktionieren oder werden beendet. 

Sie können eine uneingeschränkte, kostenlose 7-Tage-Testlizenz ohne jegliche Verpflichtungen erhalten. Füllen Sie hierzu einfach das Testlizenz-Formular auf unserer Website aus. Achten Sie darauf, “Web SDK” auszuwählen, und geben Sie Ihren Domain-Namen ein.

Der Lizenzschlüssel für das Scanbot Web SDK ist an den Domain-Namen gebunden, auf dem Ihre Web-Anwendung gehostet wird. Die Test-Domain “localhost” für Ihren lokalen Entwicklungsserver ist ebenfalls enthalten.