🕵️‍♂️ An offline QR code reader (Public Sector Edition)

What does it mean to work in the public sector?

I'm working in the public sector / a goverment agency. I'm responsible for the digitalization of a specific area. Sadly, if you are in the public sector but not in the IT area directly, the resources and the tools available to support the daily job and create new solutions are very very limited. The justification is “for security reasons and no budget.”.

Anyway, we still Need to accomplish specific Tasks. My colleagues are working with certificates. The certificates can be checked online on the issuer Website. Because the cerficates are bound to personal data, a QR code with link and a hash is provided on every certificate, so that you don't need to fill manually all required form fields to check the certificate.

What is this all About?

The issue is, that my colleages do not have any devices to read the QR code and also can't use the freely available QR code readers from the internet, since they are handling with personal data, which should be kept private. They asked me if I can help them and find a way to read the QR codes in a comfortable and at the same time secure way?

I can offer a lot of different solutions using C# or NodeJS or similar programming languages and environments, however I don't have them. So my only option was to use vanilla JavaScript and static/local HTML pages. I wrote the first half of the functionality myself and vibe coded some specific functionality and the styling (roughly the second half).

The certificates are saved either as PDFs or as images. Also there are different certificate providers and the QR code is positioned on different locations on the page. I need either a solution that can crop the QR code and scan it or scan the complete page automatically and read the QR code. Let's summarize the conditions:

it should work completely locally (loaded data, should not leave the device)
it should use existing, already installed Software (not possible to install new software)
it should not cost anything (fees or software buy)

Conclusion: Technology stack is limited to vanilla JavaScript and pre-installed browsers.

Solution and the support of AI.

Let's see what is possible and how. I broke down the technical requirements into the following parts:

Load a file and read its content in (browser-)memory using an html input element
If the loaded file is PDF or image show it (bonus: PDF paging, when a document has multiple pages)
Create a comfortable UI option to crop the QR Code and take it's content as an input for the QR code reader
Scan QR code and retrieve content (bonus: if possible, without the need to specify where the QR code is located, and so omit the previous part)
Styling - because no one likes ugly weg pages anymore. 😉

Let's gooo.

1. This part is straight foreward and an empty html page with file picker was created in minutes.

2. I already used Mozilla PDF.js viewer in the past, which is also build-in into Firefox, so I didn't look for other viewers. It's a modern free open source solution, that supports loading PDF Content in memory from an ArrayBuffer, which is one of the possible Outputs from the Input element. I extended the html page with a canvas and added the code to load the and show the PDF content on the canvas.

Aaaand opening the web page as a file from the disk - what my colleagues will do - failed.

The issue was, that at the time of working on the first version, I didn't have access to a web Server (also not locally), and the browser showed an error - CORS while loading the PDF.js library using the file:// protocol.

Access to script at 'file:///C:/Projects/QRCodeReader/js/pdf.min.mjs' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

Since every file is viewed as Origin, loading does not work, because the Same-Origin-Policy is violated. Luckily Chrome, Edge and Firefox offer an easy way to get around and allow loading from pages loaded using the file:// protocol.

Chrome and MS Edge have the same core and thus the same command line Option

--allow-file-access-from-files

Starting Chrome/MS Edge from the CLI like this solves the issue:

"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

"c:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --allow-file-access-from-files

Firefox does not have a command line option, however it has a configuration option for the same functionality:

navigate to about:config
and set the security.fileuri.strict_origin_policy option to false

I personally even prefer the Firefox variant better, since the change is permanent and the Chrome solution needs special preparations.

Fortunately, discovering this problem and solving it helped me with the next step - loading the QR code reader libraries - otherwise, I would have had the same problem when loading them too.

3. This is the part where I started vibe coding. It could have taken me definitely longer to implement the cropping functionality on my own. 😉

I used Google Gemini and it was almost a one-shot solution, that works exactly as expected - select an area from the canvas with the mouse, crop it and convert the data into an Image. The AI handled all the logic about scaling, moving and transforming. When I supplied my current code and asked to modify this, so that it works also for Images, the solution was easier then I thought - the canvas usage and handling logic applies without any changes for an image - the only change was just to show the image on the canvas instead of the PDF.js viewer.

4. There are a few good QR code Javascript libaries out there. A lot of them a for pecific frameworks or only for NodeJS, so for obvious reasons I could not use them. Initially I found the old but good jsqrcode (https://github.com/LazarSoft/jsqrcode). It worked very well, however only for precise QR code images - this means I could have only offered a solution in which you need every time to crop the QR code and read it or implement automatic cropping of an area of the image/document depending on the different certificate types. Possible, but not comfortable or easy. I searched further and found Nimiq QR Code scanner (https://github.com/nimiq/qr-scanner) which not only supports ESM but also scanning a complete image that contains somewhere a QR code. Yay. Full scan - here we go. 🚀

I decided to try it and it worked pretty good. It even has a file for older versions, that do not support modules functionality.

5. Last but not least - now that the web page was ready and worked as expected I thought, that it could use some color. Nobody likes ugly pages in 2026 anymore. My first thought was to use TailwindCSS. I instructed the AI and it created a light and good styling. The problem with it - the cropping did not work anymore properly. Ouch.

I started debugging and discussing the issue with the AI. At some point instead of trying to fix scaling factors and z-index of elements I told the AI to replace the TailwindCSS classes with custom CSS. And again It did a great job - it took the styling and created custom classes, that didn't broke the cropping anymore, but looked exactly like the TailwindCSS styling. Problemo solved. 🥳

A few months later we finally have out own web server and now everyone can easily use the QR code reader from it, instead of starting Chrome with extra arguments in order to scan a document.

If you need a QR Code reader solution that works completelly offline for PDF documents and image files, you can grab the open source code from GitHub - https://github.com/keenthinker/vibe-qr-scanner.

As always, questions, suggestions, and feedback are welcome at any time.