barKoder Web SDK - Next.JS Integration
This document explains how to install, configure, and use the Barkoder WebAssembly (WASM) SDK inside a Next.js (v13+ / v14+) project.
Requirements #
WebAssembly is a type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and is designed to run alongside JavaScript.
Browser Requirements
- Chrome 67+, Firefox 69+, Edge 79+, Safari 14+, iOS Safari 14+
Runtime Requirements
- HTTPS-enabled server (Next.js automatically provides HTTPS in production)
- WASM must be served with MIME type: application/wasm (Next.js handles this automatically when placed in the /public folder)
- Browser camera permission if using startScanner
Installation #
Create a Next.js app named barkoder
npx create-next-app@latest barkoder --yes
cd barkoder
npm run dev
You can install the barKoder SDK using NPM, or manually from a zip file.
Install via NPM #
npm install barkoder-wasm
Manual Installation #
If you want to install Barkoder from a local folder:
1. Download the ZIP
2. Unzip the package
Rename the extracted folder (optional):
barkoder-wasm/
3. Move it into your project
my-next-app/
├─ app/
├─ public/
├─ barkoder-wasm/ ← your downloaded SDK
4.Install via local path
npm install "./barkoder-wasm"
Project Structure #
To properly load WebAssembly files, move these files into the public folder:
-
barkoder.wasm -
barkoder-umd.js
Your structure should look like:
my-next-app/
├─ public/
│ ├─ barkoder.wasm
│ ├─ barkoder-umd.js
├─ app/ or pages/
This ensures:
- WASM loads correctly on client side
- MIME type is handled automatically
- No bundling issues with WebAssembly in SSR
Next.js is server-side rendered (SSR) by default.
Barkoder must run only on the client, so you must use "use client"
"use client";
Basic Setup in a Next.js Component #
Below is the simplest working implementation.
Create a React client component #
Create app/barkoder/page.tsx or any component:
"use client";
import { useEffect, useRef } from "react";
import BarkoderSDK from "barkoder-wasm";
export default function BarkoderScanner() {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
async function init() {
const Barkoder = await BarkoderSDK.initialize("YOUR_LICENSE_KEY_HERE");
// Enable desired symbologies
Barkoder.setEnabledDecoders(
Barkoder.constants.Decoders.QR,
Barkoder.constants.Decoders.Ean8,
Barkoder.constants.Decoders.PDF417
);
// Optional settings
Barkoder.setCameraResolution(Barkoder.constants.CameraResolution.FHD);
Barkoder.setDecodingSpeed(Barkoder.constants.DecodingSpeed.Normal);
// Start scanning
Barkoder.startScanner(result => {
if (result.error) {
alert(result.error.message);
} else {
alert(`${result.barcodeTypeName}\n${result.textualData}`);
}
});
}
init();
}, []);
return (
<div id="barkoder-container"
ref={containerRef}
style={{ width: "100%", height: "400px" }}
/>
);
}
When bundling with NPM, Barkoder auto-loads the WASM.
But if you manually placed WASM in /public, specify the path:
await BarkoderSDK.initialize("LICENSE_KEY", {
wasmUrl: "/barkoder.wasm"
});
Configuring Barkoder #
Enabling Symbologies #
Barkoder.setEnabledDecoders(
Barkoder.constants.Decoders.QR,
Barkoder.constants.Decoders.Code128,
Barkoder.constants.Decoders.PDF417
);
Using configureBarkoder() #
let config = new Barkoder.configTypes.BarkoderConfig({
decoder: new Barkoder.configTypes.DekoderConfig({
qr: new Barkoder.configTypes.BarcodeConfig({ enabled: true }),
code128: new Barkoder.configTypes.BarcodeConfig({ enabled: true })
})
});
Barkoder.configureBarkoder(config);
Using a JSON Template #
Create: public/barkoder-template.json
{
"all": {
"decoder": {
"QR": { "enabled": true },
"Code 128": { "enabled": true },
"PDF 417": { "enabled": true }
}
}
}
Then:
await Barkoder.applyTemplate("/barkoder-template.json", "all");
Additional Settings #
Camera, ROI, Speed #
Barkoder.setCameraResolution(Barkoder.constants.CameraResolution.FHD);
Barkoder.setDecodingSpeed(Barkoder.constants.DecodingSpeed.Normal);
Barkoder.setImageResultEnabled(true);
Barkoder.setRegionOfInterest(10, 10, 80, 80);
Barkoder.setRegionOfInterestVisible(true);
Barkoder.setContinuous(false);
Starting & Stopping the Scanner #
let callback = (result) => {
if (result.error) {
console.log(result.error.message);
} else {
console.log(result.barcodeTypeName, result.textualData);
}
};
Barkoder.startScanner(callback);
Barkoder.stopScanner();
Scanning Static Images #
Place images in /public, then:
Barkoder.scanImage("/test.png", callback);
Handling Results (Single & Multi-Code) #
if (result.resultsCount === 1) {
console.log(result.textualData);
} else {
for (let r of result.results) {
console.log(`${r.barcodeTypeName}: ${r.textualData}`);
}
}
Known Next.js Issues & Solutions #
Issue: WASM cannot load (404) #
Ensure barkoder.wasm is placed in /public.
Issue: “window is not defined” #
Add "use client"
Always initialize inside useEffect
Issue: Scanner container is invisible #
Ensure your div has a fixed size:
#barkoder-container {
width: 100%;
height: 400px;
}
Full List of All Available Symbologies #
Here's a list of all available symbologies: https://barkoder.com/docs/v1/barkoder-web-sdk/web-sdk-for-barkoder-api-reference#decoders
Barkoder.constants.Decoders.Aztec
Barkoder.constants.Decoders.AztecCompact
Barkoder.constants.Decoders.QR
Barkoder.constants.Decoders.QRMicro
Barkoder.constants.Decoders.Code128
Barkoder.constants.Decoders.Code93
Barkoder.constants.Decoders.Code39
Barkoder.constants.Decoders.Codabar
Barkoder.constants.Decoders.Code11
Barkoder.constants.Decoders.Msi
Barkoder.constants.Decoders.UpcA
Barkoder.constants.Decoders.UpcE
Barkoder.constants.Decoders.UpcE1
Barkoder.constants.Decoders.Ean13
Barkoder.constants.Decoders.Ean8
Barkoder.constants.Decoders.PDF417
Barkoder.constants.Decoders.PDF417Micro
Barkoder.constants.Decoders.Datamatrix
Barkoder.constants.Decoders.Code25
Barkoder.constants.Decoders.Interleaved25
Barkoder.constants.Decoders.ITF14
Barkoder.constants.Decoders.IATA25
Barkoder.constants.Decoders.Matrix25
Barkoder.constants.Decoders.Datalogic25
Barkoder.constants.Decoders.COOP25
Barkoder.constants.Decoders.Code32
Barkoder.constants.Decoders.Telepen
Barkoder.constants.Decoders.Dotcode
Barkoder.constants.Decoders.Databar14
Barkoder.constants.Decoders.DatabarLimited
Barkoder.constants.Decoders.DatabarExpanded
Barkoder.constants.Decoders.PostalIMB
Barkoder.constants.Decoders.Postnet
Barkoder.constants.Decoders.Planet
Barkoder.constants.Decoders.AustralianPost
Barkoder.constants.Decoders.RoyalMail
Barkoder.constants.Decoders.KIX
Barkoder.constants.Decoders.JapanesePost
Barkoder.constants.Decoders.MaxiCode