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?
Comments
0 comments
Please sign in to leave a comment.