Skip to main content

React - Using WebSDK with React

  • Updated

The React framework is supported by Scandit technology and the purpose of the following article is to facilitate the integration and setting up of your React application alongside Scandit SDK.

 

Create a new project (optional)

If you still do not have a React project that you will use, you should create a new one.

$ npx create-react-app helloscandit
$ cd helloscandit

 

Add needed Scandit plugins 

Add the Core and Barcode plugins (as described in our documentation).  

$ npm install scandit-web-datacapture-core
$ npm install scandit-web-datacapture-barcode

 

You also need to add the library engine files and provide an appropriate path under the `libraryLocation` parameter. 

 

You can either add needed files locally or use the CDN link, as described here: https://docs.scandit.com/data-capture-sdk/web/get-started-barcode.html#configure-and-initialize-the-library.  For the purpose of this guide, we'll copy these files (js+wasm) from `helloscandit/node_modules/scandit-web-datacapture-barcode/build/engine` to a newly created folder under `public/engine` and then reference it, as shown in the below code snippet. 

 

Create a new component

Create a new folder called `components` under `src`. Inside the newly created folder, create a new file called `Scanner.js`. Then open the file and use the below code snippet: 

import * as SDCCore from 'scandit-web-datacapture-core';
import * as SDCBarcode from 'scandit-web-datacapture-barcode';
import { useEffect } from 'react';

const licenseKey = "YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE";

 const Scanner = () => {
   useEffect(() => {
     async function runScanner() {
       await SDCCore.configure({
       licenseKey: licenseKey,
       libraryLocation: process.env.PUBLIC_URL + '/engine',
       moduleLoaders: [SDCBarcode.barcodeCaptureLoader()]
     });

     const context = await SDCCore.DataCaptureContext.create();

     const camera = SDCCore.Camera.default;
     await context.setFrameSource(camera);

     const settings = new SDCBarcode.BarcodeCaptureSettings();
     settings.enableSymbologies([
       SDCBarcode.Symbology.Code128,
       SDCBarcode.Symbology.Code39,
       SDCBarcode.Symbology.QR,
       SDCBarcode.Symbology.EAN8,
       SDCBarcode.Symbology.UPCE,
       SDCBarcode.Symbology.EAN13UPCA
     ]);

     const symbologySetting = settings.settingsForSymbology(SDCBarcode.Symbology.Code39);
     symbologySetting.activeSymbolCounts = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

     const barcodeCapture = await SDCBarcode.BarcodeCapture.forContext(context, settings);
     await barcodeCapture.setEnabled(false);

     barcodeCapture.addListener({
       didScan: async (barcodeCapture, session) => {
         await barcodeCapture.setEnabled(false);
         const barcode = session.newlyRecognizedBarcodes[0];
         const symbology = new SDCBarcode.SymbologyDescription(barcode.symbology);
         showResult(barcode.data, symbology.readableName);
         await barcodeCapture.setEnabled(true);
       },
     });

     const view = await SDCCore.DataCaptureView.forContext(context);
     view.connectToElement(document.getElementById("data-capture-view"));
     view.addControl(new SDCCore.CameraSwitchControl()); 

     const barcodeCaptureOverlay = 
       await SDCBarcode.BarcodeCaptureOverlay.withBarcodeCaptureForViewWithStyle(
       barcodeCapture,
       view,
       SDCBarcode.BarcodeCaptureOverlayStyle.Frame
     );

     const viewfinder = new SDCCore.RectangularViewfinder(
       SDCCore.RectangularViewfinderStyle.Square,
       SDCCore.RectangularViewfinderLineStyle.Light
     );

     await barcodeCaptureOverlay.setViewfinder(viewfinder); 

     await camera.switchToDesiredState(SDCCore.FrameSourceState.On);
     await barcodeCapture.setEnabled(true);
  }

  function showResult(data, symbology) {
    alert("Scanned: "+data+" "+symbology);
  }

  runScanner().catch((error) => {
    console.error(error);
    alert(error);
    });
  }, []);

  return(
    <div id="data-capture-view"></div>
  )

};

export default Scanner;

 

Reference Scanner component

Add the newly created Scanner component to the `App.js` file so it's displayed when app is run: 

...
import Scanner from './components/Scanner';

function App() {
 return (
   <Scanner />
 );
}

export default App;

 

Set the license key

Replace the `YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE` string with your web license key under `src/components/Scanner.js`. 

Run the app

 Run the app with `npm start`. At this point you should be able to see a working scanner at `localhost:3000`.

 

For more details, please refer to our official documentation: https://docs.scandit.com/data-capture-sdk/web/index.html or you can reach out to us directly at support@scandit.com.




Was this article helpful?

Related articles

Comments

0 comments

Please sign in to leave a comment.