Follow

How to use the WebSDK in NextJS/React with SSR?

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?
0 out of 0 found this helpful
Have more questions? Submit a request