Your webrowser can: scan barcodes, use gamepad, locate with gps, ...

Recently, I had to evaluate which products of the same type were better by giving them grades. It seemed like a very repetitive and simple task. After I examined the products, it turned out that they all have an EAN ¹ codes that can be scanned. So, repetitive, simple task and unique identifiers. It was asking to be digitalized, and I was supposed to do it for several weeks. I knew that I can create a simple mobile app that can scan codes, but using Android Studio, building expo or flutter project seemed like an overkill. Google search, some medium.com posts, a bit of research and out of the blue I found myself on mdn web docs ².

tl;dr

• Modern web browsers, especially those based on Chromium have very vide range of functionalities and capabilities that are not related to HTML documents.
• When writing code for the Web, these functionalities are available through Web APIs and typically used with JavaScript.
• A full list of functionalities and theirs documentation is available at this address: developer.mozilla.org/en-US/docs/Web/API
• It takes a far less time and effort to create/deploy web app than native app with functionality that is already implemented in the browser.

ex. barcode scanner

I’ve met requirements needed for the case I presented in the introduction, using a very simple Python fastAPI server and a single HTML document with a <script> tag. As a proof of concept, firstly I coded a prototype frontend. All JavaScript needed to invoke barcode scanner API is presented below.

(async function () {
    const video = document.getElementById("video");
    const barcodeResult = document.getElementById("barcodeResult");
    const productCode = document.getElementById("productCode");

    // Check for BarcodeDetector support
    if (!("BarcodeDetector" in window)) {
        alert("Barcode Detection API is not supported in this browser.");
        return;
    }

    // Initialize the Barcode Detector with supported formats
    const barcodeDetector = new BarcodeDetector({
        formats: ["qr_code", "ean_13", "code_128"],
    });

    try {
        // Access the camera
        const stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: "environment" },
        });
        video.srcObject = stream; // Assign stream to video element
        video.play();

        // Barcode detection loop
        video.addEventListener("play", async () => {
            while (true) {
                try {
                    const barcodes = await barcodeDetector.detect(video); // Detect barcodes
                    if (barcodes.length > 0) {
                        barcodeResult.textContent = barcodes[0].rawValue; // Show first detected barcode
                    }
                } catch (err) {
                    console.error("Error detecting barcode:", err);
                }
                await new Promise((resolve) => setTimeout(resolve, 100)); // Add delay for performance
            }
        });
    } catch (error) {
        console.error("Error accessing camera:", error);
        alert(
            "Unable to access the camera. Please check permissions or run the code on a secure server.",
        );
    }
})();

If You are reading this on a mobile device, and You are using a chromium based browser, feel free to check this frontend out at: mt1gr.github.io/html-barcode-scanner-testing/

ex. animations on this website (View Transition API)

I’ve wanted to give You and Me, a pleasant experience using this site. That’s why apart from making sure the content loads fast I added some transition animations. These animations, again are seen only on chromium based browsers. They provide reader a mobile application like feeling. This feature was also reached with a minimum JavaScript code. In fact, it were just two lines of code added to Layout template.

import { ClientRouter } from "astro:transitions";
...
...
...
<ClientRouter />

Author: MtGr