1D & 2D Barcodes

Repository

I developed this comprehensive barcode utility to master advanced Next.js features and browser-based hardware integration. The project allows users to generate a wide array of 1D and 2D codes—including QR, EAN-13, and Data Matrix—while providing a robust scanning interface that leverages the device's camera. It served as a practical exploration of modern TypeScript development and real-time image processing in the browser.

Dynamic Barcode Generation

The generation engine uses the bwip-js library to render professional-grade barcodes directly onto a HTML5 canvas. I implemented a modular BarCode component that dynamically adjusts its rendering parameters based on the selected code type (bcid) and input value. This approach ensures that every generated code—whether it's a simple QR code or a complex Code 128—is perfectly scaled and follows international symbology standards.

1export default function BarCode({chosenOption, value, onRendered}: BarCodeProps) {
2    const canvasRef = useRef<HTMLCanvasElement>(null);
3
4    useEffect(() => {
5        if (!canvasRef.current) return;
6
7        try {
8            // High-fidelity rendering via bwip-js
9            bwipjs.toCanvas(canvasRef.current, {
10                bcid: chosenOption, // e.g., 'qrcode', 'ean13'
11                text: value,
12                scale: 3,
13                includetext: true,
14                textxalign: 'center',
15            });
16            if (onRendered) onRendered(canvasRef.current);
17        } catch (e) {
18            console.error("Barcode generation error:", e);
19        }
20    }, [value, chosenOption, onRendered]);
21
22    return (
23        <div className="barcode-container flex items-center justify-center p-4 bg-white">
24            <canvas ref={canvasRef} className="max-w-full h-auto" />
25        </div>
26    );
27}

Real-time Camera Integration

The scanning functionality leverages the BrowserMultiFormatReader from the @zxing/library. I implemented a resilient getCameraStream function that handles the complexities of mobile hardware, including requesting permissions and fallback logic for different camera lenses (e.g., forcing the environment facing mode). The reader processes the video feed in a continuous loop, identifying and decoding barcodes in real-time with high accuracy even in challenging lighting conditions.

1const getCameraStream = async () => {
2  try {
3    const constraints = {
4      video: {
5        facingMode: { ideal: "environment" },
6        width: { min: 640, ideal: 1280 },
7        height: { min: 480, ideal: 720 },
8      },
9    };
10
11    // Resilient stream acquisition
12    const videoStream = await navigator.mediaDevices
13      .getUserMedia(constraints)
14      .catch(() => navigator.mediaDevices.getUserMedia({ video: true }));
15
16    if (videoRef.current) {
17      videoRef.current.srcObject = videoStream;
18
19      // Continuously decode from the live video feed
20      codeReader.decodeFromVideoDevice(null, videoRef.current, (result) => {
21        if (result) setBarcode(result.getText());
22      });
23    }
24  } catch (e) {
25    setError("Failed to access camera. Please check your browser permissions.");
26  }
27};

Responsive Interface and UX

To ensure a smooth experience across devices, I used Tailwind CSS for a mobile-first responsive design. The UI features a clean, focused layout that prioritizes the scanning viewport and the generated code. I also implemented robust error handling for common camera issues, such as NotAllowedError or NotFoundError, providing users with clear, actionable feedback when the application cannot access the required hardware.

Technical Challenges

One of the biggest hurdles was ensuring high-quality scanning on diverse mobile devices. I solved this by implementing ideal and relaxed constraints for the media stream, allowing the app to scale down its requirements for older hardware without sacrificing quality for modern devices. This project significantly deepened my understanding of Web APIs, real-time decoding algorithms, and the intricacies of building hardware-dependent web applications.

Live Demo

You can try the web app yourself by clicking on the button. You will need to allow camera access on the reader. Note that camera performance can vary across different Android mobile browsers.

Video Demonstration

External Media Required

This video requires third-party cookies from YouTube to be displayed. Accepting will enable all external media across the site.