How to use the WebSDK in NextJS/React with SSR? – Frequently Asked Questions (FAQ)

Please note that our library requires an access to browser-specific objects like window or navigator.

You can try to wrap ScanditBarcodeScanner in a custom React Component that you will import dynamically into your Next.js page (or anywhere else where you need scanning functionality). While importing, it's important to use the ssr: false option as our SDK uses the window object.

Please have a look at the example below:

- pages/scan.tsx:

import React from 'react'
import dynamic from "next/dynamic";

const Scanner = dynamic(() => import("../components/ScanditScanner"), {
  ssr: false,
  loading: () => <p>Initializing Scanner</p>,
});

const scan = () => {
  return (
    <Scanner />
  )
}

export default scan

- components/ScanditScanner.tsx:

import * as SDCCore from 'scandit-web-datacapture-core';
import * as SDCBarcode from 'scandit-web-datacapture-barcode';

const licenseKey = "YOUR_LICENSE_KEY_IS_NEEDED_HERE";

  constScanner = () => {
    async function runScanner() {

      awaitSDCCore.configure({
        licenseKey:licenseKey,
        libraryLocation:'https://cdn.jsdelivr.net/npm/scandit-web-datacapture-barcode@6.x/build/engine/',
        moduleLoaders: [SDCBarcode.barcodeCaptureLoader()]
      });

      const context = awaitSDCCore.DataCaptureContext.create();

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

      const settings = newSDCBarcode.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 = awaitSDCBarcode.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 = newSDCBarcode.SymbologyDescription(barcode.symbology);

          showResult(barcode.data, symbology.readableName);
          await barcodeCapture.setEnabled(true);

       },
     });

     const view = awaitSDCCore.DataCaptureView.forContext(context);
     view.connectToElement(document.getElementById("data-capture-view"));
     view.addControl(newSDCCore.CameraSwitchControl());

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

     const viewfinder = newSDCCore.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(
    <divid="data-capture-view"></div>
  )
};

exportdefaultScanner;

WebSDK 5.x (Legacy)

Please have a look at the example below:

- pages/scan.tsx:

import React from 'react'
import dynamic from "next/dynamic";

const Scanner = dynamic(() => import("../components/ScanditScanner"), {
  ssr: false,
  loading: () => <p>Initializing Scanner</p>,
});

const scan = () => {
  return (
    <Scanner />
  )
}

export default scan

- components/ScanditScanner.tsx:

import React from 'react'
import ScanditBarcodeScanner from "scandit-sdk-react";

import {
  ScanSettings,
  Barcode,
  BarcodePicker,
  CameraAccess,
  CameraSettings,
  SingleImageModeSettings,
  Camera,
} from"scandit-sdk";

const ScanditScanner = () => {
  let licenseKey = 'YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE'
  const engineLocation = "https://cdn.jsdelivr.net/npm/scandit-sdk@5.x/build/"
  const getScanSettings = () => {
    return new ScanSettings({
      enabledSymbologies: [Barcode.Symbology.QR, Barcode.Symbology.DATA_MATRIX, Barcode.Symbology.CODE128],
    });
  };

  const getSingleImageModeSettings = () => {
    return {
      desktop: {
        usageStrategy:SingleImageModeSettings.UsageStrategy.FALLBACK,
      },
      mobile: {
        usageStrategy:SingleImageModeSettings.UsageStrategy.FALLBACK,
      },
    };
  };

  return (
    <ScanditBarcodeScanner
       licenseKey={licenseKey}
       engineLocation={engineLocation}
       onScan={result=>console.log('Scan result: ', result) }
       onScanError={error=>console.log('Scan error: ', error)}
       onSubmitFrame={console.log}
       onProcessFrame={console.log}
       paused={false}
       preloadBlurryRecognition={true}
       preloadEngine={true}
       onReady={console.log('Scanner is ready.')}
       // Picker options
       scanSettings={getScanSettings()}
       accessCamera={true}
       cameraSettings={undefined}
       enableCameraSwitcher={true}
       enablePinchToZoom={true}
       enableTapToFocus={true}
       enableTorchToggle={true}
       guiStyle={BarcodePicker.GuiStyle.LASER}
       laserArea={{ x:0, y:0, width:0, height:0 }}
       playSoundOnScan={true}
       targetScanningFPS={30}
       vibrateOnScan={true}
       videoFit={BarcodePicker.ObjectFit.CONTAIN}
       visible={true}
       viewfinderArea={{ x:0, y:0, width:10, height:10 }}
       zoom={0}
       // only set on component creation, can not be changed afterwards
       singleImageModeSettings={getSingleImageModeSettings()}
    />
  )
}

export default ScanditScanner

Was this article helpful?

WebSDK 5.x (Legacy)

Related articles